淘宝静态页面

Posted 不忘初心 方得始终

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了淘宝静态页面相关的知识,希望对你有一定的参考价值。

 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 }

以上是关于淘宝静态页面的主要内容,如果未能解决你的问题,请参考以下文章

淘宝静态页面2

在android studio中升级repo v9后,片段必须是公共静态类崩溃错误

仿淘宝电商网站管理系统前端静态页面(html+jquery+css)(含毕业设计论文及源码)

Python3爬虫爬取淘宝商品数据

支持动态或静态片段的不同屏幕尺寸?

阿里面试官:淘宝页面请求的过程说一下