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="d1">
10 <p>淘宝特色服务</p>
11 <div class="item">
12 <div class="listtitle" id="title1">主题市场</div>
13 <div class="listcon">
14 <ul>
15 <li class="c1"><a href="#">淘宝女人</a></li>
16 <li class="c2"><a href="#">运动派</a></li>
17 <li class="c3"><a href="#">情侣</a></li>
18 <li class="c1"><a href="#">淘宝男人</a></li>
19 <li class="c2"><a href="#">孕婴童</a></li>
20 <li class="c3"><a href="#">家居</a></li>
21 <li class="c1"><a href="#">美容护肤</a></li>
22 <li class="c2"><a href="#">中老年</a></li>
23 <li class="c3"><a href="#">美食</a></li>
24 <li class="c1"><a href="#">保险理财</a></li>
25 <li class="c2"><a href="#">有车族</a></li>
26 <li class="c3"><a href="#">装修</a></li>
27 <li class="c1"><a href="#">手机数码</a></li>
28 <li class="c2"><a href="#">生活家</a></li>
29 <li class="c3"><a href="#">游戏</a></li>
30 </ul>
31 </div>
32 </div>
33 <div class="item">
34 <div class="listtitle" id="title2">特色购物</div>
35 <div class="listcon">
36 <ul>
37 <li class="c1"><a href="#">淘宝二手</a></li>
38 <li class="c2"><a href="#">拍卖会</a></li>
39 <li class="c3"><a href="#">爱逛街</a></li>
40 <li class="c1"><a href="#">淘宝奇葩</a></li>
41 <li class="c2"><a href="#">全球购</a></li>
42 <li class="c3"><a href="#">挑食</a></li>
43 <li class="c1"><a href="#">淘宝同学</a></li>
44 <li class="c2"><a href="#">淘女郎</a></li>
45 <li class="c3"><a href="#">星店</a></li>
46 <li class="c1"><a href="#">淘宝众筹</a></li>
47 <li class="c2"><a href="#">B格</a></li>
48 <li class="c3"><a href="#">动漫</a></li>
49 <li class="c1"><a href="#">生活服务</a></li>
50 <li class="c2"><a href="#">淘宝达人</a></li>
51 <li class="c3"><a href="#">搭配</a></li>
52 </ul>
53 </div>
54 </div>
55 <div class="item">
56 <div class="listtitle" id="title3">优惠促销</div>
57 <div class="listcon">
58 <ul>
59 <li class="c1"><a href="#">天天特价</a></li>
60 <li class="c2"><a href="#">免费试用</a></li>
61 <li class="c3"><a href="#">清仓</a></li>
62 <li class="c1"><a href="#">一元起拍</a></li>
63 <li class="c2"><a href="#">淘宝币</a></li>
64 <li class="c3"><a href="#">夜抢购</a></li>
65 <li class="c1"><a href="#">阿里旺旺</a></li>
66 <li class="c2"><a href="#">支付宝</a></li>
67 <li class="c3"><a href="#">来往</a></li>
68 </ul>
69 </div>
70 </div>
71 </div>
72 </body>
73 </html>
1 body{
2 font-family:"微软雅黑";
3 }
4 p,ul{
5 padding:0px;
6 margin:0px;
7 }
8 ul{
9 list-style-type:none;
10 }
11 #d1{
12 width:192px;
13 height:492px;
14 border:solid 1px red;
15 }
16 #d1 p{
17 background:#ff4400;
18 height:36px;
19 line-height:36px;
20 color:#ffffff;
21 padding-left:10px;
22 }
23 .item{
24 margin-top:10px;
25 margin-left:10px;
26 height:140px;
27 width:172px;
28 border-bottom:solid 1px #E6E7EB;
29 }
30 .listtitle{
31 height:22px;
32 background-repeat:no-repeat;
33 padding-left:30px;
34 font-weight:bold;
35 }
36 #title1{
37 background-image:url(../image/bg_1.jpg);
38 }
39 #title2{
40 background-image:url(../image/bg_2.jpg);
41 }
42 #title3{
43 background-image:url(../image/bg_3.jpg);
44 }
45 .listcon li{
46 float:left;
47 }
48 .listcon li a{
49 color:#3c3c3c;
50 text-decoration:none;
51 font-size:12px;
52 display:block;
53 height:22px;
54 line-height:22px;
55 }
56 .listcon li a:hover{
57 color:#FF4401;
58 }
59 .c1{
60 width:64px;
61 }
62 .c2{
63 width:54px;
64 }
65 .c3{
66 width:38px;
67 }
