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 }