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

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

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

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

3.效果图如下所示:

淘宝首页的移动端实现

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议