Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 淘宝PC端首页
Blogger Information
Blog 12
fans 0
comment 0
visits 5748
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
淘宝PC端首页
PHP是世界上最好的语言
Original
408 people have browsed it

html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>淘宝网-淘！我喜欢</title>
  8.         <link rel="stylesheet" href="css/index.css"/>
  9.         <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3352150_1wav4j5ngdyj.css"/>
  10.         <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3742203_q7fatx3p8sc.css"/>
  11.         <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3352150_aaz88xspkur.css" />
  12.     <style>
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <head>
  18.             <div class="site-nav">
  19.                 <div class="site-nav-bd">
  20.                     <ul class="site-nav-bd-l">
  21.                         <li class="site-nav-menu" data-name="region">
  22.                             <div class="site-nav-menu-hd">
  23.                             <span class="site-nav-region">中国大陆</span>
  24.                             <span class="site-nav-arrow">
  25.                                 <span class="iconfont icon-xiajiantou"></span>
  26.                             </span>
  27.                           </div>
  28.                         <div class="site-nav-menu-bd site-nav-menu-list">
  29.                             <ul class="site-nav-region-list site-nav-menu-bd-panel menu-bd-panel" role="listbox" aria-expanded="true">
  30.                                 <li class="site-nav-region-item J_RegionItem" role="option">全球</li>
  31.                                 <li class="site-nav-region-item J_RegionItem" role="option">中国大陆</li>
  32.                                 <li class="site-nav-region-item J_RegionItem" role="option">中国香港</li>
  33.                                 <li class="site-nav-region-item J_RegionItem" role="option">中国台湾</li>
  34.                                 <li class="site-nav-region-item J_RegionItem" role="option">中国澳门</li>
  35.                                 <li class="site-nav-region-item J_RegionItem" role="option">韩国</li>
  36.                                 <li class="site-nav-region-item J_RegionItem" role="option">马来西亚</li>
  37.                                 <li class="site-nav-region-item J_RegionItem" role="option">澳大利亚</li>
  38.                                 <li class="site-nav-region-item J_RegionItem" role="option">新加坡</li>
  39.                                 <li class="site-nav-region-item J_RegionItem" role="option">新西兰</li>
  40.                                 <li class="site-nav-region-item J_RegionItem" role="option">加拿大</li>
  41.                                 <li class="site-nav-region-item J_RegionItem" role="option">日本</li>
  42.                                 <li class="site-nav-region-item J_RegionItem" role="option">越南</li>
  43.                                 <li class="site-nav-region-item J_RegionItem" role="option">泰国</li>
  44.                                 <li class="site-nav-region-item J_RegionItem" role="option">菲律宾</li>
  45.                                 <li class="site-nav-region-item J_RegionItem" role="option">柬埔寨</li>
  46.                             </ul>
  47.                         </div>
  49.                         <li class="site-nav-menu site-nav-login ">                                    
  50.                             <div class="site-nav-sign">
  51.                                 <a href="//login.taobao.com/member/login.jhtml?" target="_top" class="h">亲，请登录</a>
  52.                                 <a href="//reg.taobao.com/member/new_register.jhtml?from=tbtop&amp;ex_info=&amp;ex_sign=" target="_top">免费注册</a>
  53.                             </div>
  54.                         </li>
  55.                         <li class="site-nav-menu site-nav-mobile">
  56.                             <div class="site-nav-menu-hd">
  57.                                 <a href="https://market.m.taobao.com/app/fdilab/download-page/main/index.html" target="_top">
  58.                                     <span>手机逛淘宝</span>
  59.                                 </a>
  60.                             </div>
  61.                         </li>
  62.                         <li>
  63.                             <a href="javascript:void(0)" id="cniil_wza" target="_self">
  64.                                 <span>网页无障碍</span>
  65.                             </a>
  66.                       </li>
  67.                     </ul>
  69.                     <ul class="site-nav-bd-r">
  70.                         <li class="site-nav-menu">
  71.                             <div class="site-nav-menu-hd">
  72.                                 <a href="#">
  73.                                     <span>我的淘宝</span>
  74.                                 </a>
  75.                                 <span>
  76.                                     <span class="iconfont icon-xiajiantou"></span>
  77.                                 </span>
  78.                             </div>
  79.                           <div class="site-nav-menu-bd">
  80.                                 <div class="site-nav-menu-bd-panel">
  81.                                     <a href="#">
  82.                                         已买到的宝宝
  83.                                     </a>
  84.                                     <a href="#">
  85.                                         我的足迹
  86.                                     </a>
  87.                                 </div>
  88.                             </div>
  89.                         </li>
  91.                       <li class="site-nav-menu">
  92.                             <div class="site-nav-menu-hd">
  93.                                 <a href="#" style="display: flex;">
  94.                                     <span class="iconfont icon-gouwuchefill" style="margin-right:5px; color: red; font-size: 12px;"></span>
  95.                                     <span>购物车</span>
  96.                                     <strong class="h" id="J_MiniCartNum"></strong>
  97.                                 </a>
  98.                             </div>
  99.                         </li>
  101.                         <li class="site-nav-menu">
  102.                             <div class="site-nav-menu-hd">
  103.                                 <a href="#" style="display: flex;">
  104.                                     <span class="iconfont icon-shoucang" style="margin-right:5px;font-size: 12px;"></span>
  105.                                     <span>收藏夹</span>
  106.                                 </a>
  107.                                 <span class="iconfont icon-xiajiantou"></span>
  108.                             </div>
  109.                             <div class="site-nav-menu-bd">
  110.                                 <div class="site-nav-menu-bd-panel">
  111.                                     <a href="#">
  112.                                         收藏的宝贝
  113.                                     </a>
  114.                                     <a href="#">
  115.                                         收藏的店铺
  116.                                     </a>
  117.                                 </div>
  118.                             </div>
  119.                         </li>
  121.                         <li class="site-nav-menu">
  122.                             <div class="site-nav-menu-hd">
  123.                                 <a href="#" style="margin-right: 8px;">
  124.                                     商品分类
  125.                                 </a>
  126.                                 <a href="#">
  127.                                     免费开店
  128.                                 </a>
  129.                             </div>
  130.                         </li>
  132.                         <li class="site-nav-pipe" style="line-height: 35px; margin: 0 10px;">|</li>
  134.                         <li class="site-nav-menu">
  135.                             <div class="site-nav-menu-hd">
  136.                                 <a href="#">
  137.                                     千牛卖家中心
  138.                                 </a>
  139.                                 <span class="iconfont icon-xiajiantou"></span>
  140.                             </div>
  141.                             <div class="site-nav-menu-bd">
  142.                                 <div class="site-nav-menu-bd-panel">
  143.                                     <a href="#">
  144.                                         开店入驻
  145.                                     </a>
  146.                                     <a href="#">
  147.                                         已卖出的宝贝
  148.                                     </a>
  149.                                     <a href="#">
  150.                                         出售中的宝贝
  151.                                     </a>
  152.                                     <a href="#">
  153.                                         卖家服务市场
  154.                                     </a>
  155.                                     <a href="#">
  156.                                         卖家培训中心
  157.                                     </a>
  158.                                     <a href="#">
  159.                                         体验中心
  160.                                     </a>
  161.                                     <a href="#">
  162.                                         电商学习中心
  163.                                     </a>
  164.                                 </div>
  165.                             </div>
  166.                         </li>
  168.                         <li class="site-nav-menu">
  169.                             <div class="site-nav-menu-hd">
  170.                                 <a href="#">
  171.                                     联系客服
  172.                                 </a>
  173.                                 <span class="iconfont icon-xiajiantou"></span>
  174.                             </div>
  175.                             <div class="site-nav-menu-bd">
  176.                                 <div class="site-nav-menu-bd-panel">
  177.                                     <a href="#">
  178.                                         消费者客服
  179.                                     </a>
  180.                                     <a href="#">
  181.                                         卖家客服
  182.                                     </a>
  183.                                     <a href="#">
  184.                                         意见反馈
  185.                                     </a>
  186.                                     <a href="#">
  187.                                         网页版旺旺
  188.                                     </a>
  189.                                 </div>
  190.                             </div>
  191.                         </li>
  192.                     </ul>
  194.                 </div>
  195.             </div>
  196.             <div class="tbh-superbanner">
  197.                 <div class="superbanner-inner">
  198.                     <a href="#">
  199.                         <img src="https://img.alicdn.com/imgextra/i1/O1CN01yJvTB91GX2hzIRQQv_!!6000000000631-2-tps-360-320.png" alt="天猫">
  200.                     </a>
  201.                     <div class="list fl">
  202.                         <a class="item" style="background-image: url(https://img.alicdn.com/imgextra/i4/O1CN01CTCBLw1xvnas4uLPa_!!6000000006506-2-tps-209-75.png);">
  203.                             <div class="desc-wrapper">
  204.                                 <h4 class="title">全屋智能</h4>
  205.                                 <p class="subtitle">尖货不只五折</p>
  206.                             </div>
  207.                             <div class="img-outer">
  208.                                 <img src="https://img.alicdn.com/bao/uploaded/O1CN0130Nj9o1IBdNjeWYQd_!!6000000000855-0-yinhe.jpg_80x80q90.jpg_.webp" />
  209.                             </div>
  210.                         </a>
  212.                         <a class="item" style="background-image: url(https://img.alicdn.com/imgextra/i3/O1CN01fl5lxV1vKaB6XeyA4_!!6000000006154-2-tps-209-75.png)">
  213.                             <div class="desc-wrapper">
  214.                                 <h4 class="title">图书音像</h4>
  215.                                 <p class="subtitle">好书不只五折</p>
  216.                             </div>
  217.                             <div class="img-outer">
  218.                                 <img src="https://img.alicdn.com/bao/uploaded/O1CN01Fy1VkI1l0krUbWeJU_!!6000000004757-0-yinhe.jpg_80x80q90.jpg_.webp" />
  219.                             </div>
  220.                         </a>
  222.                         <a class="item" style="background-image: url(https://img.alicdn.com/imgextra/i4/O1CN01iqDMBp1Fsjr0HEqZF_!!6000000000543-2-tps-209-75.png)">
  223.                             <div class="desc-wrapper">
  224.                                 <h4 class="title">食品尿裤</h4>
  225.                                 <p class="subtitle">低价抢好物</p>
  226.                             </div>
  227.                             <div class="img-outer">
  228.                                 <img src="//img.alicdn.com/bao/uploaded/O1CN01baRLZK1Uh1sdp7h0S_!!6000000002548-0-yinhe.jpg_80x80q90.jpg_.webp" />
  229.                             </div>
  230.                         </a>
  232.                         <a class="item" style="background-image: url(https://img.alicdn.com/imgextra/i3/O1CN01z9bGU21jkR99EMk1p_!!6000000004586-2-tps-209-75.png)">
  233.                             <div class="desc-wrapper">
  234.                                 <h4 class="title">餐厨好物</h4>
  235.                                 <p class="subtitle">大牌限时抢购</p>
  236.                             </div>
  237.                             <div class="img-outer">
  238.                                 <img src="//img.alicdn.com/bao/uploaded/O1CN01AC3VRJ21UYPKy4mfF_!!6000000006988-0-yinhe.jpg_80x80q90.jpg_.webp" />
  239.                             </div>
  240.                         </a>
  242.                         <a class="item" style="background-image: url(https://img.alicdn.com/imgextra/i2/O1CN01EpHqLT1VXhVv3buLP_!!6000000002663-2-tps-209-75.png)">
  243.                             <div class="desc-wrapper">
  244.                                 <h4 class="title">汽车用品</h4>
  245.                                 <p class="subtitle">车品限时抢购</p>
  246.                             </div>
  247.                             <div class="img-outer">
  248.                                 <img src="//img.alicdn.com/bao/uploaded/TB1krJbcQcx_u4jSZFlSutnUFXa.jpg_80x80q90.jpg_.webp" />
  249.                             </div>
  250.                         </a>
  251.                     </div>
  252.                 </div>
  253.             </div>
  254.         </head>
  256.         <div class="cup">
  257.             <div class="top">
  258.                 <div class="top-wrap">
  259.                     <div class="tbh-logo">
  260.                         <div class="logo">
  261.                             <h1>
  262.                                 <a class="logo-bd">
  263.                                     淘宝网
  264.                                 </a>
  265.                             </h1>
  266.                             <h2 style="display: none;">
  267.                                 <a href="#" class="logo-bd">
  268.                                     淘宝网
  269.                                 </a>
  270.                             </h2>
  271.                         </div>
  272.                     </div>
  274.                   <div class="tbh-search">
  275.                         <div class="search-wrap">
  276.                             <div class="search-bd">
  277.                                 <div class="tab">
  278.                                     <ul class="search-suggest-tabs">
  279.                                         <li class="search-suggest-tabs-tab selected">宝贝
  280.                                           <div class="search-tab-icon">
  281.                                                 <span class="iconfont icon-xiajiantou"></span>
  282.                                             </div>
  283.                                         </li>
  284.                                         <li class="search-suggest-tabs-tab">天猫</li>
  285.                                         <li class="search-suggest-tabs-tab">店铺</li>
  286.                                     </ul>
  287.                                 </div>
  288.                                 <form style="flex: 1;">
  289.                                     <i class="search-split"></i>
  290.                                     <div class="search-button">
  291.                                         <button class="btn-search tb-bg" type="submit">搜索</button>
  292.                                     </div>
  293.                                     <div class="placeholder" style="display: block;">充电宝</div>
  294.                                   <div class="search-suggest-combobox">
  295.                                         <input />
  296.                                     </div>
  297.                                 </form>
  298.                             </div>
  299.                             <div class="search-ft">
  300.                                 <div class="search-hots">
  301.                                     <div class="search-hots-line">
  302.                                         <div class="search-hots-fine">
  303.                                             <a href="#">
  304.                                                 新款连衣裙
  305.                                             </a>
  306.                                             <a href="#">
  307.                                                 四件套
  308.                                             </a>
  309.                                             <a href="#">
  310.                                                 潮流T恤
  311.                                             </a>
  312.                                             <a href="#">
  313.                                                 时尚女鞋
  314.                                             </a>
  315.                                             <a href="#">
  316.                                                 短裤
  317.                                             </a>
  318.                                             <a href="#">
  319.                                                 半身裙
  320.                                             </a>
  321.                                             <a href="#">
  322.                                                 男士外套
  323.                                             </a>
  324.                                             <a href="#">
  325.                                                 墙纸
  326.                                             </a>
  327.                                             <a href="#">
  328.                                                 行车记录仪
  329.                                             </a>
  330.                                             <a href="#">
  331.                                                 新款男鞋
  332.                                             </a>
  333.                                         </div>
  334.                                     </div>
  335.                                 </div>
  336.                             </div>
  337.                         </div>
  338.                     </div>
  340.                     <div class="tbh-qr-wrapper">
  341.                         <div class="qr">
  342.                             <a class="qr-bd">
  343.                                 <span id="mtb" class="h">下载淘宝</span>
  344.                                 <img class="qrcode" src="//img.alicdn.com/imgextra/i4/O1CN01GZ8Gm51DHyo7asI5m_!!6000000000192-2-tps-160-160.png_.webp">
  345.                             </a>
  346.                         </div>
  347.                     </div>
  348.                 </div>
  350.             </div>
  352.         </div>
  354.         <div class="screen-outer">
  355.             <div class="btn-service">
  356.                 <div class="decorations-item " 
  357.                 style="background:url(https://img.alicdn.com/imgextra/i1/O1CN01howSvy1JcwezzIzoC_!!6000000001050-2-tps-360-800.png) no-repeat;
  358.                 width:360px;
  359.                 height:800px;z-index:3;  
  360.                 position: absolute;
  361.                 top: -150px;  
  362.                 left: -380px;">
  363.                 </div>
  364.                 <div class="decorations-item " 
  365.                 style="background:url(https://img.alicdn.com/imgextra/i1/O1CN01uUWgGS24yH2bxaIyx_!!6000000007459-2-tps-360-800.png) no-repeat;
  366.                 width:360px;
  367.                 height:800px;
  368.                 z-index:3;  
  369.                 position: absolute;
  370.                 top: -150px;  
  371.                 right: -380px;">
  372.                 </div>
  373.             </div>
  374.             <div class="main">
  375.                 <div class="cat">
  376.                     <h2>分类</h2>
  377.                     <ul class="service-bd">
  378.                         <li class="J_Cat">
  379.                             <span class="iconfont icon-xiezi service-arrow"></span>
  380.                             <a href="#">
  381.                                 女鞋
  382.                             </a>
  383.                             <span>/</span>
  384.                             <a href="#">
  385.                                 男鞋
  386.                             </a>
  387.                             <span>/</span>
  388.                             <a href="#">
  389.                                 箱包
  390.                             </a>
  391.                         </li>
  393.                         <li class="J_Cat">
  394.                             <span class="iconfont icon-huabanfuben service-arrow"></span>
  395.                             <a href="#">
  396.                                 美妆
  397.                             </a>
  398.                             <span>/</span>
  399.                             <a href="#">
  400.                                 饰品
  401.                             </a>
  402.                             <span>/</span>
  403.                             <a href="#">
  404.                                 洗护
  405.                             </a>
  406.                         </li>
  408.                         <li class="J_Cat">
  409.                             <span class="iconfont icon-Txu service-arrow"></span>
  410.                             <a href="#">
  411.                                 男装
  412.                             </a>
  413.                             <span>/</span>
  414.                             <a href="#">
  415.                                 运动
  416.                             </a>
  417.                             <span>/</span>
  418.                             <a href="#">
  419.                                 百货
  420.                             </a>
  421.                         </li>
  423.                         <li class="J_Cat">
  424.                             <span class="iconfont icon-shouji service-arrow"></span>
  425.                             <a href="#">
  426.                                 手机
  427.                             </a>
  428.                             <span>/</span>
  429.                             <a href="#">
  430.                                 数码
  431.                             </a>
  432.                             <span>/</span>
  433.                             <a href="#">
  434.                                 企业礼品
  435.                             </a>
  436.                         </li>
  438.                         <li class="J_Cat">
  439.                             <span class="iconfont icon-shafa service-arrow"></span>
  440.                             <a href="#">
  441.                                 家装
  442.                             </a>
  443.                             <span>/</span>
  444.                             <a href="#">
  445.                                 电器
  446.                             </a>
  447.                             <span>/</span>
  448.                             <a href="#">
  449.                                 车品
  450.                             </a>
  451.                         </li>
  453.                         <li class="J_Cat">
  454.                             <span class="iconfont icon-yingtao service-arrow"></span>
  455.                             <a href="#">
  456.                                 食品
  457.                             </a>
  458.                             <span>/</span>
  459.                             <a href="#">
  460.                                 生鲜
  461.                             </a>
  462.                             <span>/</span>
  463.                             <a href="#">
  464.                                 母婴
  465.                             </a>
  466.                         </li>
  468.                         <li class="J_Cat">
  469.                             <span class="iconfont icon-yiyaoxiang service-arrow"></span>
  470.                             <a href="#">
  471.                                 医药
  472.                             </a>
  473.                             <span>/</span>
  474.                             <a href="#">
  475.                                 保健
  476.                             </a>
  477.                             <span>/</span>
  478.                             <a href="#">
  479.                                 进口
  480.                             </a>
  481.                         </li>
  482.                     </ul>
  483.                 </div>
  484.                 <div class="main-right">
  485.                     <div class="tbh-nav">
  486.                         <div class="newnav">
  487.                             <ul class="nav-hd ">
  488.                 <li>
  489.                                     <a style="color: #FF0036;font-weight: bolder;" href="#">
  490.                     天猫
  491.                   </a>
  492.                 </li>
  494.                 <li class="pipe">|</li>
  495.                 <li>
  496.                                     <a style="color: #FF0036;font-weight: bolder;" href="#">
  497.                     聚划算
  498.                   </a>
  499.                 </li>
  501.                 <li class="pipe">|</li>
  502.                 <li>
  503.                                     <a style="color: #33c900;font-weight: bolder;" href="#">
  504.                     天猫超市
  505.                   </a>
  506.                 </li>
  507.                             </ul>
  510.                             <ul class="nav-bd">
  511.                                 <li class="pipe">|</li>
  512.                                 <li style="">
  513.                                     <a href="#">
  514.                                         司法拍卖
  515.                                     </a>
  516.                                 </li>
  518.                                 <li class="pipe">|</li>
  519.                                 <li style="">
  520.                                     <a href="#">
  521.                                         飞猪旅行
  522.                                     </a>
  523.                                 </li>
  525.                                 <li class="pipe">|</li>
  526.                                 <li style="">
  527.                                     <a href="#">
  528.                                             天天特卖
  529.                                     </a>
  530.                                 </li> 
  531.                             </ul>
  533.                             <ul class="nav-bd last">
  534.                                 <li class="pipe">|</li>
  535.                                     <li style="">
  536.                                         <a href="#">
  537.                                                     极有家
  538.                                             </a>
  539.                                     </li>
  541.                                     <li class="pipe">|</li>
  542.                                     <li style="">
  543.                                         <a href="#">
  544.                                                     淘宝直播
  545.                                             </a>
  546.                                     </li>
  547.                             </ul>
  548.                         </div>
  549.                     </div>
  550.                     <div class="main-inner">
  551.                         <div class="core">
  552.                             <div>
  553.                                 <a>
  554.                                     <img src="https://img.alicdn.com/imgextra/i1/6000000000644/O1CN01D6mZwl1Gczqq7t0B5_!!6000000000644-2-octopus.png" />
  555.                                 </a>
  556.                             </div>
  557.                         </div>
  558.                         <div class="tbh-user">
  559.                             <div class="user">
  560.                                 <div class="member-bd">
  561.                                     <div class="avatar-wrapper">
  562.                                         <a class="J_UserMemberHome">
  563.                                             <img class="J_UserMemberAvatar" src="//wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=60&height=60&type=sns&_input_charset=UTF-8">
  564.                                         </a>
  565.                                     </div>
  566.                                     <a class="J_UserMemberNickUrl member-nickurl">
  567.                                         <span class="member-nick-info">
  568.                                             Hi!
  569.                                             <strong class="J_UserMemberNick member-nick">
  570.                                                 你好
  571.                                             </strong>
  572.                                         </span>
  573.                                     </a>
  574.                                 </div>
  575.                                 <div class="member-ft">
  576.                                     <div class="member-logout">
  577.                                         <a href="#" class="btn-login">登录</a>
  578.                                         <a href="#" class="btn-register">注册</a>
  579.                                         <a href="#" class="btn-open">开店</a>
  580.                                     </div>
  581.                                 </div>
  583.                                 <div class="user-mytao">
  584.                                     <div class="mytao-content">
  585.                                         <a href="#">
  586.                                             <span class="iconfont icon-shoucang mytao-icon"></span>
  587.                                             <p>宝贝收藏</p>
  588.                                         </a>
  589.                                     </div>
  590.                                     <div class="mytao-content">
  591.                                         <a href="#">
  592.                                             <span class="iconfont icon-dianpu mytao-icon"></span>
  593.                                             <p>买过的店</p>
  594.                                         </a>
  595.                                     </div>
  596.                                     <div class="mytao-content">
  597.                                         <a href="#">
  598.                                             <span class="iconfont icon-gongwenbao mytao-icon"></span>
  599.                                             <p>收藏的店</p>
  600.                                         </a>
  601.                                     </div>
  602.                                     <div class="mytao-content newlast">
  603.                                         <a href="#">
  604.                                             <span class="iconfont icon-wodezuji mytao-icon"></span>
  605.                                             <p>我的足迹</p>
  606.                                         </a>
  607.                                     </div>
  608.                                 </div>
  610.                                 <div class="user-tipmain">
  611.                                     <div class="user-tip">
  612.                                         <div>
  613.                                             <div class="user-mod">
  614.                                                 <a href="#">
  615.                                                     <div class="notice-tip">
  616.                                                         热点
  617.                                                     </div>
  618.                                                 </a>
  619.                                                 <a href="#">
  620.                                                     <p>淘宝平台打击流量造假、黑公关、网络水军公告</p>
  621.                                                 </a>
  622.                                             </div>
  623.                                         </div>
  624.                                     </div>
  625.                                 </div>
  626.                             </div>
  627.                         </div>
  628.                     </div>
  629.                 </div>
  630.             </div>
  631.         </div>
  634.       <div class="layer">
  635.             <div class="hotsale">
  636.                 <div class="tb-recommend">
  637.                     <h3 class="tb-recommend-header">
  638.                         <span class="rh-title">猜你喜欢</span>
  639.                         <img class="rh-logo" src="//gw.alicdn.com/imgextra/i2/O1CN016b1mMM1FxJlsXfWhU_!!6000000000553-2-tps-96-30.png">
  640.                     </h3>
  641.                     <div class="tb-recommend-content">
  643.                         <div class="tb-recommend-content-item">
  644.                             <a href="//item.taobao.com/item.htm?spm=a21bo.jianhua.201876.1.c07a11d9oKak7q&amp;id=646661244565&amp;scm=1007.40986.275655.0&amp;pvid=f6106852-45bc-4a55-b2d0-34a40135f421" target="_blank" class="item-link" data-spm-anchor-id="a21bo.jianhua.201876.1">
  645.                                 <div class="img-wrapper">
  646.                                     <img src="//gw.alicdn.com/bao/uploaded/i3/2038226538/O1CN019MKcuI1yASAD26HW5_!!0-item_pic.jpg_300x300q90.jpg_.webp">
  647.                                 </div>
  648.                                 <div class="info-wrapper">
  649.                                     <div class="title">
  650.                                         <img src="https://gw.alicdn.com/imgextra/i4/O1CN01HDY9RJ1RZkkN6dB70_!!6000000002126-2-tps-269-42.png">
  651.                                             适用红米redmi手表表带watch2替换腕带MI WATCH lite智能运动手环环表带个性彩色防水潮男女通用新款硅胶表带
  652.                                         </div>
  653.                                         <div class="tag-list">
  654.                                         <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  655.                                             送运费险
  656.                                         </div>
  657.                                         <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  658.                                             每300减50
  659.                                         </div>
  660.                                     </div>
  661.                                 </div>
  662.                                 <div class="price-wrapper">
  663.                                     <span class="price-value">
  664.                                         <em>¥</em>
  665.                                         3.9
  666.                                     </span>
  667.                               </div>
  668.                           </a>
  669.                       </div>
  671.                     <div class="tb-recommend-content-item">
  672.                         <a href="//item.taobao.com/item.htm?spm=a21bo.jianhua.201876.1.c07a11d9oKak7q&amp;id=646661244565&amp;scm=1007.40986.275655.0&amp;pvid=f6106852-45bc-4a55-b2d0-34a40135f421" target="_blank" class="item-link" data-spm-anchor-id="a21bo.jianhua.201876.1">
  673.                             <div class="img-wrapper">
  674.                                 <img src="//gw.alicdn.com/bao/uploaded/i3/2038226538/O1CN019MKcuI1yASAD26HW5_!!0-item_pic.jpg_300x300q90.jpg_.webp">
  675.                             </div>
  676.                             <div class="info-wrapper">
  677.                                 <div class="title">
  678.                                     <img src="https://gw.alicdn.com/imgextra/i4/O1CN01HDY9RJ1RZkkN6dB70_!!6000000002126-2-tps-269-42.png">
  679.                                         适用红米redmi手表表带watch2替换腕带MI WATCH lite智能运动手环环表带个性彩色防水潮男女通用新款硅胶表带
  680.                                     </div>
  681.                                     <div class="tag-list">
  682.                                     <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  683.                                         送运费险
  684.                                     </div>
  685.                                     <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  686.                                         每300减50
  687.                                     </div>
  688.                                 </div>
  689.                             </div>
  690.                             <div class="price-wrapper">
  691.                                 <span class="price-value">
  692.                                     <em>¥</em>
  693.                                     3.9
  694.                                 </span>
  695.                           </div>
  696.                       </a>
  697.                     </div>
  698. <div class="tb-recommend-content-item">
  699.                             <a href="//item.taobao.com/item.htm?spm=a21bo.jianhua.201876.1.c07a11d9oKak7q&amp;id=646661244565&amp;scm=1007.40986.275655.0&amp;pvid=f6106852-45bc-4a55-b2d0-34a40135f421" target="_blank" class="item-link" data-spm-anchor-id="a21bo.jianhua.201876.1">
  700.                                 <div class="img-wrapper">
  701.                                     <img src="//gw.alicdn.com/bao/uploaded/i3/2038226538/O1CN019MKcuI1yASAD26HW5_!!0-item_pic.jpg_300x300q90.jpg_.webp">
  702.                                 </div>
  703.                                 <div class="info-wrapper">
  704.                                     <div class="title">
  705.                                         <img src="https://gw.alicdn.com/imgextra/i4/O1CN01HDY9RJ1RZkkN6dB70_!!6000000002126-2-tps-269-42.png">
  706.                                             适用红米redmi手表表带watch2替换腕带MI WATCH lite智能运动手环环表带个性彩色防水潮男女通用新款硅胶表带
  707.                                         </div>
  708.                                         <div class="tag-list">
  709.                                         <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  710.                                             送运费险
  711.                                         </div>
  712.                                         <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  713.                                             每300减50
  714.                                         </div>
  715.                                     </div>
  716.                                 </div>
  717.                                 <div class="price-wrapper">
  718.                                     <span class="price-value">
  719.                                         <em>¥</em>
  720.                                         3.9
  721.                                     </span>
  722.                               </div>
  723.                           </a>
  724.                       </div>
  725. <div class="tb-recommend-content-item">
  726.                             <a href="//item.taobao.com/item.htm?spm=a21bo.jianhua.201876.1.c07a11d9oKak7q&amp;id=646661244565&amp;scm=1007.40986.275655.0&amp;pvid=f6106852-45bc-4a55-b2d0-34a40135f421" target="_blank" class="item-link" data-spm-anchor-id="a21bo.jianhua.201876.1">
  727.                                 <div class="img-wrapper">
  728.                                     <img src="//gw.alicdn.com/bao/uploaded/i3/2038226538/O1CN019MKcuI1yASAD26HW5_!!0-item_pic.jpg_300x300q90.jpg_.webp">
  729.                                 </div>
  730.                                 <div class="info-wrapper">
  731.                                     <div class="title">
  732.                                         <img src="https://gw.alicdn.com/imgextra/i4/O1CN01HDY9RJ1RZkkN6dB70_!!6000000002126-2-tps-269-42.png">
  733.                                             适用红米redmi手表表带watch2替换腕带MI WATCH lite智能运动手环环表带个性彩色防水潮男女通用新款硅胶表带
  734.                                         </div>
  735.                                         <div class="tag-list">
  736.                                         <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  737.                                             送运费险
  738.                                         </div>
  739.                                         <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  740.                                             每300减50
  741.                                         </div>
  742.                                     </div>
  743.                                 </div>
  744.                                 <div class="price-wrapper">
  745.                                     <span class="price-value">
  746.                                         <em>¥</em>
  747.                                         3.9
  748.                                     </span>
  749.                               </div>
  750.                           </a>
  751.                       </div>
  752. <div class="tb-recommend-content-item">
  753.                             <a href="//item.taobao.com/item.htm?spm=a21bo.jianhua.201876.1.c07a11d9oKak7q&amp;id=646661244565&amp;scm=1007.40986.275655.0&amp;pvid=f6106852-45bc-4a55-b2d0-34a40135f421" target="_blank" class="item-link" data-spm-anchor-id="a21bo.jianhua.201876.1">
  754.                                 <div class="img-wrapper">
  755.                                     <img src="//gw.alicdn.com/bao/uploaded/i3/2038226538/O1CN019MKcuI1yASAD26HW5_!!0-item_pic.jpg_300x300q90.jpg_.webp">
  756.                                 </div>
  757.                                 <div class="info-wrapper">
  758.                                     <div class="title">
  759.                                         <img src="https://gw.alicdn.com/imgextra/i4/O1CN01HDY9RJ1RZkkN6dB70_!!6000000002126-2-tps-269-42.png">
  760.                                             适用红米redmi手表表带watch2替换腕带MI WATCH lite智能运动手环环表带个性彩色防水潮男女通用新款硅胶表带
  761.                                         </div>
  762.                                         <div class="tag-list">
  763.                                         <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  764.                                             送运费险
  765.                                         </div>
  766.                                         <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  767.                                             每300减50
  768.                                         </div>
  769.                                     </div>
  770.                                 </div>
  771.                                 <div class="price-wrapper">
  772.                                     <span class="price-value">
  773.                                         <em>¥</em>
  774.                                         3.9
  775.                                     </span>
  776.                               </div>
  777.                           </a>
  778.                       </div>
  779. <div class="tb-recommend-content-item">
  780.                             <a href="//item.taobao.com/item.htm?spm=a21bo.jianhua.201876.1.c07a11d9oKak7q&amp;id=646661244565&amp;scm=1007.40986.275655.0&amp;pvid=f6106852-45bc-4a55-b2d0-34a40135f421" target="_blank" class="item-link" data-spm-anchor-id="a21bo.jianhua.201876.1">
  781.                                 <div class="img-wrapper">
  782.                                     <img src="//gw.alicdn.com/bao/uploaded/i3/2038226538/O1CN019MKcuI1yASAD26HW5_!!0-item_pic.jpg_300x300q90.jpg_.webp">
  783.                                 </div>
  784.                                 <div class="info-wrapper">
  785.                                     <div class="title">
  786.                                         <img src="https://gw.alicdn.com/imgextra/i4/O1CN01HDY9RJ1RZkkN6dB70_!!6000000002126-2-tps-269-42.png">
  787.                                             适用红米redmi手表表带watch2替换腕带MI WATCH lite智能运动手环环表带个性彩色防水潮男女通用新款硅胶表带
  788.                                         </div>
  789.                                         <div class="tag-list">
  790.                                         <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  791.                                             送运费险
  792.                                         </div>
  793.                                         <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  794.                                             每300减50
  795.                                         </div>
  796.                                     </div>
  797.                                 </div>
  798.                                 <div class="price-wrapper">
  799.                                     <span class="price-value">
  800.                                         <em>¥</em>
  801.                                         3.9
  802.                                     </span>
  803.                               </div>
  804.                           </a>
  805.                       </div>
  806. <div class="tb-recommend-content-item">
  807.                             <a href="//item.taobao.com/item.htm?spm=a21bo.jianhua.201876.1.c07a11d9oKak7q&amp;id=646661244565&amp;scm=1007.40986.275655.0&amp;pvid=f6106852-45bc-4a55-b2d0-34a40135f421" target="_blank" class="item-link" data-spm-anchor-id="a21bo.jianhua.201876.1">
  808.                                 <div class="img-wrapper">
  809.                                     <img src="//gw.alicdn.com/bao/uploaded/i3/2038226538/O1CN019MKcuI1yASAD26HW5_!!0-item_pic.jpg_300x300q90.jpg_.webp">
  810.                                 </div>
  811.                                 <div class="info-wrapper">
  812.                                     <div class="title">
  813.                                         <img src="https://gw.alicdn.com/imgextra/i4/O1CN01HDY9RJ1RZkkN6dB70_!!6000000002126-2-tps-269-42.png">
  814.                                             适用红米redmi手表表带watch2替换腕带MI WATCH lite智能运动手环环表带个性彩色防水潮男女通用新款硅胶表带
  815.                                         </div>
  816.                                         <div class="tag-list">
  817.                                         <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  818.                                             送运费险
  819.                                         </div>
  820.                                         <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">
  821.                                             每300减50
  822.                                         </div>
  823.                                     </div>
  824.                                 </div>
  825.                                 <div class="price-wrapper">
  826.                                     <span class="price-value">
  827.                                         <em>¥</em>
  828.                                         3.9
  829.                                     </span>
  830.                               </div>
  831.                           </a>
  832.                       </div>
  834.                     </div>
  835.                 </div>
  836.             </div>
  837.         </div>
  839.     </body>
  840. </html>

