PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 仿淘宝移动端布局练习

仿淘宝移动端布局练习

茂林
茂林 原创
2023年06月07日 14:45:10 1048浏览

参考课件中的练习目录,仿写页脚与主体

1 . main主体html

  1. <html lang="zh-CN">
  2. <head>
  3. <meta charset="UTF-8" />
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>mobile-taobao</title>
  7. <!-- <link rel="stylesheet" href="inc/header.css" />
  8. <link rel="stylesheet" href="font_icon/iconfont.css" />
  9. <link rel="stylesheet" href="inc/reset.css" />
  10. <link rel="stylesheet" href="inc/main.css" />
  11. <link rel="stylesheet" href="inc/footer.css" /> -->
  12. <link rel="stylesheet" href="inc/modal.css" />
  13. </head>
  14. <body>
  15. <!-- 页眉 -->
  16. <header>
  17. <!-- 1.logo -->
  18. <a href="###" class="logo"><img src="images/taobao.png" alt="" /></a>
  19. <!-- 2.search -->
  20. <a href="###">
  21. <span>寻找宝贝店铺</span>
  22. <span>搜索</span>
  23. </a>
  24. <!-- 3.签到 -->
  25. <a href="###" class="iconfont icon-qiandao-xuanzhong"></a>
  26. </header>
  27. <!-- 主体 -->
  28. <main>
  29. <ul class="navs">
  30. <li>
  31. <a href="###"><img src="/images/navs/tmxb.webp" alt="" /></a>
  32. <a href="###"><span>天猫新品</span></a>
  33. </li>
  34. <li>
  35. <a href="###"><img src="/images/navs/jrbk.webp" alt="" /></a>
  36. <a href="###"><span>今日爆款</span></a>
  37. </li>
  38. <li>
  39. <a href="###"><img src="/images/navs/tmgj.webp" alt="" /></a>
  40. <a href="###"><span>天猫国际</span></a>
  41. </li>
  42. <li>
  43. <a href="###"><img src="/images/navs/fzlx.webp" alt="" /></a>
  44. <a href="###"><span>飞猪旅行</span></a>
  45. </li>
  46. <li>
  47. <a href="###"><img src="/images/navs/tmcx.webp" alt="" /></a>
  48. <a href="###"><span>天猫超市</span></a>
  49. </li>
  50. <li>
  51. <a href="###"><img src="/images/navs/tbch.webp" alt="" /></a>
  52. <a href="###"><span>天猫吃货</span></a>
  53. </li>
  54. <li>
  55. <a href="###"><img src="/images/navs/sqk.webp" alt="" /></a>
  56. <a href="###"><span>省钱卡</span></a>
  57. </li>
  58. <li>
  59. <a href="###"><img src="/images/navs/ltjb.webp" alt="" /></a>
  60. <a href="###"><span>领淘金币</span></a>
  61. </li>
  62. <li>
  63. <a href="###"><img src="/images/navs/alpm.webp" alt="" /></a>
  64. <a href="###"><span>阿里拍卖</span></a>
  65. </li>
  66. <li>
  67. <a href="###"><img src="/images/navs/fl.webp" alt="" /></a>
  68. <a href="###"><span>分类</span></a>
  69. </li>
  70. </ul>
  71. <ul class="entry">
  72. <li class="item">
  73. <div class="titil">
  74. <h3>聚划算</h3>
  75. <span style="background-color: #fe5000">品牌折扣</span>
  76. </div>
  77. <a href="###"><img src="images/items/item-1.webp" alt="" /></a>
  78. <a href="###"><img src="images/items/item-2.webp" alt="" /></a>
  79. </li>
  80. <li class="item">
  81. <div class="titil">
  82. <h3>淘特价</h3>
  83. <span style="background-color: #fe5000">1元秒杀</span>
  84. </div>
  85. <a href="###"><img src="images/items/item-3.webp" alt="" /></a>
  86. <a href="###"><img src="images/items/item-4.webp" alt="" /></a>
  87. </li>
  88. <li class="item">
  89. <div class="titil">
  90. <h3>有好货</h3>
  91. <span style="background-color: #0090ea">好口碑</span>
  92. </div>
  93. <a href="###"><img src="images/items/item-5.webp" alt="" /></a>
  94. <a href="###"><img src="images/items/item-6.webp" alt="" /></a>
  95. </li>
  96. <li class="item">
  97. <div class="titil">
  98. <h3>每日好店</h3>
  99. <span style="background-color: #ff9711">头条</span>
  100. </div>
  101. <a href="###"><img src="images/items/item-7.webp" alt="" /> </a>
  102. <a href="###"><img src="images/items/item-8.webp" alt="" /></a>
  103. </li>
  104. </ul>
  105. <!-- 商品列表 -->
  106. <ul class="list">
  107. <!-- <li class="items">
  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-renminbi_o">18.5</span>
  113. <span>123人已购买</span>
  114. </div>
  115. </div>
  116. </li> -->
  117. <li class="items">
  118. <a href="###"><img src="images/items/item-9.webp" alt="" /></a>
  119. <div class="desc">
  120. <a href="###">商品描述商品描述商品描述商品描述</a>
  121. <div class="price">
  122. <span class="iconfont icon-renminbi_o">18.5</span>
  123. <span>123人已购买</span>
  124. </div>
  125. </div>
  126. </li>
  127. <li class="items">
  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-renminbi_o">18.5</span>
  133. <span>123人已购买</span>
  134. </div>
  135. </div>
  136. </li>
  137. <li class="items">
  138. <a href="###"><img src="images/items/item-11.webp" alt="" /></a>
  139. <div class="desc">
  140. <a href="###">商品描述商品描述商品描述商品描述</a>
  141. <div class="price">
  142. <span class="iconfont icon-renminbi_o">18.5</span>
  143. <span>123人已购买</span>
  144. </div>
  145. </div>
  146. </li>
  147. <li class="items">
  148. <a href="###"><img src="images/items/item-12.webp" alt="" /></a>
  149. <div class="desc">
  150. <a href="###">商品描述商品描述商品描述商品描述</a>
  151. <div class="price">
  152. <span class="iconfont icon-renminbi_o">18.5</span>
  153. <span>123人已购买</span>
  154. </div>
  155. </div>
  156. </li>
  157. <li class="items">
  158. <a href="###"><img src="images/items/item-13.webp" alt="" /></a>
  159. <div class="desc">
  160. <a href="###">商品描述商品描述商品描述商品描述</a>
  161. <div class="price">
  162. <span class="iconfont icon-renminbi_o">18.5</span>
  163. <span>123人已购买</span>
  164. </div>
  165. </div>
  166. </li>
  167. <li class="items">
  168. <a href="###"><img src="images/items/item-14.webp" alt="" /></a>
  169. <div class="desc">
  170. <a href="###">商品描述商品描述商品描述商品描述</a>
  171. <div class="price">
  172. <span class="iconfont icon-renminbi_o">18.5</span>
  173. <span>123人已购买</span>
  174. </div>
  175. </div>
  176. </li>
  177. <li class="items">
  178. <a href="###"><img src="images/items/item-15.webp" alt="" /></a>
  179. <div class="desc">
  180. <a href="###">商品描述商品描述商品描述商品描述</a>
  181. <div class="price">
  182. <span class="iconfont icon-renminbi_o">18.5</span>
  183. <span>123人已购买</span>
  184. </div>
  185. </div>
  186. </li>
  187. <li class="items">
  188. <a href="###"><img src="images/items/item-16.webp" alt="" /></a>
  189. <div class="desc">
  190. <a href="###">商品描述商品描述商品描述商品描述</a>
  191. <div class="price">
  192. <span class="iconfont icon-renminbi_o">18.5</span>
  193. <span>123人已购买</span>
  194. </div>
  195. </div>
  196. </li>
  197. <li class="items">
  198. <a href="###"><img src="images/items/item-17.webp" alt="" /></a>
  199. <div class="desc">
  200. <a href="###">商品描述商品描述商品描述商品描述</a>
  201. <div class="price">
  202. <span class="iconfont icon-renminbi_o">18.5</span>
  203. <span>123人已购买</span>
  204. </div>
  205. </div>
  206. </li>
  207. <li class="items">
  208. <a href="###"><img src="images/items/item-18.webp" alt="" /></a>
  209. <div class="desc">
  210. <a href="###">商品描述商品描述商品描述商品描述</a>
  211. <div class="price">
  212. <span class="iconfont icon-renminbi_o">18.5</span>
  213. <span>123人已购买</span>
  214. </div>
  215. </div>
  216. </li>
  217. <li class="items">
  218. <a href="###"><img src="images/items/item-19.webp" alt="" /></a>
  219. <div class="desc">
  220. <a href="###">商品描述商品描述商品描述商品描述</a>
  221. <div class="price">
  222. <span class="iconfont icon-renminbi_o">18.5</span>
  223. <span>123人已购买</span>
  224. </div>
  225. </div>
  226. </li>
  227. <li class="items">
  228. <a href="###"><img src="images/items/item-20.webp" alt="" /></a>
  229. <div class="desc">
  230. <a href="###">商品描述商品描述商品描述商品描述</a>
  231. <div class="price">
  232. <span class="iconfont icon-renminbi_o">18.5</span>
  233. <span>123人已购买</span>
  234. </div>
  235. </div>
  236. </li>
  237. <li class="items">
  238. <a href="###"><img src="images/items/item-21.webp" alt="" /></a>
  239. <div class="desc">
  240. <a href="###">商品描述商品描述商品描述商品描述</a>
  241. <div class="price">
  242. <span class="iconfont icon-renminbi_o">18.5</span>
  243. <span>123人已购买</span>
  244. </div>
  245. </div>
  246. </li>
  247. <li class="items">
  248. <a href="###"><img src="images/items/item-22.webp" alt="" /></a>
  249. <div class="desc">
  250. <a href="###">商品描述商品描述商品描述商品描述</a>
  251. <div class="price">
  252. <span class="iconfont icon-renminbi_o">18.5</span>
  253. <span>123人已购买</span>
  254. </div>
  255. </div>
  256. </li>
  257. </ul>
  258. </main>
  259. <!-- 页脚 -->
  260. <footer>
  261. <a href="###" class="iconfont icon-taobao"></a>
  262. <a href="###">
  263. <span class="iconfont icon-gouwuche"></span>
  264. <span>购物车</span>
  265. </a>
  266. <a href="###">
  267. <span class="iconfont icon-wode"></span>
  268. <span>我的淘宝</span>
  269. </a>
  270. </footer>
  271. </body>
  272. </html>

