首页 > 代码库 > 淘宝静态页面

淘宝静态页面

 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="http://www.mamicode.com/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="http://www.mamicode.com/#">淘宝女人</a></li>
16                       <li class="c2"><a href="http://www.mamicode.com/#">运动派</a></li>
17                       <li class="c3"><a href="http://www.mamicode.com/#">情侣</a></li>
18                       <li class="c1"><a href="http://www.mamicode.com/#">淘宝男人</a></li>
19                       <li class="c2"><a href="http://www.mamicode.com/#">孕婴童</a></li>
20                       <li class="c3"><a href="http://www.mamicode.com/#">家居</a></li>
21                       <li class="c1"><a href="http://www.mamicode.com/#">美容护肤</a></li>
22                       <li class="c2"><a href="http://www.mamicode.com/#">中老年</a></li>
23                       <li class="c3"><a href="http://www.mamicode.com/#">美食</a></li>
24                       <li class="c1"><a href="http://www.mamicode.com/#">保险理财</a></li>
25                       <li class="c2"><a href="http://www.mamicode.com/#">有车族</a></li>
26                       <li class="c3"><a href="http://www.mamicode.com/#">装修</a></li>
27                       <li class="c1"><a href="http://www.mamicode.com/#">手机数码</a></li>
28                       <li class="c2"><a href="http://www.mamicode.com/#">生活家</a></li>
29                       <li class="c3"><a href="http://www.mamicode.com/#">游戏</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="http://www.mamicode.com/#">淘宝二手</a></li>
38                     <li class="c2"><a href="http://www.mamicode.com/#">拍卖会</a></li>
39                     <li class="c3"><a href="http://www.mamicode.com/#">爱逛街</a></li>
40                     <li class="c1"><a href="http://www.mamicode.com/#">淘宝奇葩</a></li>
41                     <li class="c2"><a href="http://www.mamicode.com/#">全球购</a></li>
42                     <li class="c3"><a href="http://www.mamicode.com/#">挑食</a></li>
43                     <li class="c1"><a href="http://www.mamicode.com/#">淘宝同学</a></li>
44                     <li class="c2"><a href="http://www.mamicode.com/#">淘女郎</a></li>
45                     <li class="c3"><a href="http://www.mamicode.com/#">星店</a></li>
46                     <li class="c1"><a href="http://www.mamicode.com/#">淘宝众筹</a></li>
47                     <li class="c2"><a href="http://www.mamicode.com/#">B格</a></li>
48                     <li class="c3"><a href="http://www.mamicode.com/#">动漫</a></li>
49                     <li class="c1"><a href="http://www.mamicode.com/#">生活服务</a></li>
50                     <li class="c2"><a href="http://www.mamicode.com/#">淘宝达人</a></li>
51                     <li class="c3"><a href="http://www.mamicode.com/#">搭配</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="http://www.mamicode.com/#">天天特价</a></li>
60                     <li class="c2"><a href="http://www.mamicode.com/#">免费试用</a></li>
61                     <li class="c3"><a href="http://www.mamicode.com/#">清仓</a></li>
62                     <li class="c1"><a href="http://www.mamicode.com/#">一元起拍</a></li>
63                     <li class="c2"><a href="http://www.mamicode.com/#">淘宝币</a></li>
64                     <li class="c3"><a href="http://www.mamicode.com/#">夜抢购</a></li>
65                     <li class="c1"><a href="http://www.mamicode.com/#">阿里旺旺</a></li>
66                     <li class="c2"><a href="http://www.mamicode.com/#">支付宝</a></li>
67                     <li class="c3"><a href="http://www.mamicode.com/#">来往</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 }

技术分享

淘宝静态页面