静态轮播图-html教程-PHP中文网

 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" >&lt;</div>
25 <div class="btn btn2">&gt;</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 }