2.main css

  1. .navs {
  2. background: #fff;
  3. margin: 0.1rem;
  4. padding-bottom: 0.1rem;
  5. display: grid;
  6. grid-template-columns: repeat(5, 1fr);
  7. gap: 0.05rem;
  8. border-radius: 0.2rem;
  9. }
  10. .navs > li {
  11. display: flex;
  12. flex-flow: column nowrap;
  13. place-items: center;
  14. background: #fff;
  15. border-radius: 0.2rem;
  16. }
  17. main > .entry {
  18. display: grid;
  19. grid-template-columns: repeat(2, 1fr);
  20. margin: 0.1rem;
  21. border-radius: 0.2rem;
  22. }
  23. main > .entry .item {
  24. display: grid;
  25. background: #fff;
  26. padding: 0.1rem;
  27. grid-template-columns: repeat(2, 1fr);
  28. }
  29. main > .entry .item .titil {
  30. grid-column: span 2;
  31. display: flex;
  32. margin-left: 0.15rem;
  33. }
  34. main > .entry .item:first-child {
  35. border-right: 0.01rem solid #f4f4f4;
  36. border-bottom: 0.01rem solid #f4f4f4;
  37. border-top-left-radius: 0.2rem;
  38. }
  39. main > .entry .item:nth-child(2) {
  40. border-top-right-radius: 0.2rem;
  41. border-bottom: 0.01rem solid #f4f4f4;
  42. }
  43. main > .entry .item:nth-child(3) {
  44. border-right: 0.01rem solid #f4f4f4;
  45. border-bottom-left-radius: 0.2rem;
  46. }
  47. main > .entry .item:last-child {
  48. border-bottom-right-radius: 0.2rem;
  49. }
  50. main > .entry .item img {
  51. border-radius: 0.2rem;
  52. }
  53. main > .entry .item .titil span {
  54. color: #fff;
  55. font-size: xx-small;
  56. text-align: center;
  57. padding: 0.05rem 0.03rem;
  58. /* background-color: #fe5003; */
  59. border-radius: 0.05rem;
  60. }
  61. /* 商品列表 */
  62. main .list {
  63. display: grid;
  64. grid-template-columns: repeat(2, 1fr);
  65. margin: 0.1rem;
  66. gap: 0.05rem;
  67. border-radius: 0.2rem;
  68. }
  69. main .list .items {
  70. background-color: #fff;
  71. border-radius: 0.2rem;
  72. }
  73. main .list a img {
  74. border-top-left-radius: 0.2rem;
  75. border-top-right-radius: 0.2rem;
  76. }
  77. main .list .items a:first-child + * {
  78. margin: 0.1rem;
  79. }
  80. main .list .desc {
  81. /* padding: 0 0.05rem; */
  82. border-bottom-left-radius: 0.2rem;
  83. /* background-color: aqua; */
  84. }
  85. main .list .desc .price .iconfont {
  86. color: #ff5000;
  87. font-size: large;
  88. }
  89. main .list .desc .price span:last-child {
  90. color: #999;
  91. font-size: x-small;
  92. }
  1. footer {
  2. background-color: #f4f4f4;
  3. display: grid;
  4. grid-template-columns: repeat(3, 1fr);
  5. /* place-content: center; */
  6. place-items: center;
  7. border-top: 0.01rem solid #f4f4f4;
  8. }
  9. footer a:first-child {
  10. font-size: 0.25rem;
  11. color: #ff5000;
  12. }
  13. footer a:first-child + * {
  14. display: grid;
  15. place-items: center;
  16. }
  17. footer a:last-child {
  18. display: grid;
  19. place-items: center;
  20. }
  21. footer a .iconfont {
  22. font-size: xx-large;
  23. }
  24. footer a span {
  25. font-size: small;
  26. padding: 0.01rem;
  27. }

