Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 淘宝首页框架
Blogger Information
Blog 24
fans 0
comment 0
visits 10895
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
淘宝首页框架
皮皮志
Original
373 people have browsed it
  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>Document</title>
  8.     <link rel="stylesheet" href="reset.css">
  9.     <style>
  10.         .wrap header .top{
  11.     width: 100vw;
  12.     height: 36px;
  13.     z-index: 10000;
  14.     background-color: #f5f5f5;
  15.     border-bottom: 1px solid #eee;
  16. }
  17. .wrap header .top .content{
  18.     width: 1200px;
  19.     height: inherit;
  20.     background-color: wheat;
  21.     margin: auto;
  22. }
  24. .wrap header .entry{
  25.     height: 100px;
  26.     padding: 15px;
  27. }
  28. .wrap header .entry .content {
  29.     width: 1200px;
  30.     height: inherit;
  31.     background-color: cyan;
  32.     margin: auto;
  33.     display: grid;
  34.     grid-template-columns: 80px repeat(5, 1fr);
  35.     grid-auto-rows: 80px;
  36.     gap: 10px;
  37.     padding: 10px;
  38.   }
  39.   .wrap header .entry .content .item {
  40.     background-color: lightcyan;
  41.     border-radius: 15px;
  42.   }
  44.   .wrap main {
  45.     width: 1200px;
  46.     min-height: 1000px;
  48.     margin: 20px auto;
  50.     padding: 20px;
  52.     background-color: lightgreen;
  53.   }
  54.   /* 搜索框 */
  55.   .wrap main .search {
  56.     height: 88px;
  57.     display: grid;
  58.     grid-template-columns: 190px 1fr 90px;
  59.     gap: 10px;
  61.     /* 粘性定位 */
  62.     position: sticky;
  63.     top: 0;
  64.   }
  66.   .wrap main .search .item {
  67.     background-color: lightpink;
  68.   }
  70.   /* 主体导航区 */
  72.   main .navs {
  73.     height: 423px;
  74.     margin: 20px 0;
  75.     display: grid;
  76.     grid-template-columns: 270px 1fr;
  77.     gap: 10px;
  78.   }
  79.   main .navs > * {
  80.     background-color: lightskyblue;
  81.   }
  83.   main .navs > .user {
  84.     display: grid;
  85.     /* 2行2列 */
  86.     grid-template-columns: 564px 1fr;
  87.     grid-template-rows: 42px 1fr;
  88.     gap: 10px;
  89.   }
  91.   main .navs > .user > * {
  92.     background-color: lightcyan;
  93.   }
  94.   main .navs > .user .user-top {
  95.     grid-column: span 2;
  96.   }
  98.   /* 主体标题区 */
  100.   main .title {
  101.     background-color: lightcyan;
  102.     display: flex;
  103.     place-items: center;
  104.   }
  106.   main .title .tag {
  107.     background: linear-gradient(to left, orangered, orange);
  108.     color: white;
  109.     border-radius: 5px;
  110.     padding: 0 5px;
  111.     margin-left: 6px;
  112.     cursor: default;
  113.   }
  115.   /* 主体: 商品列表 */
  117.   main .list {
  118.     margin: 20px 0;
  120.     display: grid;
  121.     grid-template-columns: repeat(3, 1fr);
  122.     grid-auto-rows: 172px;
  123.     gap: 10px;
  124.   }
  125.   main .list > .item {
  126.     background-color: lightcyan;
  127.     border-radius: 6px;
  129.     display: grid;
  130.     grid-template-columns: 150px 1fr;
  131.     gap: 10px;
  132.     padding: 10px;
  133.   }
  135.   main .list > .item > * {
  136.     background-color: wheat;
  137.     border-radius: 6px;
  138.   }
  140.   main .list > .item img {
  141.     width: 100%;
  142.     border-radius: 6px;
  143.   }
  145.   main .list .item .detail {
  146.     display: grid;
  147.     grid-template-rows: 1fr 25px;
  149.     padding: 10px;
  150.     place-content: space-between;
  151.   }
  153.   main .list .item .detail > * {
  154.     font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;;
  155.   }
  156.   main .list .item .detail .desc{
  157.     font-size: 16px;
  158.     line-height: 23px;
  159.     max-height: 46px;
  160.     margin: 6px 0 2px 0;
  161.     overflow: hidden;
  162.   }
  163.   main .list .item .detail .price{
  164.     font-size: 22px;
  165.     line-height: 22px;
  166.     color: #ff5000;
  167.   }
  170.     </style>
  171. </head>
  172. <body>
  173.     <div class="wrap">
  174.         <header>
  175.             <!-- 1. 顶部导航 -->
  176.           <div class="top">
  177.             <div class="content">顶部导航</div>
  178.           </div>
  179.           <!-- 2.快速入口 -->
  180.           <div class="entry">
  181.             <div class="content">
  182.               <div class="item"></div>
  183.               <div class="item"></div>
  184.               <div class="item"></div>
  185.               <div class="item"></div>
  186.               <div class="item"></div>
  187.               <div class="item"></div>
  188.             </div>
  189.           </div>
  190.         </header>
  191.       <!-- (2) 主体 -->
  192.       <main>
  193.         <!-- 1. 搜索框 -->
  194.         <div class="search">
  195.           <div class="item logo">logo</div>
  196.           <div class="item input">搜索框</div>
  197.           <div class="item ewm">二维码</div>
  198.         </div>
  200.         <!-- 2. 导航区 -->
  201.         <div class="navs">
  202.           <!-- 1. 左侧分类 -->
  203.           <div class="cate">左侧大分类</div>
  204.           <!-- 2. 在侧轮播图与用户信息 -->
  205.           <div class="user">
  206.             <!-- 1. 顶部导航 -->
  207.             <div class="user-top">上部选项</div>
  208.             <!-- 左侧轮播图 -->
  209.             <div class="slider">轮播图</div>
  210.             <!-- 右侧用户信息 -->
  211.             <div class="user-info">用户信息</div>
  212.           </div>
  213.         </div>
  215.         <!-- 3. 标题区 -->
  216.         <div class="title">
  217.           <h2>猜你喜欢</h2>
  218.           <div class="tag">个性推荐</div>
  219.         </div>
  221.         <!-- 4. 商品列表 -->
  222.         <div class="list">
  223.           <div class="item">
  224.             <a href=""><img src="" alt="" /></a>
  225.             <div class="detail">
  226.               <div class="desc">白灼汁白灼大虾凉拌好吃的零食网红2022新款排行榜爆款酱油调料</div>
  227.               <div class="price">9.9</div>
  228.             </div>
  229.           </div>
  230.           <div class="item">
  231.             <a href=""><img src="" alt="" /></a>
  232.             <div class="detail">
  233.               <div class="desc">30ml雅诗兰黛dw的粉底液泵头原装持妆粉按压专用真空按压嘴喷头</div>
  234.               <div class="price">5.6</div>
  235.             </div>
  236.           </div>
  237.           <div class="item">
  238.             <a href=""><img src="" alt="" /></a>
  239.             <div class="detail">
  240.               <div class="desc">客厅灯现代简约大气led吸顶灯广东中山智能灯具全屋套餐组合主灯</div>
  241.               <div class="price">367.2</div>
  242.             </div>
  243.           </div>
  245.         </div>
  246.       </main>
  247.     </div>
  248. </body>
  249. </html>

代码如下

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