静态轮播图
程序员文章站
2022-04-10 11:16:11
...
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <link href="css/demo.css" rel="stylesheet" /> 7 </head> 8 <body> 9 <div id="dlunbo"> 10 <div id="igs"> 11 <div class="ig"><img src="img/1_1.jpg" /></div> 12 <div class="ig"><img src="img/1_2.jpg" /></div> 13 <div class="ig"><img src="img/1_3.png" /></div> 14 <div class="ig"><img src="img/1_4.jpg" /></div> 15 <div class="ig"><img src="img/1_5.jpg" /></div> 16 </div> 17 <ul id="tabs"> 18 <li class="tab"></li> 19 <li class="tab"></li> 20 <li class="tab"></li> 21 <li class="tab"></li> 22 <li class="tab"></li> 23 </ul> 24 <div class="btn btn1" ><</div> 25 <div class="btn btn2">></div> 26 </div> 27 </body> 28 </html>
1 *{ 2 margin:0px; 3 padding:0px; 4 list-style-type:none; 5 } 6 #dlunbo{ 7 width:500px; 8 height:330px; 9 position:absolute; 10 top:50%; 11 margin-top:-166px; 12 left:50%; 13 margin-left:-250px; 14 } 15 .ig{ 16 position:absolute; 17 } 18 img{ 19 width:500px; 20 height:330px; 21 } 22 #tabs{ 23 position:absolute; 24 top:300px; 25 left:200px; 26 } 27 .tab{ 28 width:20px; 29 height:20px; 30 border:solid 1px #ffffff; 31 float:left; 32 margin-left:5px; 33 border-radius:100%; 34 cursor:pointer; 35 } 36 .btn{ 37 width:30px; 38 height:50px; 39 position:absolute; 40 background:rgba(0,0,0,0.5); 41 color:#fff; 42 text-align:center; 43 line-height:50px; 44 font-size:30px; 45 top:50%; 46 margin-top:-25px; 47 cursor:pointer; 48 } 49 .btn1{ 50 left:0px; 51 } 52 .btn2{ 53 right:0px; 54 }
以上就是静态轮播图的详细内容，更多请关注其它相关文章！
上一篇： Dom与浏览器兼容性说明_DOM
下一篇： CSS3自定义滚动条样式的示例详解