4. header css

  1. header {
  2. margin: 0 0.1rem;
  3. display: grid;
  4. grid-auto-flow: column;
  5. grid-template-columns: 0.58rem 1fr 0.35rem;
  6. background-color: #f4f4f4;
  7. place-items: center;
  8. gap: 0.1rem;
  9. }
  10. header > a:first-child {
  11. margin-top: 0.04rem;
  12. margin-left: 0.1rem;
  13. }
  14. header > a:first-child + * {
  15. display: flex;
  16. place-content: space-between;
  17. border: 0.01rem solid #ff5000;
  18. border-radius: 0.25rem;
  19. height: 0.35rem;
  20. width: 100%;
  21. place-items: center;
  22. }
  23. header > a:first-child + * > span:first-child {
  24. margin-left: 0.15rem;
  25. }
  26. header > a:first-child + * > span:last-child {
  27. padding: 0.05rem 0.2rem;
  28. margin-right: 0.01rem;
  29. border-radius: 0.25rem;
  30. /* 背景色渐变效果 */
  31. background: linear-gradient(to left, #ff5000, #ff8d0e);
  32. color: #fff;
  33. }
  34. header > a:last-child {
  35. font-size: 0.2rem;
  36. color: #ff9c34;
  37. }

4. reset css

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. html {
  7. font-size: calc(100vw / 3.75);
  8. }
  9. body {
  10. font-size: 0.16rem;
  11. background: #f3f3f3;
  12. }
  13. /* 图片撑满父容器 */
  14. img {
  15. width: 100%;
  16. }
  17. /* 媒体查询 */
  18. @media (max-width: 320px) {
  19. html {
  20. font-size: 0.85px;
  21. }
  22. }
  23. @media (min-width: 640px) {
  24. html {
  25. font-size: 170px;
  26. }
  27. }
  28. header,
  29. footer {
  30. position: fixed;
  31. height: 0.5rem;
  32. }
  33. header {
  34. top: 0;
  35. left: 0;
  36. right: 0;
  37. z-index: 9;
  38. }
  39. footer {
  40. bottom: 0;
  41. left: 0;
  42. right: 0;
  43. z-index: 9;
  44. }
  45. main {
  46. position: relative;
  47. top: 0.5rem;
  48. min-height: 20rem;
  49. bottom: 0.5rem;
  50. }
  51. a {
  52. text-decoration: none;
  53. color: #666;
  54. }
  55. li {
  56. list-style: none;
  57. }

5.最终呈现的页面

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