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

淘宝静态页面2

  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="item">
 10         <div id="d1">
 11             <div class="proitem">
 12                 <div class="proimage">
 13                     <a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/image/pro.jpg" /></a>
 14                 </div>
 15                 <div class="proprice">
 16                     <div class="price">¥99.00</div>
 17                     <div class="freepostage">包邮</div>
 18                     <div class="buynum">8520人付款</div>
 19                 </div>
 20                 <div class="protitle">
 21                     <a href="http://www.mamicode.com/#">最新款米微儿女包包时尚潮女单肩包鳄鱼皮斜挎包超级可爱的</a>
 22                 </div>
 23                 <div class="addressinfor">
 24                     <div class="shopname">
 25                         <a href="http://www.mamicode.com/#">mivor米微儿旗舰店</a>
 26                     </div>
 27                     <div class="address">河北保定</div>
 28                 </div>
 29                 <div class="logo">
 30                     <div class="logo1">
 31                         <img src="http://www.mamicode.com/image/logo_1.jpg" />
 32                     </div>
 33                     <div class="logo2">
 34                         <img src="http://www.mamicode.com/image/logo_2.jpg" />
 35                     </div>
 36                 </div>
 37             </div>
 38         </div>
 39 
 40 
 41         <div id="d2">
 42             <div class="proitem">
 43                 <div class="proimage">
 44                     <a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/image/pro.jpg" /></a>
 45                 </div>
 46                 <div class="proprice">
 47                     <div class="price">¥400.00</div>
 48                     <div class="freepostage">包邮</div>
 49                     <div class="buynum">850人付款</div>
 50                 </div>
 51                 <div class="protitle">
 52                     <a href="http://www.mamicode.com/#">欧美女包2017新款时尚潮女包包菱格纹偶美复古单肩包斜挎包</a>
 53                 </div>
 54                 <div class="addressinfor">
 55                     <div class="shopname">
 56                         <a href="http://www.mamicode.com/#">miss u旗舰店</a>
 57                     </div>
 58                     <div class="address">上海</div>
 59                 </div>
 60                 <div class="logo">
 61                     <div class="logo1">
 62                         <img src="http://www.mamicode.com/image/logo_1.jpg" />
 63                     </div>
 64                     <div class="logo2">
 65                         <img src="http://www.mamicode.com/image/logo_2.jpg" />
 66                     </div>
 67                 </div>
 68             </div>
 69         </div>
 70 
 71         <div id="d3">
 72             <div class="proitem">
 73                 <div class="proimage">
 74                     <a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/image/pro.jpg" /></a>
 75                 </div>
 76                 <div class="proprice">
 77                     <div class="price">¥215.00</div>
 78                     <div class="freepostage">包邮</div>
 79                     <div class="buynum">1008人付款</div>
 80                 </div>
 81                 <div class="protitle">
 82                     <a href="http://www.mamicode.com/#">2017新款潮流韩版防水尼龙双肩包女时尚单肩包牛津布旅行休闲背包</a>
 83                 </div>
 84                 <div class="addressinfor">
 85                     <div class="shopname">
 86                         <a href="http://www.mamicode.com/#">爱宝贝旗舰店</a>
 87                     </div>
 88                     <div class="address">广州广东</div>
 89                 </div>
 90                 <div class="logo">
 91                     <div class="logo1">
 92                         <img src="http://www.mamicode.com/image/logo_1.jpg" />
 93                     </div>
 94                     <div class="logo2">
 95                         <img src="http://www.mamicode.com/image/logo_2.jpg" />
 96                     </div>
 97                 </div>
 98             </div>
 99         </div>
100     </div>
101     
102 </body>
103 </html>
 1 body {
 2     font-size:12px;
 3     font-family:"微软雅黑";
 4 }
 5 a{
 6     text-decoration:none;
 7 }
 8 .proitem{
 9     height:360px;
10     width:220px;
11     border:solid 1px #EDEDED;
12 }
13 .proprice{
14     height:17px;
15     margin-left:7px;
16     margin-right:7px;
17     margin-top:10px;
18     line-height:17px;
19 }
20 .price{
21     font-size:20px;
22     color:#FF4400;
23     font-weight:bold;
24     width:79px;
25     float:left;
26 }
27 .freepostage{
28     text-align:center;
29     color:#fff;
30     width:28px;
31     float:left;
32     background-color:#FD4401;
33 }
34 .buynum{
35     color:#888888;
36     float:right;
37 }
38 .protitle{
39     height:33px;
40     margin-left:7px;
41     margin-right:7px;
42     margin-top:10px;
43     line-height:16px;
44 }
45 .protitle a{
46     color:#3D3D3D;
47 }
48 .addressinfor{
49     height:16px;
50     margin-left:7px;
51     margin-right:7px;
52     margin-top:10px;
53     color:#888888;
54 }
55 .shopname{
56     float:left;
57 }
58 .address{
59     float:right;
60 }
61 .addressinfor a{
62     color:#888888;
63     text-decoration:underline;
64 }
65 .logo{
66     margin-left:7px;
67     margin-right:7px;
68     margin-top:10px;
69 }
70 .logo1{
71     float:left;
72 }
73 .logo2{
74     float:right;
75 }
76 #item{
77     width:710px;
78     height:500px;
79     /*border:solid 1px #EDEDED;*/
80     position:absolute;
81     top:50%;
82     margin-top:-250px;
83     left:50%;
84     margin-left:-355px;
85     
86 }
87 #d1,#d2,#d3{
88     float:left;
89     margin-left:7px;
90     margin-right:7px;
91 }

技术分享

淘宝静态页面2