css

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.     font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
  6. }
  8. a {
  9.     text-decoration: none;
  10.     color: #3C3C3C;
  11. }
  13. li {
  14.     list-style: none;
  15. }
  16. .site-nav {
  17.     font-size: 12px;
  18.     color: #3C3C3C;
  19.     background: #f5f5f5;
  20. }
  21. .site-nav-bd{
  22.     display: flex;
  23.     justify-content: space-between;
  24.     margin: 0 auto;
  25.     width: 1190px;
  26.     height: 35px;
  27.     background: #f5f5f5;
  28.     -webkit-backface-visibility: hidden;
  29.     *zoom: 1;
  30. }
  32. .site-nav .site-nav-menu .site-nav-menu-hd {
  33.     z-index: 10002;
  34.     position: relative;
  35.     padding: 0 6px;
  36.     height: 35px;
  37.     line-height: 35px;
  38.     _display: inline;
  39.     _zoom: 1;
  40.     display: flex;
  41.     justify-content: space-between;
  42. }
  43. .icon-xiajiantou {
  44.     display: block;
  45.     font-size: 12px;
  46.     transform: scale(0.3);
  47.     font-weight: bolder;
  48. }
  50. .site-nav-bd-l, .site-nav-bd-r {
  51.     display: flex;
  52. }
  54. .site-nav-menu-bd {
  55.     display: none;
  56. }
  58. .site-nav-bd ul span {
  59.   display: block;
  60.   line-height: 35px;
  61. }
  63. .site-nav-sign {
  64.     display: flex;
  65.     height: 35px;
  66.     place-items: center;
  67. }
  69. .site-nav-sign a:first-of-type{
  70.     color: red;
  71.     margin-left: -5px;
  72. }
  73. .site-nav-sign a:last-of-type {
  74.     margin-left: 8px;
  75. }
  76. .site-nav-bd-l li:nth-of-type(3) {
  77.     margin: 0 10px;
  78. }
  80. .site-nav-menu-hd {
  81.     display: flex;
  82.     place-items: center;
  83. }
  86. .superbanner-inner {
  87.     display: flex;
  88.     overflow: hidden;
  89.     height: 100px;
  90.     width: 1190px;
  91.     margin: 0 auto;
  92.     min-width: 1190px;
  93.     position: relative;
  94. }
  95. .tbh-superbanner {
  96.     background-color: #ff727c;
  97. }
  98. .list.fl {
  99.     display: flex;
  100.     width: 1085px;
  101.     margin-top: 13px;
  102. }
  104. .superbanner-inner img {
  105.     width: 80px;
  106.     height: 80px;
  107.     display: block;
  108. }
  110. .superbanner-inner a {
  111.     height: 80px;
  112.     width: 80px;
  113.     padding: 10px 10px 10px 15px;
  114. }
  116. .superbanner-inner > a {
  117.     box-sizing: content-box;
  118. }
  120. .superbanner-inner .list .item {
  121.     width: 209px;
  122.     height: 75px;
  123.     margin-right: 10px;
  124.     position: relative;
  125.     background-repeat: no-repeat;
  126.     background-size: cover;
  127. }
  129. .superbanner-inner .list .img-outer {
  130.     position: absolute;
  131.     width: 52px;
  132.     height: 52px;
  133.     top: 12px;
  134.     right: 14px;
  135.     overflow: hidden;
  136.     -webkit-border-radius: 5px;
  137.     -webkit-background-clip: padding-box;
  138.     -moz-border-radius: 5px;
  139.     -moz-background-clip: padding;
  140.     border-radius: 5px;
  141.     background-clip: padding-box;
  142.     background: #fff;
  143. }
  145. .superbanner-inner .list .img-outer img {
  146.     display: block;
  147.     width: 52px;
  148.     height: 52px;
  149. }
  151. .superbanner-inner .list .title {
  152.     line-height: 28px;
  153.     height: 28px;
  154.     font-size: 20px;
  155.         color: #fff;
  156.         width: 90px;
  157.         overflow: hidden;
  158. }
  160. .superbanner-inner .list .subtitle {
  161.     line-height: 20px;
  162.     height: 16px;
  163.     font-size: 14px;
  164.     color: #fff;
  165.     width: 90px;
  166.     overflow: hidden;
  167. }
  169. .logo h1 .logo-bd {
  170.     display: block;
  171.     margin-left: 22px;
  172.     padding-top: 58px;
  173.     width: 142px;
  174.     height: 0;
  175.     overflow: hidden;
  176.     text-indent: -9999px;
  177.     background: url(//gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png) 0 0 no-repeat;
  178. }
  180. .cup {
  181.     background-color: #fff;
  182.     width: 1190px;
  183.     margin: 0 auto;
  184.     border-radius: 18px 18px 0 0;
  185. }
  187. .top {
  188.     padding-top: 24px;
  189.     height: 100px;
  190. }
  192. .top-wrap {
  193.     display: flex;
  194. }
  196. .search-bd {
  197.     display: flex;
  198. }
  200. .tbh-search {
  201.     margin-left: 80px;
  202.     margin-right: 80px;
  203. }
  205. .search-bd form {
  206.     display: flex;
  207. }
  209. .search-suggest-tabs-tab:nth-of-type(2),
  210. .search-suggest-tabs-tab:nth-of-type(3) {
  211.     display: none;
  212. }
  214. .search-bd {
  215.     width: 738px;
  216.     background: #FFF;
  217.     -webkit-border-radius: 100px;
  218.     -webkit-background-clip: padding-box;
  219.     -moz-border-radius: 100px;
  220.     -moz-background-clip: padding;
  221.     border-radius: 100px;
  222.     background-clip: padding-box;
  223.     position: relative;
  224.     border: 2px solid #FF5000;
  225.         margin-top: 12px;
  226.         box-sizing: border-box;
  227.         height: 42px;
  228. }
  230. .search-suggest-tabs {
  231.     position: relative;
  232.     width: 65px;
  233.     background: #fff;
  234. }
  236. .search-suggest-tabs-tab {
  237.     height: 38px;
  238.     color: #333;
  239.     line-height: 38px;
  240.     text-align: center;
  241.     cursor: pointer;
  242. }
  244. .tab {
  245.     overflow: hidden;
  246.     border-radius: 100px;
  247.     background-color: #fff;
  248. }
  250. .search-tab-icon {
  251.     position: absolute;
  252.     top: 2px;
  253.     right: 8px;
  254.     padding: 4px 3px 3px;
  255.     width: 6px;
  256.     height: 5px;
  257.     left: 48px;
  258.     z-index: 2;
  259. }
  261. .search-split {
  262.     position: absolute;
  263.     top: 7px;
  264.     left: 65px;
  265.     width: 1px;
  266.     height: 24px;
  267.     background: #F3F0F0;
  268.     z-index: 200;
  269. }
  271. .btn-search {
  272.     position: absolute;
  273.     top: 2px;
  274.     right: 2px;
  275.     height: 34px;
  276.     width: 72px;
  277.     background: #ff5000;
  278.     background-image: -webkit-linear-gradient(
  279. 305deg,#ff9000,#ff5000 77%);
  280.     background-image: -moz- oldlinear-gradient(305deg,#ff9000 0,#ff5000 77%);
  281.     background-image: -o-linear-gradient(305deg,#ff9000 0,#ff5000 77%);
  282.     background-image: linear-gradient(
  283. 145deg,#ff9000,#ff5000 77%);
  284.     -webkit-border-radius: 20px;
  285.     -moz-border-radius: 20px;
  286.     border-radius: 20px;
  287.     border: none;
  288.     color: #fff;
  289.     font-size: 14px;
  290.     cursor: pointer;
  291.         font-size: 18px;
  292.         font-weight: 700;
  293. }
  295. .placeholder {
  296.     position: absolute;
  297.     top: 9px;
  298.     z-index: 2;
  299.     color: #9b9b9b;
  300.     font-size: 14px;
  301.     line-height: 20px;
  302.     -webkit-user-select: none;
  303.     -moz-user-select: none;
  304.     -ms-user-select: none;
  305.     user-select: none;
  306.     cursor: text;
  307.     left: 76px;
  308. }
  310. .search-suggest-combobox{
  311.     margin-right: 75px;
  312.     overflow: hidden;
  313.     outline: 0;
  314.     margin-left: 0;
  315.     padding-left: 65px;
  316.         border-radius: 20px;
  317. }
  319. .search-suggest-combobox>input {
  320.     width: 100%;
  321.     height: 38px;
  322.     padding: 9px 0;
  323.     overflow-y: visible;
  324.     color: #000;
  325.     font-size: 14px;
  326.     line-height: 20px;
  327.     text-indent: 10px;
  328.     vertical-align: middle;
  329.     background-color: #fff;
  330.     border: 0;
  331.     outline: none;
  332. }
  334. .qr {
  335.     position: relative;
  336.     top: -10px;
  337.     z-index: 2;
  338. }
  340. .qr .qr-bd {
  341.     position: relative;
  342.     cursor: pointer;
  343.     display: block;
  344.     text-align: center;
  345.     width: 74px;
  346.     height: 88px;
  347.     color: #666;
  348.     border: 1px solid #eee;
  349.     background-color: #FFF;
  350. }
  352. .qr .qr-bd span {
  353.     line-height: 20px;
  354.     margin: 4px auto 0;
  355.     width: 78px;
  356. }
  358. .qr .qr-bd img {
  359.     display: block;
  360.     margin-left: 6px;
  361.     width: 62px;
  362.     height: 62px;
  363. }
  365. .search-ft {
  366.     position: relative;
  367.     padding: 8px 31px 0 0;
  368.     height: 20px;
  369.     _width: 600px;
  370. }
  372. .search-hots-line {
  373.     height: 46px;
  374.     position: relative;
  375.     overflow: hidden;
  376.     margin-left: 19px;
  377. }
  379. .search-hots-fine, .search-hots-sline {
  380.     overflow: hidden;
  381.     height: 18px;
  382.     line-height: 18px;
  383.     margin-bottom: 5px;
  384. }
  386. .search-hots-fine a {
  387.     white-space: nowrap;
  388.     color: #666!important;
  389.     margin-right: 8px;
  390. }
  392. .screen-outer {
  393.     background: #fff;
  394.     margin: 50px auto;
  395.     width: 1190px;
  396.     position: relative;
  397. }
  399. .screen-outer .main {
  400.     display: grid;
  401.     grid-template-columns: 270px 1fr;
  402.     grid-template-rows: 1fr;
  403.     gap: 40px;
  404. }
  406. .cat {
  407.     gird-area: 1/1/span 1/ span 1;
  408. }
  410. .main-right {
  411.     gird-area: 2/1/span 1/ span 1;
  412.     display: grid;
  413.     grid-template-columns: 1fr;
  414.     grid-template-rows: 42px 1fr;
  415.     gap: 10px;
  416. }
  418. .tbh-nav {
  419.     gird-area: 1/1/span 1/ span 1;
  420. }
  422. .main-inner {
  423.     display: grid;
  424.     grid-template-columns: 564px 316px;
  425.     grid-template-rows: 357px;
  426.     background-color: #fff;
  427.     gap: 30px;
  428. }
  430. .newnav, .newnav ul {
  431.     display: flex;
  432.     place-items: center;
  433. }
  435. .core img {
  436.     width: 564px;
  437.     height: 315px;
  438.     display: block;
  439.     border-radius: 12px;
  440. }
  442. .layer {
  443.     width: 1190px;
  444.     margin: 0 auto;
  445. }
  447. .cat {
  448.     margin: 0 0 0 24px;
  449.     position: relative;
  450.     font-size: 14px;
  451.     background-color: #F7F9FA;
  452.     width: 270px;
  453.     border-radius: 12px;
  454.     height: 330px;
  455. }
  457. .cat h2 {
  458.     padding: 16px 0 0 20px;
  459.     font-size: 18px;
  460.     color: #111;
  461.     letter-spacing: 0;
  462.     line-height: 24px;
  463.     font-weight: bolder;
  464. }
  466. .service-bd {
  467.     padding: 16px 0 8px 20px;
  468.     border-top: none;
  469. }
  471. .service-bd li {
  472.     overflow: hidden;
  473.     line-height: 20px;
  474.     height: 20px;
  475.     position: relative;
  476.     font-size: 14px;
  477.     font-weight: 400;
  478.     margin-bottom: 18px;
  479.     width: 212px;
  480.     color: #666;
  481. }
  483. .service-bd li a{
  484.     font-size: 14px;
  485.     font-weight: 400;
  486.     color: #666;
  487. }
  489. .service-arrow {
  490.     margin-right: 12px;
  491.     font-size: 16px;
  492.     width: 16px;
  493.     height: 16px;
  494. }
  496. .service-bd li span {
  497.     height: 20px;
  498.     overflow: hidden;
  499.     width: 7px;
  500.     padding: 0 8px;
  501. }
  503. .nav-hd a, .nav-bd a{
  504.     padding: 0 20px;
  505.     font-size: 16px;
  506.     line-height: 16px;
  507.     text-align: center;
  508. }
  510. .newnav {
  511.     height: 42px;
  512.     position: relative;
  513.     color: #000;
  514.     background-color: #F7F9FA;
  515.     border-radius: 12px;
  516.     margin: 0 26px 0 0;
  517.     width: 856px;
  518.     overflow: hidden;
  519. }
  521. .nav-hd li {
  522.     text-align: center;
  523. }
  525. .avatar-wrapper {
  526.     margin-top: 32px;
  527.     width: 60px;
  528.     height: 60px;
  529.     -moz-background-clip: padding;
  530.     background-clip: padding-box;
  531.     background-color: #ff6f06;
  532.     border-radius: 50%;
  533. }
  535. .avatar-wrapper img {
  536.     border-radius: 50%;
  537. }
  539. .member-nick-info{
  540.     font-size: 16px;
  541.     margin-top: 22px;
  542.     display: block;
  543.     line-height: 24px;
  544.     height: 24px;
  545.     text-align: center;
  546. }
  548. .member-nick {
  549.     font-size: 16px;
  550.     font-weight: bold;
  551. }
  553. .member-nick-info {
  554.     font-size: 16px;
  555.     margin-top: 22px;
  556.     display: block;
  557.     line-height: 24px;
  558.     height: 24px;
  559.     text-align: center;
  560. }
  562. .user {
  563.     display: flex;
  564.     flex-direction: column;
  565.     place-items: center;
  566. }
  568. .member-ft {
  569.     margin-top: 13px;
  570.     overflow: hidden;
  571. }
  573. .member-logout {
  574.   height: 42px;
  575. }
  577. .member-logout .btn-login {
  578.     background-image: -webkit-linear-gradient(left,#ff5000 0,#ff6000 100%);
  579.     background-image: -o-linear-gradient(left,#ff5000 0,#ff6000 100%);
  580.     background-image: linear-gradient(to right,#ff5000 0,#ff6000 100%);
  581.     background-repeat: repeat-x;
  582.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff5000', endColorstr='#ffff6000', GradientType=1);
  583.     color: #fff;
  584. }
  586. .btn-register {
  587.     background-image: -webkit-linear-gradient(left,#ff9000 0,#ff7000 100%);
  588.     background-image: -o-linear-gradient(left,#ff9000 0,#ff7000 100%);
  589.     background-image: linear-gradient(to right,#ff9000 0,#ff7000 100%);
  590.     background-repeat: repeat-x;
  591.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff7000', GradientType=1);
  592.     color: #fff;
  593. }
  595. .btn-open {
  596.     color: #FF5000;
  597.     border: 1px solid #FF915E;
  598. }
  600. .member-logout {
  601.     display: flex;
  602. }
  604. .member-logout a {
  605.     line-height: 42px;
  606.     width: 80px;
  607.     margin-right: 10px;
  608.     text-align: center;
  609.     -webkit-border-radius: 21px;
  610.     -webkit-background-clip: padding-box;
  611.     -moz-border-radius: 21px;
  612.     -moz-background-clip: padding;
  613.     border-radius: 21px;
  614.     background-clip: padding-box;
  615.     font-size: 16px;
  616.     font-weight: 700;
  617. }
  619. .user-mytao {
  620.     display: flex;
  621.     overflow: hidden;
  622.     position: relative;
  623.     margin: 30px 0 0 -20px;
  624.     width: 90%;
  625.     place-content: space-between;
  626. }
  628. .mytao-content {
  629.     text-align: center;
  630. }
  632. .iconfont.mytao-icon {
  633.     width: 48px;
  634.     font-size: 24px;
  635.     line-height: 20px;
  636.     text-align: center;
  637.     margin-bottom: 10px;
  638.     display: block;
  639. }
  641. .tbh-user .user-tipmain {
  642.     width: 252px;
  643.     height: 18px;
  644.     overflow: hidden;
  645.     position: relative;
  646.     margin: 36px 0px 0 -50px;
  647. }
  649. .user-mod {
  650.     display: flex;
  651. }
  653. .notice-tip {
  654.     width: 32px;
  655.     height: 18px;
  656.     text-align: center;
  657.     line-height: 18px;
  658.     background-color: #FFEFEF;
  659.     border-radius: 2px;
  660.     color: #FF5000;
  661.     font-size: 12px;
  662.     margin-right: 5px;
  663. }
  665. .rh-title {
  666.     color: #111;
  667.     font-weight: bold;
  668.     font-size: 24px;
  669.     line-height: 24px;
  670. }
  672. .rh-logo {
  673.     height: 20px;
  674.     margin: 4px 0 0 6px;
  675. }
  677. .rh-logo {
  678.     height: 20px;
  679.     margin: 4px 0 0 6px;
  680. }
  681. .tb-recommend {
  682.     width: 1190px;
  683.     padding: 0 19px;
  684. }
  685. .tb-recommend-content {
  686.     margin-top: 20px;
  687.     display: grid;
  688.     gap: 20px;
  689.     grid-template-columns: 372px 372px 372px;
  690.     grid-template-rows: 174px 174px 174px;
  691. }
  693. .tb-recommend-content-item {
  694.     position: relative;
  695.     width: 372px;
  696.     height: 174px;
  697.     margin: 0 0 18px 0;
  698.     overflow: hidden;
  699.     color: #333;
  700.     background-color: #f7f9fa;
  701.     border: 1px solid #f7f9fa;
  702.     -webkit-border-radius: 12px;
  703.     -moz-border-radius: 12px;
  704.     border-radius: 12px;
  705.     cursor: pointer;
  706.     -webkit-transition: all 0.5s;
  707.     -o-transition: all 0.5s;
  708.     -moz-transition: all 0.5s;
  709.     transition: all 0.5s;
  710.     padding-top: 8px;
  711. }
  712. .tb-recommend-content-item .img-wrapper {
  713.     position: absolute;
  714.     width: 150px;
  715.     height: 150px;
  716.     overflow: hidden;
  717.     background-color: rgba(27, 23, 67, 0.03);
  718.     -webkit-border-radius: 10px;
  719.     -moz-border-radius: 10px;
  720.     border-radius: 10px;
  721.     margin-left: 10px;
  722. }
  723. .tb-recommend-content-item .img-wrapper img {
  724.     display: block;
  725.     width: 100%;
  726.     height: 100%;
  727.     -webkit-border-radius: 10px;
  728.     -moz-border-radius: 10px;
  729.     border-radius: 10px;
  730. }
  731. .tb-recommend-content-item .info-wrapper{
  732.     height: 116px;
  733.     margin-left: 162px;
  734.     overflow: hidden;
  735. }
  736. .tb-recommend-content-item .info-wrapper .title {
  737.     display: inline-block;
  738.     max-height: 46px;
  739.     margin: 6px 0 2px 0;
  740.     overflow: hidden;
  741.     color: #333;
  742.     font-size: 16px;
  743.     line-height: 23px;
  744. }
  745. .tb-recommend-content-item .info-wrapper .title img {
  746.     height: 16px;
  747.     margin-top: 3px;
  748.     margin-right: 6px;
  749.     vertical-align: top;
  750. }
  752. .tb-recommend-content-item .info-wrapper .tag-list {
  753.     height: 20px;
  754.     overflow: hidden;
  755.     display: flex;
  756. }
  758. .tag-list .tag-item {
  759.     display: inline-block;
  760.     height: 20px;
  761.     margin-right: 6px;
  762.     padding: 0 4px;
  763.     color: #ff5000;
  764.     font-size: 12px;
  765.     line-height: 18px;
  766.     vertical-align: top;
  767.     border: 1px solid #ff5000;
  768.     -webkit-border-radius: 3px;
  769.     -moz-border-radius: 3px;
  770.     border-radius: 3px;
  771. }
  773. .tb-recommend-content-item .price-wrapper {
  774.     margin-left: 162px;
  775.     color: #ff5000;
  776. }
  777. .price-value {
  778.     display: inline-block;
  779.     font-size: 22px;
  780.     line-height: 22px;
  781. }

效果

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：非常好,布局完成度很高, 继续加油, 要是有个媒体查询就更好了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post