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 }
