完成小兔鲜儿商城界面
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 }
效果预览图
![[GYCTF2020]Node Game及知识点](https://gitee.com/rokoo/roko-picture/raw/master/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240807185703.png)
