简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >淘宝移动端布局实践

淘宝移动端布局实践

P粉317509817
P粉317509817原创
2022年03月30日 16:19:09748浏览

淘宝移动端布局实践

页面html代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>仿淘宝移动端首页-2</title>
  9.     <link rel="stylesheet" href="font_icon/iconfont.css" />
  10.     <link rel="stylesheet" href="css/reset.css" />
  11.     <link rel="stylesheet" href="css/header.css" />
  12.     <link rel="stylesheet" href="css/footer.css" />
  13.     <link rel="stylesheet" href="css/main.css" />
  14. </head>
  16. <body>
  17.     <!-- 头部 -->
  18.     <header>
  19.         <!-- 顶部 -->
  20.         <div class="top">
  21.             <!-- logo -->
  22.             <div class="logo iconfont icon-shejiaotubiao-08"></div>
  23.             <!-- 搜索框 -->
  24.             <div class="search">
  25.                 <div class="keys">
  26.                     <span class="iconfont icon-fangdajing"></span>
  27.                     <span>寻找宝贝店铺</span>
  28.                 </div>
  29.             </div>
  30.         </div>
  31.         <!-- 轮播图 -->
  32.         <div class="slider">
  33.             <a href=""><img src="images/banner/banner1.jpg" alt="" /></a>
  34.         </div>
  35.         <!-- 导航组 -->
  36.         <ul class="nav">
  37.             <li class="item">
  38.                 <a href=""><img src="images/nav/nav6.png" alt="" /></a>
  39.                 <a href="">天猫新品</a>
  40.             </li>
  41.             <li class="item">
  42.                 <a href=""><img src="images/nav/nav3.png" alt="" /></a>
  43.                 <a href="">今日爆款</a>
  44.             </li>
  45.             <li class="item">
  46.                 <a href=""><img src="images/nav/nav1.png" alt="" /></a>
  47.                 <a href="">天猫超市</a>
  48.             </li>
  49.             <li class="item">
  50.                 <a href=""><img src="images/nav/nav2.png" alt="" /></a>
  51.                 <a href="">充值中心</a>
  52.             </li>
  53.             <li class="item">
  54.                 <a href=""><img src="images/nav/nav5.png" alt="" /></a>
  55.                 <a href="">机票酒店</a>
  56.             </li>
  57.             <li class="item">
  58.                 <a href=""><img src="images/nav/nav8.png" alt="" /></a>
  59.                 <a href="">金币庄园</a>
  60.             </li>
  61.             <li class="item">
  62.                 <a href=""><img src="images/nav/nav7.png" alt="" /></a>
  63.                 <a href="">阿里拍卖</a>
  64.             </li>
  65.             <li class="item">
  66.                 <a href=""><img src="images/nav/nav4.png" alt="" /></a>
  67.                 <a href="">分类</a>
  68.             </li>
  69.             <li class="item">
  70.                 <a href=""><img src="images/nav/nav7.png" alt="" /></a>
  71.                 <a href="">阿里拍卖</a>
  72.             </li>
  73.             <li class="item">
  74.                 <a href=""><img src="images/nav/nav4.png" alt="" /></a>
  75.                 <a href="">分类</a>
  76.             </li>
  77.         </ul>
  78.     </header>
  79.     <!-- 主体 -->
  80.     <main style="height: 1600px">
  81.         <!-- 1. 聚划算 -->
  82.         <div class="top">
  83.             <div class="item jhs">
  84.                 <div class="box">
  85.                     <h3 class="title">聚划算</h3>
  86.                     <div class="desc">
  87.                         <h4>品牌折扣</h4>
  88.                         <img src="images/items/item1.png" alt="" />
  89.                     </div>
  90.                 </div>
  91.                 <div class="box">
  92.                     <!-- 用实体空格表示占位符 -->
  93.                     <h3 class="title">&nbsp;</h3>
  94.                     <div class="desc">
  95.                         <h4>划算好货</h4>
  96.                         <img src="images/items/item2.png" alt="" />
  97.                     </div>
  98.                 </div>
  99.                 <div class="box">
  100.                     <h3 class="title">淘抢购</h3>
  101.                     <div class="desc">
  102.                         <h4>限时半价</h4>
  103.                         <img src="images/items/item3.png" alt="" />
  104.                     </div>
  105.                 </div>
  106.                 <div class="box">
  107.                     <h3 class="title">天天特价</h3>
  108.                     <div class="desc">
  109.                         <h4>9.9包邮</h4>
  110.                         <img src="images/items/item4.png" alt="" />
  111.                     </div>
  112.                 </div>
  113.             </div>
  115.             <div class="item right">
  116.                 <div class="box">
  117.                     <h3 class="title">淘宝直播 <span class="tag" style="background-color: red">LIVE</span></h3>
  118.                     <div class="detail">
  119.                         <div class="left">
  120.                             <span class="title">好物传送门</span>
  121.                             <img src="images/items/item5.png" alt="" />
  122.                         </div>
  123.                         <div class="right">
  124.                             <img src="images/items/item6.png" alt="" />
  125.                         </div>
  126.                     </div>
  127.                 </div>
  128.                 <div class="box">
  129.                     <h3 class="title">有好货&nbsp;<span class="tag" style="background-color: skyblue">品质好物</span></h3>
  130.                     <div class="detail">
  131.                         <div class="left">
  132.                             <span class="title" style="color: skyblue">全民口碑推荐</span>
  133.                             <img src="images/items/item7.png" alt="" />
  134.                         </div>
  135.                         <div class="right">
  136.                             <img src="images/items/item21.png" alt="" />
  137.                         </div>
  138.                     </div>
  139.                 </div>
  140.             </div>
  141.             <div class="item right">
  142.                 <div class="box">
  143.                     <h3 class="title">每日好店 <span class="tag" style="background-color: orange">精选</span></h3>
  144.                     <div class="detail">
  145.                         <div class="left">
  146.                             <span class="title">深挖藏的店</span>
  147.                             <img src="images/items/item9.png" alt="" />
  148.                         </div>
  149.                         <div class="right">
  150.                             <img src="images/items/item10.png" alt="" />
  151.                         </div>
  152.                     </div>
  153.                 </div>
  154.             </div>
  155.             <div class="item right">
  156.                 <div class="box">
  157.                     <h3 class="title">哇哦视频<span class="tag" style="background-color: orange">亲测</span></h3>
  158.                     <div class="detail">
  159.                         <div class="left">
  160.                             <span class="title">粉丝都爱看</span>
  161.                             <img src="images/items/item11.png" alt="" />
  162.                         </div>
  163.                         <div class="right">
  164.                             <img src="images/items/item12.png" alt="" />
  165.                         </div>
  166.                     </div>
  167.                 </div>
  168.             </div>
  169.             <!-- 底部滚动显示文本 -->
  170.             <div class="item footer">
  171.                 <div class="title">淘宝头条</div>
  172.                 <div class="content">
  173.                     <span class="type">评测</span>
  174.                     <span style="font-size: larger">五款最强的防******</span>
  175.                 </div>
  176.             </div>
  177.         </div>
  178.         <!-- 2. 商品列表 -->
  179.         <!-- 商品列表 -->
  180. <div class="list">
  181.     <div class="title">----- 你可能还喜欢 -----</div>
  182.     <div class="block">
  183.     <div class="unit">
  184.         <div class="img">
  185.             <img src="images/items/item8.webp" alt="" />
  186.         </div>
  187.         <div class="detail">
  188.             <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述,</div>
  189.             <div class="price"><span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span></div>
  190.         </div>
  191.     </div>
  192.     <div class="unit">
  193.         <div class="img">
  194.             <img src="images/items/item20.webp" alt="" />
  195.         </div>
  196.         <div class="detail">
  197.             <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述,</div>
  198.             <div class="price"><span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span></div>
  199.         </div>
  200.     </div>
  201.     <div class="unit">
  202.         <div class="img">
  203.             <img src="images/items/item14.webp" alt="" />
  204.         </div>
  205.         <div class="detail">
  206.             <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述,</div>
  207.             <div class="price"><span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span></div>
  208.         </div>
  209.     </div>
  210.     <div class="unit">
  211.         <div class="img">
  212.             <img src="images/items/item15.webp" alt="" />
  213.         </div>
  214.         <div class="detail">
  215.             <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述,</div>
  216.             <div class="price"><span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span></div>
  217.         </div>
  218.     </div>
  219.     <div class="unit">
  220.         <div class="img">
  221.             <img src="images/items/item16.webp" alt="" />
  222.         </div>
  223.         <div class="detail">
  224.             <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述,</div>
  225.             <div class="price"><span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span></div>
  226.         </div>
  227.     </div>
  228.     <div class="unit">
  229.         <div class="img">
  230.             <img src="images/items/item17.webp" alt="" />
  231.         </div>
  232.         <div class="detail">
  233.             <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述,</div>
  234.             <div class="price"><span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span></div>
  235.         </div>
  236.     </div>
  237.     <div class="unit">
  238.         <div class="img">
  239.             <img src="images/items/item18.webp" alt="" />
  240.         </div>
  241.         <div class="detail">
  242.             <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述,</div>
  243.             <div class="price"><span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span></div>
  244.         </div>
  245.     </div>
  246.     <div class="unit">
  247.         <div class="img">
  248.             <img src="images/items/item19.webp" alt="" />
  249.         </div>
  250.         <div class="detail">
  251.             <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述,</div>
  252.             <div class="price"><span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span></div>
  253.         </div>
  254.     </div>
  255.     <div class="unit">
  256.         <div class="img">
  257.             <img src="images/items/item17.webp" alt="" />
  258.         </div>
  259.         <div class="detail">
  260.             <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述,</div>
  261.             <div class="price" style="margin-left: 0.1rem;"><span class="iconfont icon-rmb" style="font-size: large;margin-right: .1rem;">89</span><span class="num">45人已购买</span></div>
  262.         </div>
  263.     </div>
  264.     <div class="unit">
  265.         <div class="img">
  266.             <img src="images/items/item18.webp" alt="" />
  267.         </div>
  268.         <div class="detail">
  269.             <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述,</div>
  270.             <div class="price"><span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span></div>
  271.         </div>
  272.     </div>
  273.     <div class="unit">
  274.         <div class="img">
  275.             <img src="images/items/item19.webp" alt="" />
  276.         </div>
  277.         <div class="detail">
  278.             <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述,</div>
  279.             <div class="price"><span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span></div>
  280.         </div>
  281.     </div>
  282.     <div class="unit">
  283.         <div class="img">
  284.             <img src="images/items/item20.webp" alt="" />
  285.         </div>
  286.         <div class="detail">
  287.             <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述,</div>
  288.             <div class="price"><span class="iconfont icon-rmb">89</span><span class="num">45人已购买</span></div>
  289.         </div>
  290.     </div>
  291. </div>
  292. </div>
  293.     </main>
  294.     <!-- 底部 -->
  295.     <footer>
  296.         <div class="item active">
  297.             <a href="" class="iconfont icon-shejiaotubiao-44"></a>
  298.         </div>
  299.         <div class="item">
  300.             <a href="" class="iconfont icon-gouwuche"></a>
  301.             <a href="">购物车</a>
  302.         </div>
  303.         <div class="item">
  304.             <a href="" class="iconfont icon-wodetaobao"></a>
  305.             <a href="">我的淘宝</a>
  306.         </div>
  307.     </footer>
  308. </body>
  310. </html>

