Html+css仿淘宝页面练习

常用的样式;

1), 设置网页置顶

body {
     margin-left: 0px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
      
     }

默认是有边距的,设置所有的外边距为0px

2 ),设置链接无下划线

Html代码

1 text-decoration: none;

3),淘宝搜索框的样式设置

Html代码

1 width:650px;  
2  border:4px solid #ff3300;  
3 height:30px;  
4 vertical-align:top;  
5 border-right:none;

4),搜索按钮的设置

Html代码

1 border:4px solid #ff3300;    
2  width:100px;  
3  height:40px;  
4 background:#ff3300;  
5 font-size:20px;  
6 color:#FFFFFF;  
7 margin-left:0px; 左边距为0  
8 border-left:none; 左边无边框  
9 vertical-align:top; 向上对齐

5),使用div定位

Html代码

1 #Layer3 {  
2     position:absolute;  
3     left:1004px;  
4     top:243px;  
5     width:280px;  
6     height:466px;  
7     z-index:2;  
8     background-color:#F7F7F7;  
9 }

  1 <html>
  2 
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>MM</title>
  6 
  7 <link rel="stylesheet" type="text/css" href="lesson3.css">
  8 
  9 
 10 
 11 
 12 </head>
 13 <body>
 14 <div class="top1">
 15 <div class="word1">亲，请登录</div>
 16 <div class="word2">免费注册</div>
 17 <div class="word3">手机逛淘宝</div>
 18 <div class="word4">
 19 <span class="one" style="margin-right:10px">我的淘宝</span>
 20 <span class="one" style="margin-right:10px">购物车</span>
 21 <span class="one" style="margin-right:10px">收藏夹</span>
 22 <span class="one" style="margin-right:10px">商品分类</span>
 23 <span class="one" style="margin-right:10px">卖家中心</span>
 24 <span class="one" style="margin-right:10px">联系客服</span>
 25 <span class="one" style="margin-right:10px">网站导航</span>
 26 
 27 
 28 </div>
 29 </div>
 30 <div class="subface">
 31 
 32 
 33 <div class="subface1">
 34 
 35 <div class="picture1"></div>
 36 <div class="picture2"></div>
 37 <div class="picture4"></div>
 38 <div class="picture5"></div>
 39 <div class="picture6"></div>
 40 <div class="word11"><h5>今日热卖</h5></div>
 41 <div class="center8">
 42 
 43 
 44 <span class="word9">天猫必逛</span>
 45 <em class="word10">热门品牌，天天上天猫！</em>
 46 <strong>
 47 <i>4/6</i>
 48 
 49 
 50 </strong>
 51 <hr>
 52 
 53 
 54 
 55 
 56 
 57 
 58 </div>
 59 <div class="right1">
 60 <div class="right2">
 61 <span class="right3">
 62 <a href="#">登录</a>
 63 </span>
 64 <span class="right3">
 65 <a href="#">注册</a>
 66 </span>
 67 <span class="right3">
 68 <a href="#">开店</a>
 69 </span>
 70 
 71 
 72 
 73 
 74 
 75 
 76 
 77 
 78 </ul>
 79 </div>
 80 <div class="right4">
 81 <ul class="nav2">
 82 <li class="list-item2"><a href="#">公告</a></li>
 83             <li class="list-item2"><a href="#">规则</a></li>
 84             <li class="list-item2"><a href="#">论坛</a></li>
 85             <li class="list-item2"><a href="#">安全</a></li>
 86             <li class="list-item2"><a href="#">公益</a></li>
 87             <li class="list-item2" ><a href="#">马云：希望未来中国500强里有200个CEO来自</a></li>
 88             <li class="list-item2"><a href="#">阿里第二届“校友”大</a></li>
 89             <li class="list-item2"><a href="#">惠誉评级将阿里定为</a></li>
 90 
 91 
 92         </ul>
 93 
 94 
 95 </div>
 96 <div class="picture3"></div>
 97 
 98 
 99 <div class="word7">Hi！<strong>你好</strong></div>
