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灯箱广告