页面css文件

header.css

  1. header {
  2.     position: relative;
  3. }
  5. header .top {
  6.     width: 100vw;
  7.     background-color: coral;
  8.     position: fixed;
  9.     top: 0;
  10.     left: 0;
  11.     right: 0;
  12.     display: grid;
  13.     grid-template-columns: 0.35rem 1fr;
  14.     padding: 0.05rem;
  15.     /* 调整显示层级 */
  16.     z-index: 99;
  17. }
  19. header .top .logo {
  20.     color: white;
  21.     font-size: 0.25rem;
  22. }
  24. header .top .search {
  25.     background-color: orangered;
  26.     color: #eee;
  27.     display: grid;
  28.     place-content: center;
  29.     border-radius: 0.05rem;
  30.     font-size: small;
  31. }
  34. /* 轮播图，用图片代替 */
  36. header .slider {
  37.     height: 1.25rem;
  38.     position: absolute;
  39.     top: 0.35rem;
  40. }
  42. header .slider img,
  43. header .nav img {
  44.     width: 100%;
  45.     height: 100%;
  46. }
  49. /* 导航组 */
  51. header .nav {
  52.     background-color: #fff;
  53.     position: absolute;
  54.     top: calc(0.35rem + 1.25rem);
  55.     display: grid;
  56.     grid-template-columns: repeat(5, 1fr);
  57.     font-size: 0.11rem;
  58.     padding: 0.2rem 0.1rem;
  59. }
  61. header .nav .item {
  62.     display: grid;
  63.     place-items: center;
  64.     padding: 0 0.05rem;
  65. }
  67. header .nav .item a {
  68.     padding: 0 0.05rem;
  69. }