100 <div class="word8"><span class="three">领淘金币抵钱</span>
101 或去
102 <span class="three">会员俱乐部</span>
103 
104 </div>
105 
106 
107 
108 
109 </div>
110 
111 
112 </div>
113 
114 
115 <div class="center7">
116 <ul class="nav">
117 <li class="list-item">
118 <a href="#">天猫</a>
119 </li>
120 <li class="list-item">
121 <a href="#">聚划算</a>
122 </li>
123 <li class="list-item">
124 <a href="#">天猫超市</a>
125 </li>
126 <li class="list-item1">
127 <a href="#">淘抢购</a>
128 </li>
129 <li class="list-item1">
130 <a href="#">电器城</a>
131 </li>
132 <li class="list-item1">
133 <a href="#">司法拍卖</a>
134 </li>
135 <li class="list-item1">
136 <a href="#">中国质造</a>
137 </li>
138 <li class="list-item1">
139 <a href="#">特色中国</a>
140 </li>
141 <li class="list-item1">
142 <a href="#">飞猪旅行</a>
143 </li>
144 <li class="list-item1">
145 <a href="#">智能生活</a>
146 </li>
147 <li class="list-item1">
148 <a href="#">苏宁易购</a>
149 </li>
150 </ul>
151 </div>
152 <div class="left1">
153 <div class="left3"></div>
154 <div class="left2"><h3>主题市场</h3>
155 <div class="logo4"></div>
156 </div>
157 <ul>
158 <li class="word6"><span class="left">女装/ 男装/ 内衣</span></li>
159 <li class="word6"><span class="left">鞋靴/ 箱包/ 配件</span></li>
160 <li class="word6"><span class="left">童装玩具/孕产/用</span></li>
161 <li class="word6"><span class="left">家电/ 数码/ 手机</span></li>
162 <li class="word6"><span class="left">美妆/ 洗漱/保健品</span></li>
163 <li class="word6"><span class="left">珠宝/ 眼镜/ 手表</span></li>
164 <li class="word6"><span class="left">运动/ 户外/ 乐器</span></li>
165 <li class="word6"><span class="left">游戏/ 动漫/ 影视</span></li>
166 <li class="word6"><span class="left">美食/ 生鲜/ 零食</span></li>
167 <li class="word6"><span class="left">鲜花/ 宠物/ 农资</span></li>
168 <li class="word6"><span class="left">房产/ 装修/ 建材</span></li>
169 <li class="word6"><span class="left">家具/ 家饰/ 家纺</span></li>
170 <li class="word6"><span class="left">汽车/二手车/ 用品</span></li>
171 <li class="word6"><span class="left">办公/ DIY/五金电</span></li>
172 <li class="word6"><span class="left">百货/ 餐厨/家庭保</span></li>
173 <li class="word6"><span class="left">游戏/ 卡劵/本地服</span></li>
174 </ul>
175 </div>
176 <div class="top2">
177 <div class="logo1"></div>
178 
179 
180 <div class="centre1">
181 <div class="center6">新款连衣裙 四件套 潮流T恤 时尚女鞋 短裤 半身裙 男士外套 墙纸 行车记录仪 新款男鞋 耳机
182 <div class="small1"><span class="two">更多</span></div>
183 </div>
184 <ul >
185 <li class="word5">宝贝</li>
186 <li class="word5">天猫</li>  
187 <li class="word5">店铺</li>
188 </ul>
189 
190 
191 <div class="centre2">
192 <div class="center5">潮男冬季必入</div>
193 
194 
195 
196 <div class="center4">高级<br>搜索</div>
197 <div class="centre3">搜索</div>
198 </div>
199 </div>
200 </div>
201 </div>
202 <div class="bottom">
203 <div class="bottom1">
204 <div class="bottom2"></div>
205 <a href="#" class="word14"><strong>吃货的后裔</strong><br>
206 <span class="word12">翻滚吧美食君</span></a><br><em class="word13">人气13728</em>
207     </div>
208 <div class="bottom3">
209 <div class="bottom4"></div> 
210 <a href="#" class="word15"><strong>囤货一族</strong><br>
211 <span class="word16">会囤会生活</span></a><br>
212 <em class="word13">人气76000</em>
213 </div>
214 <div class="bottom3">
215 <div class="bottom6"></div>
216 <a href="#" class="word18"><strong>无辣不欢者</strong><br><span class="word19">辣即正义</span></a><br>
217 <em class="word13">人气5209</em>
218 </div>
219 <div class="bottom3">
220 <div class="bottom8"></div>
221 <a href="#" class="word20"><strong>装修家</strong><br><span class="word21">装扮我的家</span></a><br>
222 <em class="word13">人气45496</em>
223 </div>
224 <div class="bottom3">
225 <div class="bottom5"></div>
226 <a href="#" class="word22"><strong>有车一族</strong><br><span class="word23">定义车生活</span></a><br>
227 <em class="word13">最新发现</em>
228 </div>
229 
230 
231 
232 
233 
234 
235 
236 
237 </div>
238 
239 
240 <div class="right5">
241 <div class="right9">
242 <div class="right10">
243 <div class="icon11"></div>
244 <a class="word25" href="#" >充话费</a>
245 </div>
246 <div class="right10">
247 <div class="icon12"></div>
248 <a class="word25" href="#">游戏</a>
249 
250 
251 </div>
252 <div class="right10">
253 <div class="icon13"></div>
254 <a class="word25" href="#">旅行</a>
255 
256 
257 </div>
258 <div class="right10">
259 <div class="icon14"></div>
260 <a class="word25" href="#">旅行</a>
261 
262 
263 </div>
264 <div class="right10">
265 <div class="icon15"></div>
266 <a class="word25" href="#">彩票</a>
267 
268 
269 </div>
270 <div class="right10">
271 <div class="icon16"></div>
272 <a class="word25" href="#">电影</a>
273 
274 
275 </div>
276 <div class="right10">
277 <div class="icon17"></div>
278 <a class="word25" href="#">点外卖</a>
279 
280 
281 </div>
282 <div class="right10">
283 <div class="icon18"></div>
284 <a class="word25" href="#">理财</a>
285 
286 
287 </div>
288 <div class="right11">
289 <div class="icon19"></div>
290 <a class="word26" href="#">找服务</a>
291 
292 
293 </div>
294 <div class="right11">
295 <div class="icon20"></div>
296 <a class="word26" href="#">音乐</a>
297 
298 
299 </div>
300 <div class="right11">
301 <div class="icon21"></div>
302 <a class="word26" href="#">水电煤</a>
303 
304 
305 </div>
306 <div class="right11">
307 <div class="icon22"></div>
308 <a class="word26" href="#">火车票</a>
309 </div>
310 </div>
311 </div>
312 <div class="right6">
313 <div class="right7">
314 <span class="word24"><h3>阿里APP</span>
315 <a  class="more" href="#">更多</a></h3>
316 <ul class="right8">
317 <li class="icon1"><a href="#"></a></li>
318 <li class="icon2"><a href="#"></a></li>
319 <li class="icon3"><a href="#"></a></li>
320 <li class="icon4"><a href="#"></a></li>
321 <li class="icon5"><a href="#"></a></li>
322 <li class="icon6"><a href="#"></a></li>
323 <li class="icon7"><a href="#"></a></li>
324 <li class="icon8"><a href="#"></a></li>
325 <li class="icon9"><a href="#"></a></li>
326 <li class="icon10"><a href="#"></a></li>
327 </ul>
328 </div>
329 </div>
330 </body>
331 </html>

