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

转载于:https://www.cnblogs.com/sun1994/p/8258040.html

Html+css仿淘宝页面练习相关推荐

纯css仿淘宝京东导航菜单栏
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
微信小程序三级分类（高仿淘宝页面分类）
** 三级分类(高仿淘宝页面分类) ** 初步的二级页面参考的这个文章的代码:https://blog.csdn.net/luowei85520/article/details/90510311 这个 ...
HTML+CSS 仿淘宝静态首页
学完HTML和CSS需要有一个好的练习,仿淘宝等首页都是一个不错的练习方法,目前处于学习原生js阶段,学html+css时没有做一个像样的项目,现在边学js边将前面的基础部分打牢. 里面很多地方可以用 ...
MySQL仿淘宝页面评论评分统计SQL
假设淘宝有一张商品评论表,存储在MySQL中.表设计如下: ID为productlist_comment主键, UserID为用户的ID, ProductID为商品ID Content为评论的内容, ...
Android仿淘宝页面布局
说明该项目就是简单地仿造淘宝的一些页面,没有功能!! icon是在网上找的尽量一样的,颜色是自己用PS吸出来的,尺寸是用PS量出来的. 运行环境小米6 (分辨率1920*1080,尺寸5.15) ...
仿淘宝左侧菜单导航栏纯Html + css 写的
这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊,一时兴起,查了点资料抓了几个图片仿淘宝写了个css,时间紧写的不太好,大神勿喷,给小白做个参考废话不多说先来个效果图接下来直接上代 ...
仿淘宝网首页导航条效果
< html > < head > < meta http - equiv = " Content-Type " content = " ...
仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
仿淘宝电商官网静态页面作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它这是我刚"入坑"的时候写的Demo,因为当 ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript...
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
学生dreamweaver网页设计作业成品：电商网页设计——仿淘宝静态首页(HTML+CSS)
学生dreamweaver网页设计作业成品:电商网页设计--仿淘宝静态首页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...

Html+css仿淘宝页面练习

Html+css仿淘宝页面练习相关推荐

最新文章

热门文章