main.css

  1. main {
  2.     position: relative;
  3.     top: calc(0.37rem + 1.25rem + 1.5rem);
  4.     padding: 0.1rem;
  5. }
  7. main img {
  8.     width: 100%;
  9.     height: 100%;
  10. }
  12. main .top {
  13.     background-color: #fff;
  14.     border-radius: 0.1rem;
  15.     min-height: 3rem;
  16.     /* 3行2列 */
  17.     display: grid;
  18.     grid-template-columns: repeat(2, 1fr);
  19.     gap: 0.1rem;
  20.     padding: 0.1rem;
  21. }
  24. /* 最后一行,跨2列 */
  26. main .top .item:last-of-type {
  27.     grid-column: span 2;
  28.     /* background-color: yellow; */
  29. }
  32. /* 左上角的聚划算 */
  34. main .top .item.jhs {
  35.     display: grid;
  36.     grid-template-columns: repeat(2, 1fr);
  37.     gap: 0.1rem;
  38. }
  40. main .top .item.jhs .box {
  41.     display: grid;
  42.     gap: 0.1rem;
  43. }
  45. main .top .item.jhs .box .desc {
  46.     display: grid;
  47.     background-color: rgb(243, 235, 236);
  48.     border-radius: 0.1rem;
  49.     padding: 0.1rem;
  50. }
  53. /* 右侧, 上下二组 */
  55. main .top .item.right {
  56.     display: grid;
  57.     gap: 0.1rem;
  58. }
  60. main .top .item.right .box {
  61.     display: grid;
  62. }
  64. main .top .item.right .box .title {
  65.     grid-column: span 2;
  66. }
  68. main .top .item.right .box .title .tag {
  69.     color: #fff;
  70.     font-weight: normal;
  71.     padding: 1px;
  72.     border-radius: 0.05rem;
  73.     font-size: smaller;
  74. }
  76. main .top .item.right .box .detail {
  77.     display: grid;
  78.     grid-template-columns: repeat(2, 1fr);
  79. }
  81. main .top .item.right .box .detail .left {
  82.     display: grid;
  83. }
  86. /* 底部公告 */
  88. main .item.footer {
  89.     display: grid;
  90.     grid-template-columns: 0.6rem 1fr;
  91.     padding: 0.1rem 0;
  92. }
  94. main .item.footer .type {
  95.     background-color: rgb(238, 202, 206);
  96.     color: darkorange;
  97.     padding: 2px 5px;
  98.     border-radius: 3px;
  99. }
  101. main .item.footer .title {
  102.     font-size: larger;
  103.     font-weight: bolder;
  104. }
  105. main .list .title{
  106.     color: #ff865e;
  107.     font-size: large;
  108.     font-weight: 600;
  109.     margin: 0.2rem 0 0.1rem 0.8rem;
  110.     padding: auto;
  111. }
  112. main .list .block {
  113.     display: grid;
  114.     grid-template-columns: repeat(2,1fr);
  115.     gap: .1rem;
  116. }
  117. main .list .unit img{
  118.     width: 100%;
  119.     height: 100%;
  120.     border-radius: .1rem .1rem 0 0;
  121. }
  122. main .list .unit {
  123.     display: grid;
  124.     grid-template-rows: 0.7fr 0.3fr;
  125.     background-color: #fff;
  126.     border-radius: 0 0 .1rem .1rem;
  127. }
  128. main .list .unit .detail .desc{
  129.     padding:0.1rem;
  130. }
  131. main .list .unit .detail .price {
  132.     margin-left: .1rem;
  133.     color: #ff865e;
  134. }
  135. main .list .unit .detail .num{
  136.     color: #d0d0d0;
  137.     font-size: smaller;
  138.     margin-left: 0.05rem;
  139. }
  1. footer {
  2.     width: 100vw;
  3.     height: 0.46rem;
  4.     background-color: #fff;
  5.     position: fixed;
  6.     bottom: 0;
  7.     left: 0;
  8.     right: 0;
  9.     display: grid;
  10.     grid-template-columns: repeat(3, 1fr);
  11.     place-items: center;
  12. }
  14. footer .item {
  15.     display: grid;
  16.     place-items: center;
  17. }
  19. footer .item .iconfont {
  20.     font-size: 0.2rem;
  21. }
  23. footer .item.active .iconfont {
  24.     font-size: 0.36rem;
  25.     color: coral;
  26. }

效果：

上一条：淘宝移动端的商品列表下一条：仿淘宝移动端首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议