Html

   1 *{
   2 padding: 0;
   3 margin: 0;
   4 }
   5 .top1{
   6 position: absolute;
   7 top:0;
   8 width:100%;
   9 height:35px;
  10 margin:0px auto;
  11 
  12 background-color: #f5f5f5;
  13 
  14     
  15 }
  16 .word1{
  17 float: left;
  18 margin-top:10px; 
  19     margin-right: 7px;
  20    margin-left: 72px;
  21     font-size: 12px;
  22     color: #f22e00!important;
  23 }
  24 
  25 
  26 .word2{
  27 float: left;
  28 margin-top: 10px;
  29 margin-right: 7px;
  30     font-size: 12px;
  31     color: #6C6C6C;
  32 }
  33 .word3{
  34 float: left;
  35 margin-top: 10px;
  36 margin-left: 7px;
  37     font-size: 12px;
  38     color: #6C6C6C;
  39 }
  40 .word4{
  41 position:relative;
  42 left: 400px;
  43 
  44 margin-top: 10px;
  45     font-size: 12px;
  46     color: #6C6C6C;
  47 
  48 
  49 }
  50 .one::after{
  51 content: "";
  52 position: relative;
  53 top:8px;
  54 margin-left: 20px;
  55 width:0px;
  56 height:0px;
  57 border-top: 3px solid gray;
  58 border-right:3px solid transparent;
  59 border-left:3px solid transparent;
  60 border-bottom:3px solid transparent;
  61 }
  62 
  63 
  64 .top2{
  65 float: left;
  66 width:990px;
  67 height:100px;
  68 background-color: white;
  69 margin-left:50px;
  70 padding-top:30px;
  71 padding-bottom: 34px;
  72 }
  73 .logo1{
  74 position: relative;
  75     margin-top: 50px;
  76     margin-left: 32px;
  77     padding-top: 58px;
  78     width: 142px;
  79 height:0px;
  80 background-size:100% 100%;
  81     background-image:url(https://img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png_145x145.jpg);
  82     background-repeat:no-repeat;
  83     background-position:100% 100%;   
  84 }
  85 .centre1{
  86 position: absolute;
  87 float: left;
  88 display: block;
  89 top:98px;
  90 left:325px;
  91 width:627px;
  92 height:90px;
  93 background-color: white;
  94 }
  95 ul{
  96 list-style: none;
  97 }
  98 .word5{
  99 position: relative;
 100 top:-25px;
 101 left:20px;
 102     float: left;
 103     width: 50px;
 104     height: 25px;
 105     line-height: 25px;
 106     cursor: pointer;
 107     margin: 0;
 108     padding: 0;
 109     color: #F40;
 110     font-weight:700;
 111 }
 112 
 113 
 114 
 115 
 116 .centre2{
 117 margin-left: 20px;
 118 height:40px;
 119 width:627px;
 120 border:3px solid #F40;
 121 }
 122 .centre3{
 123 
 124 float: right;
 125 background-color: #FF4200;
 126     cursor: pointer;
 127     height: 40px;
 128     border: none;
 129     width: 122px;
 130     font-size: 18px;
 131     font-weight: 700;
 132     color: #FFF;
 133     text-align: center;
 134     line-height: 40px;
 135 }
 136 .center4{
 137 position: absolute;
 138 left: 660px;
 139 top:3px;
 140 width: 40px;
 141 height: 40px;
 142 border:0px solid black;
 143     color: #666;
 144     font-size: 12px;
 145 
 146 
 147 }
 148 .center5{
 149 position: absolute;
 150 float: left;
 151 margin-left: 30px;
 152 width: 200px;
 153 height: 22px;
 154 padding:6px 0px;
 155 text-align: left;
 156 line-height: 28px;
 157 color:#9c9c9c;
 158 font-size:12px;
 159 }
 160 .center6{
 161 position: absolute;
 162     float: left;
 163     top:48px;
 164     left:12px;
 165 width: 640px;
 166 height: 20px;
 167 font-size:12px;
 168 margin-left:8px; 
 169 color: #666;
 170 line-height: 18px;
 171 margin-top: 8px;
 172 }
 173 .small1{
 174 position: relative;
 175 float: right;
 176 width: 80px;
 177 height: 20px;
 178 border: 0px solid black;
 179 left:20px;
 180 }
 181 .two::after{
 182 content: "";
 183 position: relative;
 184 top:8px;
 185 margin-left: 10px;
 186 width:0px;
 187 height:0px;
 188 border-top: 5px solid gray;
 189 border-right:5px solid transparent;
 190 border-left:5px solid transparent;
 191 border-bottom:5px solid transparent;
 192 }
 193 .left1{
 194 position: absolute;
 195 float: left;
 196 width: 190px;
 197 height: 555px;
 198 border: 0px solid black;
 199 top:185px;
 200 left:72px;
 201 
 202 background-color: #FF6537;
 203 }
 204 .left3{
 205 position: absolute;
 206 float: left;
 207 top:515px;
 208 width: 190px;
 209     height: 40px;
 210     background-image:url(https://img.alicdn.com/tps/TB1xqDXNVXXXXXqaFXXXXXXXXXX-380-80.jpg_190x190);
 211     border: 0px solid black;
 212 }
 213 .left2{
 214 width: 190px;
 215 height: 33px;
 216 font-size: 14px;
 217 line-height: 33px;
 218 color: #fff;
 219 text-indent:10px;
 220 }
 221 .word6{
 222 font-size: 13px;
 223 line-height: 30px;
 224 text-align: center;
 225 color: #FFF;
 226 font-weight: 700;
 227 }
 228 .left::after{
 229     content: "";
 230 position: relative;
 231 top:8px;
 232 float: right;
 233 right: 8px;
 234 width:0px;
 235 height:0px;
 236 border-top: 4px solid white;
 237 border-right:4px solid transparent;
 238 border-left:4px solid transparent;
 239 border-bottom:4px solid transparent;
 240 }
 241 .center7{
 242 position: absolute;
 243 float: left;
 244 top:188px;
 245 left: 275px;
 246 width: 850px;
 247 height: 34px;
 248 border: 0px solid black;
 249 display: block;
 250 }
 251 *{
 252 text-decoration:none;
 253 }
 254 .nav{
 255 list-style:none;
 256 *zoom:1;
 257 margin:0;
 258 padding:0;
 259 font-family:arial;
 260 }
 261 .nav:after{
 262 content:"";
 263 display:block;
 264 clear:both;
 265 }
 266 .list-item{
 267 float:left;
 268 margin:0 7px;
 269 font-weight:bold;
 270 }
 271 .list-item a{
 272 color:#f40;
 273 line-height:25px;
 274 height:25px;
 275 padding:0 5px;
 276 font-size: 16px;
 277 }
 278 .list-item a:hover{
 279 border-radius:12.5px;
 280 color:#fff;
 281 background-color:#f40;
 282 display:block;
 283 }
 284 .list-item1{
 285 float:left;
 286 margin:0 7px;
 287 font-weight:bold;
 288 }
 289 .list-item1 a{
 290 color:#3c3c3c;
 291 line-height:28px;
 292 height:25px;
 293 padding:0 5px;
 294 font-size: 14px;
 295 }
 296 .list-item1 a:hover{
 297 border-radius:12.5px;
 298 color:#fff;
 299 background-color:#f40;
 300 display:block;
 301 }
 302 
 303 
 304 .subface1{
 305 position: absolute;
 306 float: left;
 307 width: 100%;
 308 height: 100%;
 309 border: 0px solid block;
 310 top:220px;
 311     background-color: #f5f5f5;
 312     display: block;
 313 }
 314 .picture1{
 315 position:absolute;
 316 
 317 width: 520px;
 318 height: 280px;
 319 background-image:url(https://img.alicdn.com/tps/TB1aPbrOpXXXXXgXpXXXXXXXXXX-520-280.jpg_.webp);
 320     left:270px;
 321     top:10px;
 322     border: 0px solid black;
 323     background-repeat:no-repeat;
 324     background-position:100% 100%; 
 325 }
 326 .picture2{
 327 position: absolute;
 328 width: 160px;
 329 height: 280px;
 330 background-image:url(https://img.alicdn.com/imgextra/i2/919390580/TB2K.5be5GO.eBjSZFpXXb3tFXa_!!919390580.jpg);
 331     left:800px;
 332     top:10px;
 333 }
 334 .picture4{
 335 position: absolute;
 336 width: 251px;
 337 height: 190px;
 338 left:270px;
 339     top:330px;
 340     background-image:url(https://img.alicdn.com/tps/i4/TB1UzjpOpXXXXc1XXXXSutbFXXX.jpg_240x240q90.jpg);
 341 }
 342 .picture5{
 343 position: absolute;
 344 width: 251px;
 345 height: 190px;
 346 background-image:url(https://img.alicdn.com/tps/i4/TB1_7DIOpXXXXapXXXXSutbFXXX.jpg_240x240q90.jpg);
 347     left:531px;
 348     top:330px;
 349 }
 350 .picture6{
 351 position: absolute;
 352 width: 160px;
 353 height: 200px;
 354 top:320px;
 355 left: 800px;
 356 background-image:url(https://aecpm.alicdn.com/simba/img/TB1j4LLKpXXXXcbaXXXSutbFXXX.jpg);
 357 }
 358 .word11{
 359 position: absolute;
 360 font-size: 12px;
 361 top:290px;
 362 left: 800px;
 363     font-weight: 400;
 364     background: #f1f1f1;
 365     color: #a1a1a1;
 366     line-height: 24px;
 367     padding-top: 6px;
 368 
 369 
 370 }
 371 .center8{
 372 position: absolute;
 373 left:270px;
 374 top:290px;
 375 width: 492px;
 376 height: 26px;
 377 background-repeat:no-repeat;
 378 border: 0px solid black;
 379 background-image: url(https://img.alicdn.com/tps/TB10wLZLVXXXXcGXVXXXXXXXXXX-49-17.gif);
 380 }
 381 
 382 
 383 .word9{
 384 position: relative;
 385 font-size: 14px;
 386 line-height: 32px;
 387 left: 50px;
 388     bottom:-2px;
 389 }
 390 .word10{
 391 position: relative;
 392 font-size: 12px;
 393 line-height: 32px;
 394 left: 50px;
 395 bottom:-2px;
 396 color: #3c3c3c;
 397 }
 398 i{
 399 position: relative;
 400 float: right;
 401 line-height: 26px;
 402 top:10px;
 403 font-family: sans-serif;
 404     font-size: 12px;
 405     font-weight: 400;
 406     color: #c12c26;
 407     
 408 
 409 
 410 }
 411 .right1{
 412 position: relative;
 413 float: right;
 414     padding: 15px;
 415     width: 268px;
 416     height: 137px;
 417     border-bottom: 1px solid #EEE;
 418     background-repeat: no-repeat;
 419 }
 420 .right4{
 421 position: absolute;
 422 float: right;
 423 height: 78px;
 424     margin-top: 1px;
 425     padding-top: 7px;
 426     padding-bottom: 4px;
 427     width: 290px;
 428     border: 0px solid black;
 429     right:85px;
 430     top:200px;
 431     background-color: white;
 432 }
 433 
 434 
 435 .nav2{
 436 list-style:none;
 437 *zoom:1;
 438 margin:0;
 439 padding:0;
 440 font-family:arial;
 441 }
 442 .nav2:after{
 443 content:"";
 444 display:block;
 445 clear:both;
 446 }
 447 .list-item2{
 448 float:left;
 449 margin:0 10px;
 450 font-weight:bold;
 451 }
 452 .list-item2 a{
 453 color:#3c3c3c;
 454 line-height:25px;
 455 height:25px;
 456 padding:0 5px;
 457 font-size:12px;
 458 }
 459 .list-item2 a:hover{
 460 border-radius:12.5px;
 461 color:#f40;
 462 display:block;
 463 }
 464 .picture3{
 465 position: relative;
 466 top:20px;
 467 width: 80px;
 468 height: 80px;
 469 background-position:100% 100%; 
 470     background-repeat:no-repeat;
 471     border-radius:50%;
 472     background-image:url(https://wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=80&height=80&type=sns&_input_charset=UTF-8);
 473 }
 474 .word7{
 475 position: absolute;
 476 float: left;
 477 top:120px;
 478 left:30px;
 479     color:#3c3c3c;
 480 width: 268px;
 481 height: 18px;
 482 border: 0px solid black;
 483 font-size: 12px;
 484 }
 485 .word8{
 486 position: absolute;
 487 top:140px;
 488 right:45px;
 489 width: 268px;
 490 height: 20px;
 491 border: 0px solid black;
 492 font-size: 12px;
 493 }
 494 .three{
 495 color:#f40;
 496 }
 497 .right2{
 498 float: left;
 499 position: absolute;
 500 top:160px;
 501 right:90px;
 502 width: 268px;
 503 height: 25px;
 504 border: 0px solid white;
 505 
 506 }
 507 .right3{
 508 float: left;
 509     line-height: 25px;
 510 margin-right: 7px;
 511 width: 75px;
 512 height: 25px;
 513 border: 0px solid black;
 514 background:#f40;
 515 color: #FFF; 
 516 font-size: 14px;
 517 font-weight: 700;
 518 text-align: center;
 519 border-radius: 1px;
 520 }
 521 .bottom{
 522 position: absolute;
 523 float: left;
 524 width: 899px;
 525 height: 86px;
 526 border: 0px solid black;
 527 top:748px;
 528 left: 65px;
 529 }
 530 .bottom1{
 531 position: relative;
 532 color:#3c3c3c;
 533 background-color: #fff;
 534 margin-top: 6px;
 535     display: block;
 536     font-size: 16px;
 537     float: left;
 538     width: 179px;
 539     height: 74px;
 540 }
 541 
 542 
 543 .bottom2 {
 544 position: relative;
 545 float: left;
 546 width: 60px;
 547 height: 60px;
 548 border: 0px solid black;
 549 margin-top: 8px;
 550     margin-right: 8px;
 551     margin-left: 10px;
 552 background-repeat:no-repeat;
 553    background-position:100% 100%; 
 554 background-image:url(https://gw.alicdn.com/tfscom/TB1vF1nHpXXXXaAXpXXXXXXXXXX_!!0-item_pic.jpg_60x60q90_.webp);
 555 }
 556 .word12{
 557 font-size: 12px;
 558 line-height: 22px;
 559 color: #999;
 560 }
 561 .word13{
 562 position: relative;
 563 top:6px;
 564 font-size: 14px;
 565 line-height: 16px;
 566 color: #999;
 567 }
 568 .word14{
 569 position: relative;
 570 top:6px;
 571 color:#81c18f; 
 572 
 573 
 574 }
 575 .bottom3{
 576 position: relative;
 577 color:#9a745f;
 578 background-color: #fff;
 579 margin-top: 6px;
 580     display: block;
 581     font-size: 16px;
 582     float: left;
 583     width: 179px;
 584     height: 74px;
 585 
 586 
 587 }
 588 .bottom4{
 589 position: relative;
 590 float: left;
 591 width: 60px;
 592 height: 60px;
 593 margin-top: 8px;
 594     margin-right: 8px;
 595     margin-left: 10px;
 596     background-image:url(https://gw.alicdn.com/tfscom/TB24h84mXXXXXc4XXXXXXXXXXXX_!!0-juitemmedia.jpg_60x60q90_.webp);
 597 }
 598 
 599 
 600 .word16{
 601 font-size: 12px;
 602 line-height: 22px;
 603 color: #9a745f;
 604 }
 605 
 606 
 607 .word15{
 608 position: relative;
 609 top:6px;
 610 color:#9a745f; 
 611 }
 612 
 613 
 614 .bottom6{
 615 position: relative;
 616 float: left;
 617 width: 60px;
 618 height: 60px;
 619 margin-top: 8px;
 620     margin-right: 8px;
 621     margin-left: 10px;
 622    background-image: url(https://gw.alicdn.com/tfscom/TB1GuvmLXXXXXa.XFXXSutbFXXX.jpg_60x60q90_.webp);
 623 }
 624 .word19{
 625 font-size: 12px;
 626 line-height: 22px;
 627 color: #72a5f6;
 628 }
 629 
 630 
 631 .word18{
 632 position: relative;
 633 top:6px;
 634 color:#72a5f6; 
 635 }
 636 .bottom8{
 637 position: relative;
 638 float: left;
 639 width: 60px;
 640 height: 60px;
 641 margin-top: 8px;
 642     margin-right: 8px;
 643     margin-left: 10px;
 644    background-image:url(https://gw.alicdn.com/tfscom/TB1vhKXKpXXXXcPXFXXSutbFXXX.jpg_60x60q90_.webp);
 645 }
 646 .word21{
 647 font-size: 12px;
 648 line-height: 22px;
 649 color: #846fc7;
 650 }
 651 
 652 
 653 .word20{
 654 position: relative;
 655 top:6px;
 656 color:#846fc7; 
 657 }
 658 .bottom5{
 659 position: relative;
 660 float: left;
 661 width: 60px;
 662 height: 60px;
 663 margin-top: 8px;
 664     margin-right: 8px;
 665     margin-left: 10px;
 666    background-image:url(https://gw.alicdn.com/tfscom/TB1Kq3CJXXXXXXsXVXXSutbFXXX.jpg_60x60q90_.webp);
 667 }
 668 .word23{
 669 font-size: 12px;
 670 line-height: 22px;
 671 color: #de525e;
 672 }
 673 
 674 
 675 .word22{
 676 position: relative;
 677 top:6px;
 678 color:#de525e; 
 679 }
 680 
 681 
 682 .right5{
 683 position: absolute;
 684 float: right;
 685 right: 85px;
 686 top:514px;
 687 width: 290px;
 688 height: 201px;
 689 min-height: 0;
 690     border: 0px solid black;
 691     
 692 }
 693 .right9{
 694 position: relative;
 695 border-top: 0px solid #EAEAEA;
 696     height: 200px;
 697     width: 290px;
 698 }
 699 
 700 
 701 
 702 
 703 .right10 {
 704 position: relative;
 705 float: left;
 706 width: 70px;
 707 height: 69px;
 708 margin-top: 1px;
 709 margin-right: 2px;
 710 border: 0px solid black;
 711 display: block;
 712 text-align: center;
 713 background-color: #fff;
 714 
 715 }
 716 .icon11{
 717 position: relative;
 718 left:23px;
 719 display: inline-block;
 720     width: 24px;
 721     height: 24px;
 722     margin-top: 11px;
 723     background-repeat: no-repeat;
 724     background-size:220px 897px;
 725 background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
 726 }
 727 
 728 
 729 .word25{
 730 position: relative;
 731 top:20px;
 732 right:15px;
 733 color: #666;
 734 font-size:12px;
 735 }
 736 .word25:hover{
 737 color:#f40;
 738 font-size: 12px;
 739 }    
 740 .icon12{
 741 position: relative;
 742 left:18px;
 743 display: inline-block;
 744     width: 24px;
 745     height: 24px;
 746     margin-top: 11px;
 747     background-repeat: no-repeat;
 748     background-size:220px 897px;
 749     background-position: 0 -44px;
 750 background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
 751 }
 752 .icon13{
 753 position: relative;
 754 left:18px;
 755 display: inline-block;
 756     width: 24px;
 757     height: 24px;
 758     margin-top: 11px;
 759     background-repeat: no-repeat;
 760     background-size:220px 897px;
 761     background-position: 0 -85px;
 762 background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
 763 }
 764 .icon14{
 765 position: relative;
 766 left:18px;
 767 display: inline-block;
 768     width: 24px;
 769     height: 24px;
 770     margin-top: 11px;
 771     background-repeat: no-repeat;
 772     background-size:220px 897px;
 773     background-position: 0 -132px;
 774 background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
 775 }
 776 .icon15{
 777 position: relative;
 778 left:18px;
 779 display: inline-block;
 780     width: 24px;
 781     height: 24px;
 782     margin-top: 11px;
 783     background-repeat: no-repeat;
 784     background-size:220px 897px;
 785     background-position: 0 -176px;
 786 background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
 787 }
 788 .icon16{
 789 position: relative;
 790 left:18px;
 791 display: inline-block;
 792     width: 24px;
 793     height: 24px;
 794     margin-top: 11px;
 795     background-repeat: no-repeat;
 796     background-size:220px 897px;
 797     background-position: 0 -220px;
 798 background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
 799 }
 800 .icon17{
 801 position: relative;
 802 display: inline-block;
 803 left: 22px;
 804     width: 24px;
 805     height: 24px;
 806     margin-top: 11px; 
 807     background-image: url(https://img.alicdn.com/tps/TB1p8WnOXXXXXaZXFXXXXXXXXXX-48-48.png_24x24.jpg);
 808 
 809 }
 810 .icon18{
 811 position: relative;
 812 left:18px;
 813 display: inline-block;
 814     width: 24px;
 815     height: 24px;
 816     margin-top: 11px;
 817     background-repeat: no-repeat;
 818     background-size:220px 897px;
 819     background-position: 0 -308px;
 820 background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
 821 }
 822 .right11 {
 823 position: relative;
 824 float: left;
 825 width: 70px;
 826 height: 57px;
 827 margin-top: 1px;
 828 border: 0px solid black;
 829 display: block;
 830 text-align: center;
 831 margin-right: 2px;
 832 background-color: #fff;
 833 
 834 }
 835 .word26{
 836 position: relative;
 837 top:15px;
 838 right:15px;
 839 color: #666;
 840 font-size:12px;
 841 }
 842 .icon19{
 843 position: relative;
 844 left:23px;
 845 display: inline-block;
 846     width: 24px;
 847     height: 24px;
 848     margin-top: 11px;
 849     background-repeat: no-repeat;
 850     background-size:220px 897px;
 851     background-position: 0 -352px;
 852 background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
 853 }
 854 .icon20{
 855 position: relative;
 856 left:16px;
 857 display: inline-block;
 858     width: 24px;
 859     height: 24px;
 860     margin-top: 11px;
 861     background-repeat: no-repeat;
 862     background-size:220px 897px;
 863     background-position: 0 -396px;
 864 background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
 865 }
 866 .icon21{
 867 position: relative;
 868 left:22px;
 869 display: inline-block;
 870     width: 24px;
 871     height: 24px;
 872     margin-top: 11px;
 873     background-repeat: no-repeat;
 874     background-size:220px 897px;
 875     background-position: 0 -440px;
 876 background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
 877 }
 878 .icon22{
 879 position: relative;
 880 left:22px;
 881 display: inline-block;
 882     width: 24px;
 883     height: 24px;
 884     margin-top: 11px;
 885     background-repeat: no-repeat;
 886     background-size:220px 897px;
 887     background-position: 0 -484px;
 888 background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
 889 }
 890 
 891 
 892 .right6{
 893 position: relative;
 894 float: right;
 895 width: 290px;
 896 height: 116px;
 897     border: 0px solid black;
 898     top:715px;
 899     right: 85px;
 900     background-color: #fff;
 901 }
 902 .right7{
 903 position: relative;
 904 display: block;
 905 color: #3c3c3c;
 906 padding: 6px 0 0 13px;
 907     height: 110px; 
 908 }
 909 .word24{
 910 
 911     font-size: 14px;
 912     height: 20px;
 913     z-index: 2;
 914 }
 915 .more{
 916 position: absolute;
 917     right: 10px;
 918     font-size: 12px;
 919     font-weight: 400;
 920     color: #3c3c3c;
 921 }
 922 .more::after{
 923 content: "";
 924 position: relative;
 925 top:8px;
 926 margin-left: 10px;
 927 width:0px;
 928 height:0px;
 929 border-top: 5px solid gray;
 930 border-right:5px solid transparent;
 931 border-left:5px solid transparent;
 932 border-bottom:5px solid transparent;
 933 }
 934 
 935 
 936 .right8{
 937 padding-top: 6px;
 938     position: relative;
 939     height: 84px;
 940     top:8px;
 941     list-style: none;
 942     border: 0px solid black;
 943     margin: 0;
 944     padding: 0;
 945 }
 946 .icon1 a{
 947 position: relative;
 948 float: left;
 949 width: 32px;
 950     height: 32px;
 951     margin-bottom: 8px;
 952     margin-right: 20px;
 953     border-top-width:1px;
 954     background-repeat:no-repeat;
 955     background-position:100% 100%; 
 956     background-size: cover;
 957     background-image:url(https://img.alicdn.com/tps/i2/TB1hRb1IXXXXXX3XVXXXQaP.pXX-87-87.jpeg_60x60.jpg_.webp);
 958 }
 959 .icon2 a{
 960 position: relative;
 961 float: left;
 962 width: 32px;
 963     height: 32px;
 964     margin-bottom: 8px;
 965     margin-right: 20px;
 966     border-top-width:1px;
 967     background-repeat:no-repeat;
 968     background-position:100% 100%; 
 969     background-size: cover;
 970     background-image:url(https://img.alicdn.com/tps/i3/TB1DGkJJFXXXXaZXFXX07tlTXXX-200-200.png_60x60.jpg_.webp);
 971 }
 972 .icon3 a{
 973 position: relative;
 974 float: left;
 975 width: 32px;
 976     height: 32px;
 977     margin-bottom: 8px;
 978     margin-right: 20px;
 979     border-top-width:1px;
 980     background-repeat:no-repeat;
 981     background-position:100% 100%; 
 982     background-size: cover;
 983      background-image:url(https://img.alicdn.com/tps/i4/TB1CKSgIpXXXXccXXXX07tlTXXX-200-200.png_60x60.jpg_.webp);
 984  }
 985 .icon4 a{
 986 position: relative;
 987 float: left;
 988 width: 32px;
 989     height: 32px;
 990     margin-bottom: 8px;
 991     margin-right: 20px;
 992     border-top-width:1px;
 993     background-repeat:no-repeat;
 994     background-position:100% 100%; 
 995     background-size: cover;
 996     background-image:url(https://img.alicdn.com/tps/i4/TB1zkDeIFXXXXXrXVXX07tlTXXX-200-200.png_60x60.jpg_.webp);
 997 }
 998 .icon5 a{
 999 position: relative;
1000 float: left;
1001 width: 32px;
1002     height: 32px;
1003     margin-bottom: 8px;
1004     margin-right: 20px;
1005     border-top-width:1px;
1006     background-repeat:no-repeat;
1007     background-position:100% 100%; 
1008     background-size: cover;
1009     background-image:url(https://img.alicdn.com/tps/i2/TB1kUwwIXXXXXXqXpXXUAkPJpXX-87-87.png_60x60.jpg_.webp);
1010 }
1011 .icon6 a{
1012 position: relative;
1013 float: left;
1014 width: 32px;
1015     height: 32px;
1016     margin-bottom: 8px;
1017     margin-right: 20px;
1018     border-top-width:1px;
1019     background-repeat:no-repeat;
1020     background-position:100% 100%; 
1021     background-size: cover;
1022     background-image:url(https://img.alicdn.com/tps/i3/TB17cD8IXXXXXczXFXXUAkPJpXX-87-87.png_60x60.jpg_.webp);
1023 }
1024 .icon7 a{
1025 position: relative;
1026 float: left;
1027 width: 32px;
1028     height: 32px;
1029     margin-bottom: 8px;
1030     margin-right: 20px;
1031     border-top-width:1px;
1032     background-repeat:no-repeat;
1033     background-position:100% 100%; 
1034     background-size: cover;
1035     background-image:url(https://gw.alicdn.com/tps/TB1.s09LpXXXXXuXXXXXXXXXXXX-70-70.png_60x60.jpg_.webp);
1036 }
1037 .icon8 a{
1038 position: relative;
1039 float: left;
1040 width: 32px;
1041     height: 32px;
1042     margin-bottom: 8px;
1043     margin-right: 20px;
1044     border-top-width:1px;
1045     background-repeat:no-repeat;
1046     background-position:100% 100%; 
1047     background-size: cover;
1048     background-image:url(https://img.alicdn.com/tps/TB1SpFALpXXXXXrapXXXXXXXXXX-70-70.png_60x60.jpg_.webp);
1049 }
1050 .icon9 a{
1051 position: relative;
1052 float: left;
1053 width: 32px;
1054     height: 32px;
1055     margin-bottom: 8px;
1056     margin-right: 20px;
1057     border-top-width:1px;
1058     background-repeat:no-repeat;
1059     background-position:100% 100%; 
1060     background-size: cover;
1061     background-image:url(https://gw.alicdn.com/tps/TB10.cgNVXXXXbrXVXXXXXXXXXX-70-70.jpg_60x60.jpg_.webp);
1062 }
1063 .icon10 a{
1064 position: relative;
1065 float: left;
1066 width: 32px;
1067     height: 32px;
1068     margin-bottom: 8px;
1069     margin-right: 20px;
1070     border-top-width:1px;
1071     background-repeat:no-repeat;
1072     background-position:100% 100%; 
1073     background-size: cover;
1074     background-image:url(https://gw.alicdn.com/tps/TB1H4NYLpXXXXb5XpXXXXXXXXXX-70-70.png_60x60.jpg_.webp);
1075 }

Css

posted @ 2018-03-31 14:40 南城思念，北城等待阅读(4986) 评论(0) 编辑收藏举报

刷新页面返回顶部