search

博客列表 >用grid和flex实现淘宝的移动端首页布局

用grid和flex实现淘宝的移动端首页布局

安超
安超原创
2022年11月05日 13:59:43792浏览

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.效果图如下所示:

淘宝首页的移动端实现

上一条：不同的数组和分支的类型与访问方式下一条：8、【转载】Spring Boot默认配置文件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多