超简洁又强大的幻灯片JS、CSS代码,兼容性强

35 篇文章 0 订阅
13 篇文章 0 订阅
html,body {color:#333;font:12px Tahoma,Arial,宋体;} 
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p{margin:0;padding:0} 
li {list-style-type:none;list-style-position:outside} 
img {border:medium none;vertical-align:top} 
input {vertical-align:middle;font-size:12px} 
button {vertical-align:middle;font-size:12px} 
ol, ul {list-style-image:none;list-style-position:outside;list-style-type:none} 
a {color:#363636;text-decoration:none;} 
.clear {clear:both;} 
.clearfix:after {clear:both;content:".";display:block;height:0;overflow:hidden;visibility:hidden} 
em {font-style:normal;} 
.wei{ width:100px; height:100px; background:#00C; margin-left:10px;} 
.img_show{ width:283px; height:194px; position:relative; margin:0 auto; margin-top:10px;} 
.img{ width:283px; height:194px; overflow:hidden;} 
.img ul li{ float:left; width:283px; height:194px;} 
.img ul{ width:1415px; height:194px; } 
.sz{position:absolute; right:5px; bottom:2px;} 
.sz ul li{ float:left; width:20px; height:20px; background:#0F0; color:#00C; margin:0 5px; z-index:100; text-align:center; line-height:20px; cursor:pointer;} 
.sz ul li.on{ background:#900; color:#FFF;} 

<div class="con"> 
<div class="img_show"> 
<div class="sz"> 
<ul> 
<li class="on">1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
</ul> 
</div> 
<div class="img"> 
<ul> 
<li><a href="http://www.cncco.com/"><img src="images/1.jpg" width="283" alt="css 特效" height="194"></a></li> 
<li><img src="images/2.jpg"></li> 
<li><img src="images/3.jpg" width="283" height="194"></li> 
<li><img src="images/4.jpg" width="283" height="194"></li> 
<li><img src="images/5.jpg" width="283" height="194"></li> 
</ul> 
</div> 
</div> 
</div> 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值