admin 管理员组文章数量: 893893
CSS——灯箱广告
将css样式编写在另一个文件再引入,更加便于修改以及增加代码的观赏性
在头部中引入需要的css样式文件
<link href="one.css" type=text/css rel=stylesheet>
具体css样式
/*灯箱外框样式*/
.pic_box{border:solid 6px #bbb;position:relative;float:left;}
.pic_box img{width:500px;border:solid 1px #fff;}
/*导航框样式*/
.nav{background:#999;border:1px solid #ccc;padding:4px 12px;float:left;opacity:0.6;position:absolute;bottom:6px;right:12px;}
/*导航按钮样式*/
.nav a{float:left;display:block;height:20px;line-height:20px;width:20px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;text-align:center;background:#f36;color:green;margin-right:5px;text-decoration:none;}
.nav a:hover{background:green;color:#fff;}
在主体中编写代码
<body><div class="pic_box"><img src=";quality=100&size=b4000_4000&sec=1550025854&di=bcfaf634ff5ee6371286834bf0d308c3&src=.jpg" /><div class="nav"><a href="#1" class="links item first" title="w3cplus" target="_blank" id="first">1</a><a href="#2" class="links active item" title="test website" target="_blank" lang="zh">2</a><a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a><a href="#4" class="links item" target="_blank" lang="zh-tw">4</a><a href="#5" class="links item" title="zh-cn">5</a><a href="#6" class="links item" title="website link" lang="zh">6</a><a href="#7" class="links item" title="open the website" lang="cn">7</a><a href="#8" class="links item" title="close the website" lang="en-zh">8</a><a href="#9" class="links item" title="">9</a><a href="#10" class="links item last" id="last">10</a></div></div>
</body>
鼠标滑过 改变样式
本文标签: CSS灯箱广告
版权声明:本文标题:CSS——灯箱广告 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1687603665h120083.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论