简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >淘宝首页丐版

淘宝首页丐版

皮皮志
皮皮志原创
2022年10月30日 15:01:13328浏览
  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="//at.alicdn.com/t/c/font_3736335_39c47psekpn.css">
  9.     <style>
  10.         @import url('reset.css');
  11.         body{
  12.             background-color: #FF93C4;
  13.         }
  14.  header{
  15.     margin: 0 auto;
  16.     width: 1200px;
  17.  }
  18.     header .up{
  19.         display: grid;
  20.         background-color: #FF77B7;
  21.         border: 1px solid #ff77b7;
  22.         grid-template-columns: 100px 200px 200px 200px 200px 200px ;
  23.         place-content:space-between ;
  24.         gap: 10px;
  25.         place-items: center;
  27.     }
  28.     header .up img{
  29.         width: 100%;
  30.     }
  31.     header .bottom{
  32.         border: 1px solid white;
  33.         display: grid;
  34.         background-color: white;
  35.         grid-template-columns:240px 720px 240px;
  36.         grid-auto-rows: 100px;
  37.         place-content: center;
  38.         place-items: center;
  39.     }
  40.      header .bottom .pic img{
  41.         width: 30%;
  42.         place-self: center;
  43.         margin-left: 120px;
  44.      }
  46.      header .bottom .search [type='text'] {
  47.         width: 740px;
  48.         height: 40px;
  49.         border: 1px solid #FF5000;
  50.         border-radius: 40px;
  51.         margin-top: 32px;
  52.      }
  53.      header .bottom .search button{
  54.         height: 34px;
  55.         width: 72px;
  56.        border: none;
  57.         color: #fff;
  58.        font-size: 18px;
  59.         font-weight: 700;
  60.         border-radius: 40px;
  61.         background-color: #FF5000;
  62.         position: relative;
  63.         left: 663px;
  64.         bottom: 37px;
  65.         cursor: pointer;
  66.      }
  67.      header .bottom .search .bb{
  68.          position: relative;
  69.          left: 25px;
  70.          top: 60px;
  71.      }
  72.      header .bottom .search .keyword{
  73.        position: relative;
  74.      left: 50px;
  75.      bottom: 28px;
  76.      }
  77.      header .bottom .search .keyword a{
  78.        text-decoration: none;
  79.        margin-right: 8px;
  80.       color: #666666;
  81.       font-size: 12px;
  82.      } 
  83.      header .bottom .search .keyword a:hover{
  84.         color: red;
  85.      }
  86.      header .big{
  87.         background-color: white;
  88.         height: 400px;
  89.         width: 1200px;
  90.         display: grid;
  91.         grid-template-columns: 265px 560px 260px;
  92.         grid-template-rows: 40px 300px;
  93.         place-content: space-between;
  94.         padding: 35px 25px 0;
  95.      }
  96.      header .big .fl{
  97.         grid-area: 1/1/3/2;
  98.         background-color: #F7F9FA;
  99.      }
  100.      header .big .fl ul span{
  101.         font-size: 18px;
  102.         font-weight: 600;
  103.         position: relative;
  104.         top: 10px;
  105.         left: 15px;
  106.      }
  107.      header .big .fl li{
  108.         list-style: none;
  109.         margin: 20px 40px;
  110.      }
  111.      header .fl li:hover{
  113.       background-color: #ff5000;
  114.      }
  115.      header .big .fl li a{
  116.         text-decoration: none;
  117.         color: #666666;
  118.      }
  119.      header .big .tm{
  120.         width: 850px;
  121.         height: 40px;
  122.         grid-area: 1/2/4/2;
  123.         background-color: #F7F9FA;
  124.         display: flex;
  125.         place-items: center;
  127.      }
  128.      header .big .tm a{
  129.         text-decoration: none;
  130.         margin-left: 40px;
  131.      }
  132.      header .big .tm a:hover{
  133.         color:#ff5000 ;
  134.      }
  135.      header .big .lb{
  136.         width: 540px;
  137.         height: 310px;
  138.         grid-area:2/2/3/3;
  140.      }
  141.      header .big .lb img{
  142.         width: 100%;
  143.      }
  144.      header .big .xx{
  145.         grid-area: 2/3/2/4;
  146.         height: 300px;
  147.         width: 260px;
  148.         background-color: #F7F9FA;
  149.      }
  150.      header .big .xx .tx{
  151.         margin:0 auto;
  152.         position: relative;
  153.         top: 30px;
  154.         left: 85px;
  155.      }
  156.      header .big .xx .tx img{
  157.         border-radius: 40px;
  158.      }
  159.      header .big .xx .tx p{
  160.         font: size 16px ;
  161.         margin-top: 22px;
  162.         color: #3C3C3C;
  163.         font-weight: 400;
  164.      }
  165.      header .big .xx .btn{
  166.         margin-top: 40px;
  167.         height: 40px;
  168.      }
  169.      header .big .xx .btn button{
  170.         line-height: 40px;
  171.         width: 70px;
  172.         border-radius: 40px;
  173.         cursor: pointer;
  174.         font-size: 16px;
  175.         margin-left: 10px;
  176.      }
  177.      header .big .xx .btn button:first-of-type{
  178.        background-color: #FF5900;
  179.        color: white;
  180.      }
  181.      header .big .xx .btn button:nth-of-type(2){
  182.         background-color: #FF8200;
  183.         color: white;
  184.      }
  185.      header .big .xx .btn button:last-of-type{
  186.         background-color: FFFFFF;
  187.         color: #FF5000;
  188.      }
  189.      header .big .xx .xtb a{
  190.       text-decoration: none;
  191.       color: #3C3C75;
  192.       text-align: center;
  193.       margin: 15px 10px;
  194.       font-weight: 500;
  195.      }
  196.      header .big .xx .xtb p{
  197.      font-size: 10px;
  198.      margin: 15px 1px;
  199.      }
  200.      header .big .xx .xtb{
  201.          display: flex;
  202.          margin-left:10px;
  203.      }
  204.      header .big .xx .rd a{
  205.         text-decoration: none;
  206.         font-size: 12px;
  207.      }
  208.      header .big .xx .rd a:first-of-type{
  209.         border: 1px solid red;
  210.         background-color: #FFEFEF;
  211.         color: #FF5000;
  212.      }
  213.      header .big .xx .rd a:last-of-type{
  214.         color: #666666;
  215.      }
  216.      main{
  217.         width: 1200px;
  218.         margin: 0 auto;
  219.         background-color: white;
  220.      }
  221.      main .head-title{
  222.         padding-top: 50px;
  223.         margin-left: 25px;
  224.      }
  225.      main .head-title span {
  226.         color: #111;
  227.         font-weight: bold;
  228.          font-size: 24px;
  229.         line-height: 24px
  230.      }
  231.      main .head-title img{
  232.         height: 20px;
  233.         margin: 4px 0 0 6px;
  234.      }
  235.      main .list{
  236.             display: grid;
  237.             grid-template-rows: repeat(3,1fr);
  238.             grid-template-columns: repeat(3,1fr);
  239.             height: 600px;
  240.             width: 1200px;
  241.             gap: 10px;
  242.         }
  243.         main  .list .item-link{
  244.             display: inline-block;
  245.           width: 100%;
  246.           height: 100%;
  247.            padding: 11px;
  248.         }
  249.         main .img-wrapper img{
  250.             width: 100%;
  251.         }
  252.         main  .list .img-wrapper{
  253.             position: absolute;
  254. width: 150px;
  255. height: 150px;
  256. overflow: hidden;
  257. background-color: rgba(27, 23, 67, 0.03);
  258. border-radius: 10px;
  259.         }
  260.         main .list .info-wrapper{
  261.             height: 116px;
  262.   margin-left: 162px;
  263.   overflow: hidden;
  264. }
  265. main .list .info-wrapper .title{
  266.     display: inline-block;
  267. max-height: 46px;
  268. margin: 6px 0 2px 0;
  269. overflow: hidden;
  270. color: #333;
  271. font-size: 16px;
  272. line-height: 23px
  273. }
  274. main .list .info-wrapper .tag-list{
  275.     height: 20px;
  276.   overflow: hidden;
  277. }
  278. main .item-link .price-value{
  279.     margin-left: 162px;
  280. color: #ff5000;
  281. font-size: 18px;
  282. }
  283. main .item-link .info-wrapper .tag-list .tag-item{
  284.     display: inline-block;
  285. height: 20px;
  286. margin-right: 6px;
  287. padding: 0 4px;
  288. color: #ff5000;
  289. font-size: 12px;
  290. line-height: 18px;
  291. vertical-align: top;
  292. border: 1px solid #ff5000;
  293. border-radius: 3px;
  294. }
  295.     </style>
  297. </head>
  298. <body>
  299. <header>
  300.     <div class="up">
  301.         <a href=""><img src="/images/tm.png" alt=""></a>
  302.         <a href=""><img src="/images/1.png" alt=""></a>
  303.         <a href=""><img src="/images/2.png" alt=""></a>
  304.         <a href=""><img src="/images/3.png" alt=""></a>
  305.         <a href=""><img src="/images/4.png" alt=""></a>
  306.         <a href=""><img src="/images/5.png" alt=""></a>
  307.     </div>
  308. <div class="bottom">
  309.  <a class="logo" href=""><img src="images/tb.png" alt=""></a>
  310. <div class="search">
  311.       <span class="bb">宝贝&nbsp&nbsp</span>
  312.       <input type="text" placeholder="">
  313.       <button>搜索</button>
  314.       <div class="keyword">
  315.         <a href="">新款连衣裙</a>
  316.         <a href="">四件套</a>
  317.         <a href="">潮流T恤</a>
  318.         <a href="">时尚女鞋</a>
  319.         <a href="">短裤</a>
  320.         <a href="">半身裙</a>
  321.         <a href="">男士外套</a>
  322.         <a href="">墙纸</a>
  323.         <a href="">行车记录仪</a>
  324.         <a href="">新款男鞋</a>
  325.       </div>
  326.     </div>
  327.  <a class="pic" href=""><img src="images/index.png" alt=""></a>
  328. </div>
  329. <div class="big">
  330.     <div class="fl">
  331.         <ul>
  332.         <span>分类</span>
  333. <li>
  334.     <td><a href="">女装 /</a></td>
  335.     <td><a href="">内衣 /</a></td>
  336.     <td><a href="">奢侈品</a></td>
  337. </li>
  338. <li>
  339.     <td><a href="">女鞋 /</a></td>
  340.     <td><a href="">男鞋 /</a></td>
  341.     <td><a href="">箱包</a></td>
  342. </li>
  343. <li>
  344.     <td><a href="">美妆 /</a></td>
  345.     <td><a href="">饰品 /</a></td>
  346.     <td><a href="">洗护</a></td>
  347. </li>
  348. <li>
  349.     <td><a href="">男装 /</a></td>
  350.     <td><a href="">运动 /</a></td>
  351.     <td><a href="">百货</a></td>
  352. </li>
  353. <li>
  354.     <td><a href="">手机 /</a></td>
  355.     <td><a href="">数码 /</a></td>
  356.     <td><a href="">企业礼品</a></td>
  357. </li>
  358. <li>
  359.     <td><a href="">家装 /</a></td>
  360.     <td><a href="">电器 /</a></td>
  361.     <td><a href="">车品</a></td>
  362. </li>
  363. <li>
  364.     <td><a href="">食品 /</a></td>
  365.     <td><a href="">生鲜 /</a></td>
  366.     <td><a href="">母婴</a></td>
  367. </li>
  368. <li>
  369.     <td><a href="">医药 /</a></td>
  370.     <td><a href="">保健 /</a></td>
  371.     <td><a href="">出口</a></td>
  372. </li>
  373. </ul>
  374.     </div>
  375.     <div class="tm">
  376.         <a href="" style="color: #FF0036;">天猫</a> 
  377.         <a href="" style="color: #FF0036;">聚划算</a>
  378.         <a href="" style="color: #33C900;">天猫超市</a>
  379.         <a href="" style="color: #333333;">司法拍卖</a>
  380.         <a href="" style="color: #333333;">飞猪旅行</a>
  381.         <a href="" style="color: #333333;">天天特卖</a>
  382.         <a href="" style="color: #333333;">极有家</a>
  383.         <a href="" style="color: #333333;">淘宝直播</a>
  384.     </div>
  385.     <div class="lb">
  386.     <a href=""><img src="/images/lb.png" alt=""></a>
  387.     </div>
  388.     <div class="xx">
  389.         <div class="tx">
  390.         <a href=""><img src="/images/tx.jpg" alt=""></a>
  391.         <p>HI!你好</p>
  392.     </div>
  393.     <div class="btn">
  394.         <button>登录</button>
  395.         <button>注册</button>
  396.         <button>开店</button>
  397.     </div>
  398.     <div class="iconfont">
  399.         <div class="xtb">
  400.         <a class="icon-shoucang" href="">
  401.             <p> 宝贝收藏</p>
  402.         </a>
  403.         <a class="icon-goumai" href="">
  404.             <p> 买过的店</p>
  405.         </a>
  406.         <a class="icon-dianpu" href="">
  407.             <p> 收藏的店</p>
  408.         </a>
  409.         <a class="icon-wodezuji" href="">
  410.             <p> 我的足迹</p>
  411.         </a>
  412.         </div>
  413.     </div>
  414.     <div class="rd">
  415.         <a href="">热点</a>
  416.         <a href="">淘宝网疫情场景给卖家的指导手册</a>
  417.     </div>
  418.     </div>
  419. </div>
  420. </header>
  422. <main>
  423.     <h3 class="head-title">
  424. <span>猜你喜欢</span>
  425. <img src="/images/gxtj.png" alt="">
  426. </h3>
  427. <div class="list">
  428.    <a href="" class="item-link">
  429.     <div class="img-wrapper">
  430.       <img src="//gw.alicdn.com/bao/uploaded/i4/128981385/O1CN01LjlDFT1M6NL8bQeOw_!!2-saturn_solar.png_300x300q90.jpg_.webp" >
  431.     </div>
  432.   <div class="info-wrapper" >
  433.     <div class="title"><img src="//img.alicdn.com/imgextra/i1/O1CN01rHZjwm1kc1MDCvBIO_!!6000000004703-2-tps-38-20.png">意式岩板梳妆台简约现代小户型化妆桌北欧卧室轻奢收纳化妆台</div>
  434.     <div class="tag-list">
  435.         <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">送运费险</div>
  436.         </div>
  437.   </div>
  438.   <div class="price-wrapper">
  439.     <span class="price-value"><em>¥</em>5500</span>
  440.     </div>
  441. </a>
  442. <a href="" class="item-link">
  443.    <div class="img-wrapper">
  444.      <img src="//gw.alicdn.com/bao/uploaded/i4/128981385/O1CN01LjlDFT1M6NL8bQeOw_!!2-saturn_solar.png_300x300q90.jpg_.webp" >
  445.    </div>
  446.  <div class="info-wrapper" >
  447.    <div class="title"><img src="//img.alicdn.com/imgextra/i1/O1CN01rHZjwm1kc1MDCvBIO_!!6000000004703-2-tps-38-20.png">意式岩板梳妆台简约现代小户型化妆桌北欧卧室轻奢收纳化妆台</div>
  448.    <div class="tag-list">
  449.        <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">送运费险</div>
  450.        </div>
  451.  </div>
  452.  <div class="price-wrapper">
  453.    <span class="price-value"><em>¥</em>5500</span>
  454.    </div>
  455. </a>
  456. <a href="" class="item-link">
  457.    <div class="img-wrapper">
  458.      <img src="//gw.alicdn.com/bao/uploaded/i4/128981385/O1CN01LjlDFT1M6NL8bQeOw_!!2-saturn_solar.png_300x300q90.jpg_.webp" >
  459.    </div>
  460.  <div class="info-wrapper" >
  461.    <div class="title"><img src="//img.alicdn.com/imgextra/i1/O1CN01rHZjwm1kc1MDCvBIO_!!6000000004703-2-tps-38-20.png">意式岩板梳妆台简约现代小户型化妆桌北欧卧室轻奢收纳化妆台</div>
  462.    <div class="tag-list">
  463.        <div class="tag-item" style="color: #FF5000; border-color: #FAB596; background: #FFFFFF">送运费险</div>
  464.        </div>
  465.  </div>
  466.  <div class="price-wrapper">
  467.    <span class="price-value"><em>¥</em>5500</span>
  468.    </div>
  469. </a>
  470.     </div>
  472. </main>
  473. </body>
  474. </html>

代码展示

上一条：grid网格应用案例下一条：Grid /编写淘宝网PC端首页布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多