完成小兔鲜儿商城界面
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <!-- 提升网络搜素知名度 --> 8 <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。"> 9 <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物"> 10 <title>小兔鲜儿-新鲜、惠民、快捷！</title> 11 <link rel="stylesheet" href="./iconfont/iconfont.css"> 12 <link rel="stylesheet" href="./css/base.css"> 13 <link rel="stylesheet" href="./css/common.css"> 14 <link rel="stylesheet" href="./css/index.css"> 15 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 16 </head> 17 18 <body> 19 <!-- 快捷导航 --> 20 <div class="shortcut"> 21 <div class="wrapper"> 22 <ul> 23 <li><a href="#" class="login">请先登录</a></li> 24 <li><a href="#">免费注册</a></li> 25 <li><a href="#">我的订单</a></li> 26 <li><a href="#">会员中心</a></li> 27 <li><a href="#">帮助中心</a></li> 28 <li><a href="#">在线客服</a></li> 29 <li><a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li> 30 </ul> 31 </div> 32 </div> 33 <!-- 头部区域 --> 34 <div class="header wrapper"> 35 <div class="logo"> 36 <!-- <img src="./images/logo.png" alt=""> --> 37 <h1><a href="#">小兔鲜儿</a></h1> 38 </div> 39 <div class="nav"> 40 <ul> 41 <li><a href="#">首页</a></li> 42 <li><a href="#">生鲜</a></li> 43 <li><a href="#">美食</a></li> 44 <li><a href="#">餐厨</a></li> 45 <li><a href="#">电器</a></li> 46 <li><a href="#">居家</a></li> 47 <li><a href="#">洗护</a></li> 48 <li><a href="#">孕婴</a></li> 49 <li><a href="#">服装</a></li> 50 </ul> 51 </div> 52 <div class="search"> 53 <span class="iconfont icon-search"></span> 54 <input type="text" placeholder="搜一搜"> 55 </div> 56 <div class="cart"> 57 <span class="iconfont icon-cart-full"></span> 58 <i>2</i> 59 </div> 60 </div> 61 62 <!-- banner --> 63 <div class="banner"> 64 <div class="wrapper"> 65 <ul class="pic"> 66 <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li> 67 <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li> 68 <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li> 69 </ul> 70 <div class="subnav"> 71 <ul> 72 <li> 73 <div> 74 <a href="#" class="classify">生鲜</a> 75 <a href="#">水果</a> 76 <a href="#">蔬菜</a> 77 </div> 78 <span class="iconfont icon-arrow-right-bold"></span> 79 </li> 80 <li> 81 <div> 82 <a href="#" class="classify">生鲜</a> 83 <a href="#">水果</a> 84 <a href="#">蔬菜</a> 85 </div> 86 <span class="iconfont icon-arrow-right-bold"></span> 87 </li> 88 <li> 89 <div> 90 <a href="#" class="classify">生鲜</a> 91 <a href="#">水果</a> 92 <a href="#">蔬菜</a> 93 </div> 94 <span class="iconfont icon-arrow-right-bold"></span> 95 </li> 96 <li> 97 <div> 98 <a href="#" class="classify">生鲜</a> 99 <a href="#">水果</a> 100 <a href="#">蔬菜</a> 101 </div> 102 <span class="iconfont icon-arrow-right-bold"></span> 103 </li> 104 <li> 105 <div> 106 <a href="#" class="classify">生鲜</a> 107 <a href="#">水果</a> 108 <a href="#">蔬菜</a> 109 </div> 110 <span class="iconfont icon-arrow-right-bold"></span> 111 </li> 112 <li> 113 <div> 114 <a href="#" class="classify">生鲜</a> 115 <a href="#">水果</a> 116 <a href="#">蔬菜</a> 117 </div> 118 <span class="iconfont icon-arrow-right-bold"></span> 119 </li> 120 <li> 121 <div> 122 <a href="#" class="classify">生鲜</a> 123 <a href="#">水果</a> 124 <a href="#">蔬菜</a> 125 </div> 126 <span class="iconfont icon-arrow-right-bold"></span> 127 </li> 128 <li> 129 <div> 130 <a href="#" class="classify">生鲜</a> 131 <a href="#">水果</a> 132 <a href="#">蔬菜</a> 133 </div> 134 <span class="iconfont icon-arrow-right-bold"></span> 135 </li> 136 <li> 137 <div> 138 <a href="#" class="classify">生鲜</a> 139 <a href="#">水果</a> 140 <a href="#">蔬菜</a> 141 </div> 142 <span class="iconfont icon-arrow-right-bold"></span> 143 </li> 144 <li> 145 <div> 146 <a href="#" class="classify">生鲜</a> 147 <a href="#">水果</a> 148 <a href="#">蔬菜</a> 149 </div> 150 <span class="iconfont icon-arrow-right-bold"></span> 151 </li> 152 </ul> 153 </div> 154 <ol> 155 <li class="current"><i></i></li> 156 <li><i></i></li> 157 <li><i></i></li> 158 </ol> 159 </div> 160 </div> 161 162 <!-- 新鲜好物 --> 163 <div class="goods wrapper"> 164 <div class="title"> 165 <div class="left"> 166 <h3>新鲜好物</h3> 167 <p>新鲜出炉 品质靠谱</p> 168 </div> 169 <div class="right"> 170 <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a> 171 </div> 172 </div> 173 174 <div class="bd"> 175 <ul> 176 <li> 177 <a href="#"> 178 <div class="pic"><img src="./uploads/goods1.png" alt=""></div> 179 <div class="txt"> 180 <h4>KN95口罩</h4> 181 <p>¥<span>79</span></p> 182 </div> 183 </a> 184 </li> 185 <li> 186 <a href="#"> 187 <div class="pic"><img src="./uploads/goods1.png" alt=""></div> 188 <div class="txt"> 189 <h4>KN95口罩</h4> 190 <p>¥<span>79</span></p> 191 </div> 192 </a> 193 </li> 194 <li> 195 <a href="#"> 196 <div class="pic"><img src="./uploads/goods1.png" alt=""></div> 197 <div class="txt"> 198 <h4>KN95口罩</h4> 199 <p>¥<span>79</span></p> 200 </div> 201 </a> 202 </li> 203 <li> 204 <a href="#"> 205 <div class="pic"><img src="./uploads/goods1.png" alt=""></div> 206 <div class="txt"> 207 <h4>KN95口罩</h4> 208 <p>¥<span>79</span></p> 209 </div> 210 </a> 211 </li> 212 </ul> 213 </div> 214 </div> 215 216 <!-- 人气推荐 --> 217 <div class="recommend wrapper"> 218 <div class="title"> 219 <div class="left"> 220 <h3>人气推荐</h3> 221 <p>新鲜出炉 品质靠谱</p> 222 </div> 223 </div> 224 225 <div class="bd"> 226 <ul> 227 <li> 228 <a href="#"> 229 <div class="pic"><img src="./uploads/goods1.png" alt=""></div> 230 <div class="txt"> 231 <h4>KN95口罩</h4> 232 <p>¥<span>79</span></p> 233 </div> 234 </a> 235 </li> 236 <li> 237 <a href="#"> 238 <div class="pic"><img src="./uploads/goods1.png" alt=""></div> 239 <div class="txt"> 240 <h4>KN95口罩</h4> 241 <p>¥<span>79</span></p> 242 </div> 243 </a> 244 </li> 245 <li> 246 <a href="#"> 247 <div class="pic"><img src="./uploads/goods1.png" alt=""></div> 248 <div class="txt"> 249 <h4>KN95口罩</h4> 250 <p>¥<span>79</span></p> 251 </div> 252 </a> 253 </li> 254 <li> 255 <a href="#"> 256 <div class="pic"><img src="./uploads/goods1.png" alt=""></div> 257 <div class="txt"> 258 <h4>KN95口罩</h4> 259 <p>¥<span>79</span></p> 260 </div> 261 </a> 262 </li> 263 </ul> 264 </div> 265 </div> 266 267 <!-- 热门品牌 --> 268 <div class="brand"> 269 <div class="wrapper"> 270 <div class="title"> 271 <div class="left"> 272 <h3>热门品牌</h3> 273 <p>新鲜出炉 品质靠谱</p> 274 </div> 275 <div class="button"> 276 <a href="#" class="prev"> 277 <i class="iconfont icon-arrow-left-bold"></i> 278 </a> 279 <a href="#" class="next"> 280 <i class="iconfont icon-arrow-right-bold"></i> 281 </a> 282 </div> 283 </div> 284 <div class="bd"> 285 <ul> 286 <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li> 287 <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li> 288 <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li> 289 <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li> 290 <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li> 291 </ul> 292 </div> 293 </div> 294 </div> 295 296 <!-- 生鲜 --> 297 <div class="fresh wrapper"> 298 <div class="title"> 299 <div class="left"> 300 <h3>生鲜</h3> 301 </div> 302 <div class="right"> 303 <ul> 304 <li><a href="#" class="active">热门</a></li> 305 <li><a href="#">热门</a></li> 306 <li><a href="#">热门</a></li> 307 <li><a href="#">热门</a></li> 308 <li><a href="#">热门</a></li> 309 <li><a href="#">热门</a></li> 310 <li><a href="#">热门</a></li> 311 </ul> 312 <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a> 313 </div> 314 </div> 315 316 <div class="content"> 317 <div class="left"> 318 <a href="#"><img src="./uploads/fresh_left.png" alt=""></a> 319 </div> 320 <div class="right"> 321 <ul> 322 <li> 323 <a href="#"> 324 <div class="pic"><img src="./uploads/fresh1.png" alt=""></div> 325 <div class="txt"> 326 <div class="info"> 327 <h4>双味千层，手抓饼烤肉组合</h4> 328 <p>240g/袋 4片装</p> 329 <p>加热即食</p> 330 </div> 331 <p class="price">¥<span>89.99</span></p> 332 </div> 333 </a> 334 <div class="cover"> 335 <p>找相似</p> 336 <p></p> 337 <p>找更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p> 338 </div> 339 </li> 340 <li> 341 <a href="#"> 342 <div class="pic"><img src="./uploads/fresh1.png" alt=""></div> 343 <div class="txt"> 344 <div class="info"> 345 <h4>双味千层，手抓饼烤肉组合</h4> 346 <p>240g/袋 4片装</p> 347 <p>加热即食</p> 348 </div> 349 <p class="price">¥<span>89.99</span></p> 350 </div> 351 </a> 352 </li> 353 <li> 354 <a href="#"> 355 <div class="pic"><img src="./uploads/fresh1.png" alt=""></div> 356 <div class="txt"> 357 <div class="info"> 358 <h4>双味千层，手抓饼烤肉组合</h4> 359 <p>240g/袋 4片装</p> 360 <p>加热即食</p> 361 </div> 362 <p class="price">¥<span>89.99</span></p> 363 </div> 364 </a> 365 </li> 366 <li> 367 <a href="#"> 368 <div class="pic"><img src="./uploads/fresh1.png" alt=""></div> 369 <div class="txt"> 370 <div class="info"> 371 <h4>双味千层，手抓饼烤肉组合</h4> 372 <p>240g/袋 4片装</p> 373 <p>加热即食</p> 374 </div> 375 <p class="price">¥<span>89.99</span></p> 376 </div> 377 </a> 378 </li> 379 <li> 380 <a href="#"> 381 <div class="pic"><img src="./uploads/fresh1.png" alt=""></div> 382 <div class="txt"> 383 <div class="info"> 384 <h4>双味千层，手抓饼烤肉组合</h4> 385 <p>240g/袋 4片装</p> 386 <p>加热即食</p> 387 </div> 388 <p class="price">¥<span>89.99</span></p> 389 </div> 390 </a> 391 </li> 392 <li> 393 <a href="#"> 394 <div class="pic"><img src="./uploads/fresh1.png" alt=""></div> 395 <div class="txt"> 396 <div class="info"> 397 <h4>双味千层，手抓饼烤肉组合</h4> 398 <p>240g/袋 4片装</p> 399 <p>加热即食</p> 400 </div> 401 <p class="price">¥<span>89.99</span></p> 402 </div> 403 </a> 404 </li> 405 <li> 406 <a href="#"> 407 <div class="pic"><img src="./uploads/fresh1.png" alt=""></div> 408 <div class="txt"> 409 <div class="info"> 410 <h4>双味千层，手抓饼烤肉组合</h4> 411 <p>240g/袋 4片装</p> 412 <p>加热即食</p> 413 </div> 414 <p class="price">¥<span>89.99</span></p> 415 </div> 416 </a> 417 </li> 418 <li> 419 <a href="#"> 420 <div class="pic"><img src="./uploads/fresh1.png" alt=""></div> 421 <div class="txt"> 422 <div class="info"> 423 <h4>双味千层，手抓饼烤肉组合</h4> 424 <p>240g/袋 4片装</p> 425 <p>加热即食</p> 426 </div> 427 <p class="price">¥<span>89.99</span></p> 428 </div> 429 </a> 430 </li> 431 </ul> 432 </div> 433 </div> 434 </div> 435 436 <!-- 最新专题 --> 437 <div class="topic wrapper"> 438 <div class="title"> 439 <div class="left"> 440 <h3>最新专题</h3> 441 </div> 442 <div class="right"> 443 <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a> 444 </div> 445 </div> 446 <div class="topic-bd"> 447 <ul> 448 <li> 449 <a href="#"> 450 <div class="pic"> 451 <img src="./uploads/topic1.png" alt=""> 452 <div class="cover"> 453 <div class="left"> 454 <h4>吃这些美食才算不辜负自己</h4> 455 <p>餐厨起居洗护好物</p> 456 </div> 457 <div class="right"> 458 ¥<span>29.9</span><span>起</span> 459 </div> 460 </div> 461 </div> 462 <div class="txt"> 463 <div class="left"> 464 <p> 465 <i class="iconfont icon-favorites-fill"></i> 466 <span>1220</span> 467 </p> 468 <p> 469 <i class="iconfont icon-favorites-fill"></i> 470 <span>1220</span> 471 </p> 472 </div> 473 <div class="right"> 474 <p> 475 <i class="iconfont icon-favorites-fill"></i> 476 <span>1220</span> 477 </p> 478 </div> 479 </div> 480 </a> 481 </li> 482 <li> 483 <a href="#"> 484 <div class="pic"> 485 <img src="./uploads/topic1.png" alt=""> 486 </div> 487 <div class="txt"> 488 <div class="left"> 489 <p> 490 <i class="iconfont icon-favorites-fill"></i> 491 <span>1220</span> 492 </p> 493 <p> 494 <i class="iconfont icon-favorites-fill"></i> 495 <span>1220</span> 496 </p> 497 </div> 498 <div class="right"> 499 <p> 500 <i class="iconfont icon-favorites-fill"></i> 501 <span>1220</span> 502 </p> 503 </div> 504 </div> 505 </a> 506 </li> 507 <li> 508 <a href="#"> 509 <div class="pic"> 510 <img src="./uploads/topic1.png" alt=""> 511 </div> 512 <div class="txt"> 513 <div class="left"> 514 <p> 515 <i class="iconfont icon-favorites-fill"></i> 516 <span>1220</span> 517 </p> 518 <p> 519 <i class="iconfont icon-favorites-fill"></i> 520 <span>1220</span> 521 </p> 522 </div> 523 <div class="right"> 524 <p> 525 <i class="iconfont icon-favorites-fill"></i> 526 <span>1220</span> 527 </p> 528 </div> 529 </div> 530 </a> 531 </li> 532 </ul> 533 </div> 534 </div> 535 536 <!-- 底部区域 --> 537 <div class="footer"> 538 <div class="wrapper"> 539 <div class="service"> 540 <ul> 541 <li> 542 <h5>h5</h5> 543 <p>价格亲民</p> 544 </li> 545 <li> 546 <h5>h5</h5> 547 <p>物流快捷</p> 548 </li> 549 <li> 550 <h5>h5</h5> 551 <p>品质新鲜</p> 552 </li> 553 <li> 554 <h5>h5</h5> 555 <p>售后无忧</p> 556 </li> 557 </ul> 558 </div> 559 <div class="help"> 560 <div class="left"> 561 <dl> 562 <dt>购物指南</dt> 563 <dd><a href="#">购物流程</a></dd> 564 <dd><a href="#">支付方式</a></dd> 565 <dd><a href="#">售后规则</a></dd> 566 </dl> 567 <dl> 568 <dt>配送方式</dt> 569 <dd><a href="#">配送运费</a></dd> 570 <dd><a href="#">配送范围</a></dd> 571 <dd><a href="#">配送时间</a></dd> 572 </dl> 573 <dl> 574 <dt>关于我们</dt> 575 <dd><a href="#">平台规则</a></dd> 576 <dd><a href="#">联系我们</a></dd> 577 <dd><a href="#">问题反馈</a></dd> 578 </dl> 579 <dl> 580 <dt>售后服务</dt> 581 <dd><a href="#">售后政策</a></dd> 582 <dd><a href="#">退款说明</a></dd> 583 <dd><a href="#">取消订单</a></dd> 584 </dl> 585 <dl> 586 <dt>服务热线</dt> 587 <dd><a href="#">在线客服<span class="iconfont icon-customer-service"></span></a></dd> 588 <dd><a href="#">客服电话 400-0000-000</a></dd> 589 <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd> 590 </dl> 591 </div> 592 <div class="right"> 593 <ul> 594 <li> 595 <div class="pic"><img src="./images/wechat.png" alt=""></div> 596 <p>微信公众号</p> 597 </li> 598 <li> 599 <div class="pic"><img src="./images/wechat.png" alt=""></div> 600 <p>微信公众号</p> 601 </li> 602 </ul> 603 </div> 604 </div> 605 <div class="copyright"> 606 <p> 607 <a href="#">关于我们</a>| 608 <a href="#">关于我们</a>| 609 <a href="#">关于我们</a>| 610 <a href="#">关于我们</a>| 611 <a href="#">关于我们</a>| 612 <a href="#">关于我们</a>| 613 <a href="#">关于我们</a> 614 </p> 615 <p>CopyRight © 小兔鲜</p> 616 </div> 617 </div> 618 </div> 619 </body> 620 621 </html>
1 /* 头尾，各个页面相同的样式 */
2 /* 版心 */
3 .wrapper {
4 margin: 0 auto;
5 width: 1240px;
6 /* background-color: pink; */
7 }
8
9 /* 快捷导航 */
10 .shortcut{
11 height: 52px;
12 background-color: #333;
13 }
14
15 .shortcut .wrapper{
16 display: flex;
17 justify-content: flex-end;
18 height: 52px;
19 /* background-color: #fff; */
20 }
21
22 .shortcut ul{
23 display: flex;
24 line-height: 52px;
25 }
26
27 .shortcut a{
28 padding: 0 15px;
29 border-right: 1px solid #999;
30 font-size: 14px;
31 color: #fff;
32 }
33
34 .shortcut li:last-child a{
35 border-right: 0;
36 }
37
38 .shortcut li .iconfont {
39 margin-right: 4px;
40 vertical-align: middle;
41 }
42
43 .shortcut .login{
44 color: green;
45 }
46
47 /* 头部区域 */
48 .header{
49 display: flex;
50 margin-top: 22px;
51 margin-bottom: 22px;
52 height: 88px;
53 /* background-color: pink; */
54 }
55
56 /* logo */
57 .logo {
58 width: 200px;
59 height: 88px;
60 /* background-color: skyblue; */
61 margin-right: 40px;
62 }
63
64 .logo a{
65 display: block;
66 width: 200px;
67 height: 88px;
68 background-image: url(../images/logo.png);
69 font-size: 0;
70 }
71
72 .nav{
73 margin-top: 33px;
74 margin-right: 28px;
75 }
76
77 .nav ul{
78 display: flex;
79 }
80
81 .nav li{
82 margin-right: 47px;
83 }
84
85 .nav li a{
86 padding-bottom: 10px;
87 /* background-color: skyblue; */
88 }
89
90 .nav li a:hover{
91 border-bottom: 2px solid #5eb69c;
92 color:#5eb69c
93 }
94
95 /* 搜素 */
96 .search{
97 display: flex;
98 margin-top: 33px;
99 margin-right: 45px;
100 width: 170px;
101 height: 34px;
102 border-bottom:2px solid #f4f4f4;
103 }
104
105 .search .iconfont{
106 font-size: 18px;
107 color: #ccc;
108 margin-right: 8px;
109 }
110
111 .search input{
112 /* 浏览器优先生效input的默认宽度 */
113 flex: 1;
114 width: 0;
115 }
116
117 .search input::placeholder{
118 font-size: 17px;
119 color: #ccc;
120 }
121
122 .cart {
123 position: relative;
124 margin-top: 32px;
125 }
126
127 .cart .iconfont{
128 font-size: 24px;
129 }
130
131 .cart i{
132 position: absolute;
133 top: 1px;
134 /* right: 1px; */
135 left: 15px;
136 padding: 0 6px;
137 height: 15px;
138 background-color: #e26237;
139 border-radius: 8px;
140 font-size: 14px;
141 color: #fffefe;
142 line-height: 15px;
143 }
144
145 /* 底部区域 */
146 .footer{
147 height: 580px;
148 background-color: #f5f5f5;
149 }
150
151 .service {
152 padding: 0 60px;
153 height: 178px;
154 border-bottom: 1px solid #e8e8e8;
155 }
156
157 .service ul{
158 display: flex;
159 justify-content: space-evenly;
160 }
161
162 .service li{
163 display: flex;
164 width: 190px;
165 height: 58px;
166 /* background-color: pink; */
167 }
168
169 .service li h5{
170 width: 58px;
171 height: 58px;
172 background-image: url(../images/sprite.png);
173 font-size: 0;
174 margin-right: 20px;
175 }
176
177 .service li p{
178 line-height: 58px;
179 font-size: 28px;
180 }
181
182 .service li:nth-child(2) h5{
183 background-position: 0 -58px;
184 }
185
186 .service li:nth-child(3) h5{
187 background-position: 0 -116px;
188 }
189
190 .service li:nth-child(4) h5{
191 background-position: 0 -174px;
192 }
193
194 .help {
195 display: flex;
196 justify-content: space-between;
197 padding-top: 60px;
198 height: 300px;
199 /* background-color: pink; */
200 }
201
202 .help .left {
203 display: flex;
204 }
205
206 .help .left dl{
207 margin-right: 84px;
208 }
209
210 .help .left dt{
211 margin-bottom: 30px;
212 font-size: 18px;
213 }
214
215 .help .left dl:last-child{
216 margin-right: 0;
217 }
218
219 .help .left dd{
220 margin-bottom: 10px;
221 }
222
223 .help .left a{
224 color: #969696;
225 }
226
227 .help .left a .iconfont {
228 color: #5eb69c;
229 }
230
231 .help .right ul{
232 display: flex;
233 }
234
235 .help .right li:first-child{
236 margin-right: 55px;
237 }
238
239 .help .right .pic{
240 width: 120px;
241 height: 120px;
242 margin-bottom: 10px;
243 }
244
245 .help .right p{
246 color: #969696;
247 text-align: center;
248 }
249
250 .footer .copyright{
251 text-align: center;
252 }
253
254 .copyright p{
255 margin-bottom: 10px;
256 color: #a1a1a1;
257 }
258
259 .copyright p a{
260 color: #a1a1a1;
261 margin: 0 10px;
262 }
1 /* banner样式 */
2 .banner{
3 height: 500px;
4 background-color: #f5f5f5;
5 }
6
7 .banner .wrapper{
8 position: relative;
9 overflow: hidden;
10 height: 500px;
11 background-color: pink;
12 }
13 .banner .pic{
14 display: flex;
15 width: 3720px;
16 }
17
18 .subnav{
19 position: absolute;
20 left: 0;
21 top: 0;
22 width: 250px;
23 height: 500px;
24 background-color: rgba(0, 0, 0, 0.42);
25 }
26
27 .subnav li{
28 display: flex;
29 justify-content: space-between;
30 padding-left: 30px;
31 padding-right: 12px;
32 height: 50px;
33 line-height: 50px;
34 /* background-color: pink; */
35 color: white;
36
37 cursor: pointer;
38 }
39
40 .subnav li a{
41 color: white;
42 font-size: 14px;
43 margin-right: 5px;
44 }
45
46 .subnav li .classify{
47 margin-right: 14px;
48 font-size: 16px;
49 }
50
51 .subnav li .iconfont{
52 font-size: 14px;
53 }
54
55 .subnav li:hover{
56 background-color: #00be9a;
57 }
58
59 .banner ol{
60 position: absolute;
61 bottom: 17px;
62 right: 16px;
63 display: flex;
64 }
65
66 .banner ol li{
67 width: 22px;
68 height: 22px;
69 /* background-color: pink; */
70 border-radius: 50%;
71 margin-left: 8px;
72 cursor: pointer;
73 }
74
75 .banner ol i{
76 margin-top: 4px;
77 margin-left: 4px;
78 display: block;
79 width: 14px;
80 height: 14px;
81 background-color: rgba(255, 255, 255, 0.5);
82 border-radius: 50%;
83 }
84
85 .banner ol current{
86 background-color: rgba(255, 255, 255, 0.5);
87 }
88
89 .banner ol .current i{
90 background-color: #fff;
91 }
92
93 .title{
94 display: flex;
95 justify-content: space-between;
96 height: 42px;
97 /* background-color: pink; */
98 margin-top: 40px;
99 margin-bottom: 30px;
100 }
101
102 .title .left{
103 display: flex;
104 }
105
106 .title .left h3{
107 font-size: 30px;
108 margin-right: 35px;
109 }
110
111 .title .left p{
112 align-self: flex-end;
113 color: #a1a1a1;
114 }
115
116 .title .right .more{
117 line-height: 42px;
118 color: #a1a1a1;
119 }
120
121 .title .right .more .iconfont{
122 margin-right: 10px;
123 }
124
125 .bd ul{
126 display: flex;
127 justify-content: space-between;
128 }
129
130 .bd li{
131 width: 304px;
132 height: 404px;
133 background-color: #eef9f4;
134 }
135
136 .bd li pic{
137 width: 304px;
138 height: 304px;
139 }
140
141 .bd li .txt{
142 text-align: center;
143 }
144
145 .bd li h4{
146 margin-top: 18px;
147 margin-bottom: 8px;
148 font-size: 20px;
149 }
150
151 .goods .bd p{
152 font-size: 18px;
153 color: #aa2113;
154 }
155 .goods .bd p span{
156 font-size: 20px;
157 margin-left: 3px;
158 }
159
160 .recommend .bd li{
161 background-color: white;
162 }
163
164 .recommend .bd p{
165 color: #a1a1a1;
166 }
167
168 .brand{
169 margin-top: 64px;
170 height: 468px;
171 background-color: #f5f5f5;
172 }
173
174 .brand .wrapper{
175 overflow: hidden;
176 height: 468px;
177 /* background-color: pink; */
178 }
179
180 .brand .title{
181 position: relative;
182 margin-bottom: 40px;
183 }
184
185 .brand .button{
186 position: absolute;
187 right: 0;
188 bottom: -25px;
189
190 display: flex;
191 }
192
193 .brand .button a{
194 width: 20px;
195 height: 20px;
196 margin-left: 12px;
197 text-align: center;
198 line-height: 20px;
199 color: #fff;
200 }
201
202 .brand .button .prev{
203 background-color: #ddd;
204 }
205
206 .brand .button .next{
207 background-color: #00be9a;
208 }
209
210 .brand .bd li{
211 width: 244px;
212 height: 306px;
213 }
214
215 .fresh .title{
216 margin-top: 60px;
217 margin-bottom: 20px;
218 }
219
220 .title .right{
221 display: flex;
222 }
223
224 .title .right ul{
225 display: flex;
226 margin-top: 10px;
227 margin-right: 58px;
228 }
229
230 .title .right ul a{
231 display: block;
232 margin-left: 6px;
233 height: 20px;
234 /* background-color: pink; */
235 padding: 0 7px;
236 line-height: 20px;
237 }
238
239 .title .right ul .active{
240 background-color: #00be9a;
241 color: #fff;
242 }
243
244 .content{
245 display: flex;
246 justify-content: space-between;
247 }
248
249 .content .left{
250 width: 248px;
251 height: 610px;
252 background-color: pink;
253 }
254
255 .content .right{
256 width: 968px;
257 height: 610px;
258 /* background-color: pink; */
259 }
260
261 .content .right ul{
262 display: flex;
263 flex-wrap: wrap;
264 }
265
266 .content .right li{
267 position: relative;
268 padding: 10px 21px 0;
269 width: 242px;
270 height: 305px;
271 border: 2px solid white;
272
273 overflow: hidden;
274 }
275
276 .content pic{
277 width: 200px;
278 height: 180px;
279 }
280
281 .content .info{
282 margin-top: 14px;
283 margin-bottom: 5px;
284 height: 60px;
285 line-height: 19px;
286 }
287
288 .content .price{
289 color: #af2f22;
290 }
291
292 .content .price span{
293 font-size: 22px;
294 margin-left: 5px;
295 }
296
297 .content li .cover{
298 position: absolute;
299 left: 0;
300 /* bottom: 0; */
301 bottom: -86px;
302 width: 242px;
303 height: 84px;
304 background-color: #00be9a;
305 text-align: center;
306 padding-top: 15px;
307 color: #fff;
308 transition: 0.5s;
309 }
310 .content .cover p:nth-child(1){
311 font-size: 18px;
312 }
313
314 .content .cover p:nth-child(2){
315 margin: 3px auto 6px;
316 width: 120px;
317 height: 1px;
318 background-color:rgba(255, 255, 255, 0.11);
319 }
320
321 .content .cover p:nth-child(3){
322 font-size: 13px;
323 }
324
325 .content .cover p:nth-child(3) .iconfont{
326 font-size: 13px;
327 }
328
329 .content .right li:hover .cover{
330 bottom: 0;
331 }
332
333 .content .right li:hover{
334 border: 2px solid #00be9a;
335 }
336
337 .topic{
338 margin-bottom: 40px;
339 }
340
341 .topic .title{
342 margin-top: 100px;
343 }
344
345 .topic-bd ul{
346 display: flex;
347 justify-content: space-between;
348 }
349
350 .topic-bd li{
351 width: 405px;
352 height: 355px;
353 /* background-color: pink; */
354 }
355
356 .topic-bd .pic{
357 position: relative;
358 width: 405px;
359 height: 288px;
360 }
361
362 .topic-bd .txt{
363 display: flex;
364 justify-content: space-between;
365 padding: 0 15px;
366 align-items: center;
367 width: 405px;
368 height: 67px;
369 /* background-color: skyblue; */
370 font-size: 14px;
371 color: #666;
372 }
373
374 .topic-bd .txt .left{
375 display: flex;
376 }
377
378 .topic-bd .txt .left p{
379 margin-right: 20px;
380 }
381
382 .topic-bd .txt .left P:first-child i{
383 color: #af2f22;
384 }
385
386
387 .topic-bd .cover{
388 display: flex;
389 justify-content: space-between;
390 align-items: center;
391 position: absolute;
392 padding: 0 15px;
393 left: 0;
394 bottom: 0;
395 width: 405px;
396 height: 90px;
397 }
398
399 .topic-bd .cover .left{
400 color: #fff;
401 }
402
403 .topic-bd .cover .left h4{
404 margin-bottom: 6px;
405 font-size: 20px;
406 }
407
408 .topic-bd .cover .right{
409 padding: 0 7px;
410 height: 25px;
411 background-color: #fff;
412 color: #aa2113;
413 font-size: 15px;
414 }
415
416 .topic-bd .cover .right span{
417 font-size: 18px;
418 }
效果预览图
标签：right,color,height,09HTML,background,li,margin,CSS From： https://www.cnblogs.com/Lyh3012648079/p/18347809