Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 用grid和flex实现淘宝的移动端首页布局
Blogger Information
Blog 25
fans 0
comment 0
visits 13673
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
用grid和flex实现淘宝的移动端首页布局
安超
Original
790 people have browsed it

1.实现淘宝的移动端首页布局,主要掌握几个方面

a. grid 默认状态为垂直向布局,flex默认状态为水平向布局
b. 注意两种布局模式下place-content和place-items的区别.

2.淘宝首页移动端布局的html代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <link rel="stylesheet" href="taobao-1101-1.css">
  8.     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3746153_xhvv3nimlgp.css">
  9.     <title>我自己的模拟淘宝手机端页面</title>
  10. </head>
  11. <body>
  12.     <!-- 头部信息 -->
  13.     <header>
  14.     <a href="https://www.taobao.com" class="logo"><img src="./taobao.png" alt=""> </a>
  15.     <a href="#" class="search">
  16.         <span>输入搜索的内容</span>
  17.         <span>搜索</span>
  18.     </a>
  19.     <a href="#" class="iconfont icon-register"> </a>
  20.     </header>
  22.     <!-- 主体信息 -->
  23.     <main>
  24.       <ul class="navs">
  25.         <li class="item">
  26.             <a href=""><img src="images/navs/tmxb.webp" alt="" /></a>
  27.             <a href="">天猫新品</a>
  28.           </li>
  29.           <li class="item">
  30.             <a href=""><img src="images/navs/jrbk.webp" alt="" /></a>
  31.             <a href="">今日爆款</a>
  32.           </li>
  33.           <li class="item">
  34.             <a href=""><img src="images/navs/tmgj.webp" alt="" /></a>
  35.             <a href="">天猫国际</a>
  36.           </li>
  37.           <li class="item">
  38.             <a href=""><img src="images/navs/fzlx.webp" alt="" /></a>
  39.             <a href="">飞猪旅行</a>
  40.           </li>
  41.           <li class="item">
  42.             <a href=""><img src="images/navs/tmcx.webp" alt="" /></a>
  43.             <a href="">天猫超市</a>
  44.           </li>
  45.           <li class="item">
  46.             <a href=""><img src="images/navs/tbch.webp" alt="" /></a>
  47.             <a href="">淘宝吃货</a>
  48.           </li>
  49.           <li class="item">
  50.             <a href=""><img src="images/navs/sqk.webp" alt="" /></a>
  51.             <a href="">省钱卡</a>
  52.           </li>
  53.           <li class="item">
  54.             <a href=""><img src="images/navs/ltjb.webp" alt="" /></a>
  55.             <a href="">领淘金币</a>
  56.           </li>
  57.           <li class="item">
  58.             <a href=""><img src="images/navs/alpm.webp" alt="" /></a>
  59.             <a href="">阿里拍卖</a>
  60.           </li>
  61.           <li class="item">
  62.             <a href=""><img src="images/navs/fl.webp" alt="" /></a>
  63.             <a href="">分类</a>
  64.           </li>
  65.       </ul>
  66.       <!-- 快捷入口 -->
  67.       <ul class="entry">
  68.        <li class="item">
  69.         <div class="title">
  70.           <h3>聚划算</h3>
  71.           <span>品牌折扣</span>
  72.         </div>
  73.         <a href=""><img src="images/items/item-1.webp" alt=""> </a>
  74.         <a href=""><img src="images/items/item-2.webp" alt=""></a>
  75.        </li>
  76.       <!-- 第二个 -->
  77.       <li class="item">
  78.         <div class="title">
  79.           <h3>天天特卖</h3>
  80.           <span>1元秒杀</span>
  81.         </div>
  82.         <a href=""><img src="images/items/item-3.webp" alt="" /></a>
  83.         <a href=""><img src="images/items/item-4.webp" alt="" /></a>
  84.        </li>
  85. <!-- 第三个 -->
  86. <li class="item">
  87.   <div class="title">
  88.     <h3>有好货</h3>
  89.     <span>好口碑</span>
  90.   </div>
  91.   <a href=""><img src="images/items/item-5.webp" alt="" /></a>
  92.   <a href=""><img src="images/items/item-6.webp" alt="" /></a>
  93.  </li>
  94. <!-- 第四个 -->
  95. <li class="item">
  96.   <div class="title">
  97.     <h3>每日好店</h3>
  98.     <span>特色</span>
  99.   </div>
  100.   <a href=""><img src="images/items/item-7.webp" alt="" /></a>
  101.   <a href=""><img src="images/items/item-8.webp" alt="" /></a>
  102.  </li>
  103. </ul>
  104. <!-- 产品入口 -->
  105. <ul class="product">
  106.   <!-- 第一个产品 -->
  107.   <li class="item">
  108.     <a href=""><img src="images/items/item-9.webp" alt=""></a>
  109.     <div class="desc">
  110.     <a href="">产品简介产品简介产品简介产品简介</a>
  111.     <div class="price">
  112.     <span class="iconfont icon-money">20</span>
  113.     <span>200人已经购买</span>
  114.   </div>
  115.   </div>
  116.   </li>
  117.   <li class="item">
  118.     <a href=""><img src="images/items/item-11.webp" alt=""></a>
  119.     <div class="desc">
  120.     <a href="">产品简介产品简介产品简介产品简介</a>
  121.     <div class="price">
  122.     <span class="iconfont icon-money">3</span>
  123.     <span>22人已经购买</span>
  124.   </div>
  125.   </div>
  126.   </li>
  127.   <li class="item">
  128.     <a href=""><img src="images/items/item-10.webp" alt=""></a>
  129.     <div class="desc">
  130.     <a href="">产品简介产品简介产品简介产品简介</a>
  131.     <div class="price">
  132.     <span class="iconfont icon-money">14</span>
  133.     <span>23人已经购买</span>
  134.   </div>
  135.   </div>
  136.   </li>
  137. </ul>
  138.     </main>
  139.     <!-- 尾部信息 -->
  140.     <footer>
  141.      <a href="" class="iconfont icon-taobao"></a>
  142.      <a href="">
  143.       <span class="iconfont icon-gouwuchekong "></span>
  144.       <span>购物车</span>
  145.      </a>
  146.      <a href="">
  147.       <span class="iconfont icon-taobao-square-fill"></span>
  148.       <span>我的淘宝</span>
  149.      </a>
  150.     </footer>
  151. </body>
  152. </html>
  1. /* 网页通用设置 */
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. /* 针对手机移动端 */
  8. html{
  9.     font-size: calc(100vw / 3.75);
  10. }
  12. body{
  13.     margin: 0;
  14.     padding: 0;
  15.     font-size: 0.13rem;
  16.     margin: auto;
  17.     background-color: #f5f5f5;
  18. }
  20. /* 主体通用设置 */
  21. body img{
  22.     width:100%;
  23. }
  25. body a{
  26.     text-decoration: none;
  27. }
  28. body li{
  29.     list-style: none;
  30. }
  31. /* 头部和尾部设置为grid样式 */
  32. header,footer{
  33.     display: grid;
  34. }
  35. /* 头部设置 头部为三列一行 */
  36. header{
  37.     grid-template-columns: 0.6rem 1fr 0.33rem;
  38.     height: 0.3rem;
  39.     place-items:center;
  40.     position:fixed;
  41.     top: 0;
  42.     right: 0;
  43.     left: 0;
  44.     z-index: 1;   /* 需要z-index,否则的话，main向上滚动时，会显示出来*/
  45.     border-radius: 0 0 0.1rem 0.1rem;
  46. }
  47. footer{
  48.     grid-template-columns: 0.6rem 1fr 0.33rem;
  49.     height: 0.3rem;
  50.     place-items:center;
  51.     position:fixed;
  52.     bottom: 0;
  53.     right: 0;
  54.     left: 0;
  55.     z-index: 2;
  56.     border-radius: 0 0 0.1rem 0.1rem;
  57. }
  58. /* 头部第一列设置 */
  59. header .logo{
  60.     padding-left: 0.06rem;
  61. }
  62. header .logo img{
  63.     height: 0.13rem;
  64. }
  65. /* 中间search 框的设置 */
  66. header .search{
  67.     width: 100%; /* 必须有这个，否则的话，seach 框会变小*/
  68.     border: 1px solid red;
  69.     border-radius: 10px;
  70.     display: flex;
  71.     place-content: space-between;
  72. }
  74. header a.search span:last-of-type{
  75.     margin-right: 10px;
  76.     border-radius: 0.05rem;
  77.     padding-left: 0.1rem;
  78.     padding-right: 0.05rem;
  79.     background: linear-gradient(to left,#66ffff,#66ff00 );
  81. }
  83. header a.search{
  84.     text-decoration: none;
  85. }
  87. /* header最有一列图片的设置 */
  88. header  .iconfont.icon-register{
  89.     height: 0.1rem;
  90.     padding-right: 0.1rem;
  91.     color:red;
  92. }
  96. /* 以下为main的css样式 */
  97. main{
  98.     /* height: 2000px; */
  99.     /* overflow: hidden; */
  100.     /* margin-top: 0.12rem; */
  101.     /* margin-bottom: 0.4rem; */
  102.     padding-bottom: 0.2rem;
  103.     padding-top: 0.12rem;
  105. }
  106. /* 快捷方式入口 */
  107. main .navs{
  108.         /* 布局方式为grid */
  109.         display: grid;
  110.         grid-template-columns: repeat(5,1fr);
  111.         place-items: center;
  112.         margin: 0.2rem;
  113.         border-radius: 0.1rem;
  114.         background-color:#ffffff;
  115. }
  116. main .navs .item{
  117.     list-style: none;
  118.     display: grid;
  119.     place-content: center;
  120.     place-items: center;  
  121. }
  123. /* 第二个入口 */
  124. main .entry{
  125.     margin: 0.2rem;
  126.     border-radius: 0.1rem;
  127.     display: grid;
  128.     grid-template-columns: repeat(2,1fr);
  129.     grid-template-rows: repeat(2,1fr);
  130.     background-color: #ffffff;
  132. }
  133. main .entry .item{
  134.    padding: 0.2rem;;
  135.     display: grid;
  136. }
  137. main .entry .item .title{
  138.     grid-column-start: 1;
  139.     grid-column-end: 3;
  140.     display: flex;
  141.     place-items: center; /* 让h3和span垂直对齐*/
  142. }
  143. main .entry .item .title span{
  144.     color:white;
  145.     margin-left: 0.1rem;
  146.     padding: 0.02rem;
  147.     background-color:orangered;
  148.     border-radius: 0.1rem;
  149. }
  151. main .entry .item:nth-of-type(3) .title span{ /* 设置第三个的背景色*/
  152.     background-color:deepskyblue ;
  153. }
  154. main .entry .item:nth-of-type(4) .title span{ /* 设置第四个的背景色*/
  155.     background-color:orange ;
  156. }
  158. /* 商品列表 */
  159. main .product{
  160.     margin: 0.2rem;
  161.     border-radius: 0.1rem;
  162.     display: grid;
  163.     gap: 0.1rem;
  164.     grid-template-columns: repeat(2,1fr);
  165.     background-color: #ffffff;
  166. }
  167. main .product .item .desc{
  168.     display: grid;
  169. }
  170. main .product .item .desc span:first-of-type{
  171.     color:brown;
  172.     font-size: smaller;
  173. }
  174. main .product .item .desc span:last-of-type{
  175.     margin-left: 0.1rem;
  176. }
  178. /* 底部部分 */
  179. footer{
  180.     grid-template-columns: repeat(3,1fr);
  181.     height: 0.4rem;
  182.     background-color: #66ff00;
  183. }
  184. footer .iconfont.icon-taobao{
  185.     font-size:0.3rem;
  186.     color: red;
  187. }
  188. footer a{
  189.     display: grid;
  190.     place-items: center;
  191. }
  192. /* 媒体端设置 */
  193. @media (max-width:320px){
  194.     html{
  195.         font-size: 85px;
  196.     }
  197. }
  198. @media (min-width:640px){
  199.     html{
  200.         font-size: 170px;
  201.     }
  202. }

3.效果图如下所示:

淘宝首页的移动端实现

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