Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用flex、grid跟定位布局仿一个简易的淘宝手机端静态页面
Blogger Information
Blog 49
fans 0
comment 0
visits 38161
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
使用flex、grid跟定位布局仿一个简易的淘宝手机端静态页面
超超多喝水
Original
1112 people have browsed it

使用 flex、grid 跟定位布局仿一个简易的淘宝手机端静态页面

html 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <title>淘宝首页</title>
  8.     <link rel="stylesheet" href="font-icon/iconfont.css" />
  9.     <link rel="stylesheet" href="../jd/lib/font_icon/iconfont.css" />
  10.     <link rel="stylesheet" href="font-icon2/iconfont.css" />
  11.     <link rel="stylesheet" href="font-icon3/iconfont.css" />
  12.     <link rel="stylesheet" href="css/Initialize.css" />
  13.     <link rel="stylesheet" href="css/header.css" />
  14.     <link rel="stylesheet" href="css/main.css" />
  15.     <link rel="stylesheet" href="css/footer.css" />
  16.     <link rel="stylesheet" href="css/home.css" />
  17.     <link rel="stylesheet" href="css/fixed.css" />
  18.   </head>
  19.   <body>
  20.     <!-- 首页 -->
  21.     <div class="home">
  22.       <!-- 页眉 -->
  23.       <div class="header">
  24.         <span class="iconfont icon-tao"></span>
  25.         <a href="" class="search">
  26.           <span class="iconfont icon-search"></span>
  27.           <span>寻找宝贝店铺</span>
  28.         </a>
  29.       </div>
  30.       <!-- 内容区 -->
  31.       <div class="main">
  32.         <!-- 幻灯图区 -->
  33.         <div class="slide" id="slide">
  34.           <!-- 图片 -->
  35.           <div class="slide-img">
  36.             <img src="img/O1CN014z2AEE1Cq2agr3N5J_!!131-0-luban.jpg" alt="" />
  37.           </div>
  38.           <!-- 切换小点 -->
  39.           <div class="slide-switch">
  40.             <span class="iconfont icon-yuandianxiao"></span>
  41.             <span class="iconfont icon-yuandianxiao"></span>
  42.             <span class="iconfont icon-yuandianxiao"></span>
  43.           </div>
  44.         </div>
  45.         <!-- 功能区 -->
  46.         <div class="function">
  47.           <div class="function-a">
  48.             <!-- 链接 -->
  49.             <div class="function-a-content">
  50.               <a href=""><img src="img/icon/天猫新品.png" alt="" /></a>
  51.               <a href="">天猫新品</a>
  52.             </div>
  53.             <div class="function-a-content">
  54.               <a href=""><img src="img/icon/今日爆款.png" alt="" /></a>
  55.               <a href="">今日爆款</a>
  56.             </div>
  57.             <div class="function-a-content">
  58.               <a href=""><img src="img/icon/天猫国际.png" alt="" /></a>
  59.               <a href="">天猫国际</a>
  60.             </div>
  61.             <div class="function-a-content">
  62.               <a href=""><img src="img/icon/饿了么.png" alt="" /></a>
  63.               <a href="">饿了么</a>
  64.             </div>
  65.             <div class="function-a-content">
  66.               <a href=""><img src="img/icon/天猫超市.png" alt="" /></a>
  67.               <a href="">天猫超市</a>
  68.             </div>
  69.             <div class="function-a-content">
  70.               <a href=""><img src="img/icon/充值中心.png" alt="" /></a>
  71.               <a href="">充值中心</a>
  72.             </div>
  73.             <div class="function-a-content">
  74.               <a href=""><img src="img/icon/机票酒店.png" alt="" /></a>
  75.               <a href="">机票酒店</a>
  76.             </div>
  77.             <div class="function-a-content">
  78.               <a href=""><img src="img/icon/金币庄园.png" alt="" /></a>
  79.               <a href="">金币庄园</a>
  80.             </div>
  81.             <div class="function-a-content">
  82.               <a href=""><img src="img/icon/阿里拍卖.png" alt="" /></a>
  83.               <a href="">阿里拍卖</a>
  84.             </div>
  85.             <div class="function-a-content">
  86.               <a href=""><img src="img/icon/淘宝吃货.png" alt="" /></a>
  87.               <a href="">淘宝吃货</a>
  88.             </div>
  89.           </div>
  90.           <!-- 切换功能 -->
  91.           <div class="function-switch">
  92.             <div class="function-switch-a">
  93.               <div class="function-switch-b"></div>
  94.             </div>
  95.           </div>
  96.         </div>
  97.         <!-- 推荐区，推荐区也是grid跟flex布局不再赘述 -->
  98.         <!-- <div class="recommend">
  99.         <div class="recommend-area"></div>
  100.         <div class="recommend-scroll"></div>
  101.       </div> -->
  102.         <!-- 猜你喜欢 -->
  103.         <div class="guess">
  104.           <img src="img/icon/guess.png" alt="" />
  105.         </div>
  106.         <!-- 商品列表 -->
  107.         <div class="list">
  108.           <ul class="list-main">
  109.             <li class="item">
  110.               <a href="">
  111.                 <img src="img/images/items/item19.jpg" alt="" />
  112.                 <p>玻璃盖铸铁煲重庆鸡公煲锅烧鸡公专用锅鸡公煲铁</p>
  113.                 <div class="price">
  114.                   <span class="iconfont icon-renminbi">2877</span>
  115.                   <span class="buy">2000+人已购买</span>
  116.                 </div>
  117.               </a>
  118.             </li>
  119.             <li class="item">
  120.               <a href="">
  121.                 <img src="img/images/items/item19.jpg" alt="" />
  122.                 <p>玻璃盖铸铁煲重庆鸡公煲锅烧鸡公专用锅鸡公煲铁</p>
  123.                 <div class="price">
  124.                   <span class="iconfont icon-renminbi">2877</span>
  125.                   <span class="buy">2000+人已购买</span>
  126.                 </div>
  127.               </a>
  128.             </li>
  129.             <li class="item">
  130.               <a href="">
  131.                 <img src="img/images/items/item19.jpg" alt="" />
  132.                 <p>玻璃盖铸铁煲重庆鸡公煲锅烧鸡公专用锅鸡公煲铁</p>
  133.                 <div class="price">
  134.                   <span class="iconfont icon-renminbi">2877</span>
  135.                   <span class="buy">2000+人已购买</span>
  136.                 </div>
  137.               </a>
  138.             </li>
  139.             <li class="item">
  140.               <a href="">
  141.                 <img src="img/images/items/item19.jpg" alt="" />
  142.                 <p>玻璃盖铸铁煲重庆鸡公煲锅烧鸡公专用锅鸡公煲铁</p>
  143.                 <div class="price">
  144.                   <span class="iconfont icon-renminbi">2877</span>
  145.                   <span class="buy">2000+人已购买</span>
  146.                 </div>
  147.               </a>
  148.             </li>
  149.             <li class="item">
  150.               <a href="">
  151.                 <img src="img/images/items/item19.jpg" alt="" />
  152.                 <p>玻璃盖铸铁煲重庆鸡公煲锅烧鸡公专用锅鸡公煲铁</p>
  153.                 <div class="price">
  154.                   <span class="iconfont icon-renminbi">2877</span>
  155.                   <span class="buy">2000+人已购买</span>
  156.                 </div>
  157.               </a>
  158.             </li>
  159.             <li class="item">
  160.               <a href="">
  161.                 <img src="img/images/items/item19.jpg" alt="" />
  162.                 <p>玻璃盖铸铁煲重庆鸡公煲锅烧鸡公专用锅鸡公煲铁</p>
  163.                 <div class="price">
  164.                   <span class="iconfont icon-renminbi">2877</span>
  165.                   <span class="buy">2000+人已购买</span>
  166.                 </div>
  167.               </a>
  168.             </li>
  169.             <li class="item">
  170.               <a href="">
  171.                 <img src="img/images/items/item19.jpg" alt="" />
  172.                 <p>玻璃盖铸铁煲重庆鸡公煲锅烧鸡公专用锅鸡公煲铁</p>
  173.                 <div class="price">
  174.                   <span class="iconfont icon-renminbi">2877</span>
  175.                   <span class="buy">2000+人已购买</span>
  176.                 </div>
  177.               </a>
  178.             </li>
  179.             <li class="item">
  180.               <a href="">
  181.                 <img src="img/images/items/item19.jpg" alt="" />
  182.                 <p>玻璃盖铸铁煲重庆鸡公煲锅烧鸡公专用锅鸡公煲铁</p>
  183.                 <div class="price">
  184.                   <span class="iconfont icon-renminbi">2877</span>
  185.                   <span class="buy">2000+人已购买</span>
  186.                 </div>
  187.               </a>
  188.             </li>
  189.           </ul>
  190.         </div>
  191.       </div>
  192.       <!-- 两个固定按钮 -->
  193.       <div class="open">
  194.         <div>
  195.           <a href="">打开淘宝</a>
  196.         </div>
  197.       </div>
  198.       <div class="top">
  199.         <a href="#slide">
  200.           <span class="iconfont icon-dingbu"></span>
  201.           <span>顶部</span>
  202.         </a>
  203.       </div>
  204.       <!-- 页脚 -->
  205.       <div class="footer">
  206.         <div class="first">
  207.           <span class="iconfont icon-shouye"></span>
  208.           <span>首页</span>
  209.         </div>
  210.         <div>
  211.           <span class="iconfont icon-gouwuche"></span>
  212.           <span>购物车</span>
  213.         </div>
  214.         <div>
  215.           <span class="iconfont icon-dingdanliebiao"></span>
  216.           <span>订单列表</span>
  217.         </div>
  218.         <div>
  219.           <span class="iconfont icon-31wode"></span>
  220.           <span>我的淘宝</span>
  221.         </div>
  222.         <div>
  223.           <span class="iconfont icon-gengduo"></span>
  224.           <span>更多</span>
  225.         </div>
  226.       </div>
  227.     </div>
  228.   </body>
  229. </html>

css 代码

Initialize.css

  1. /* 设置部分初始化样式 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  8. html {
  9.   font-size: 10px;
  10. }
  12. body {
  13.   font-size: 1.6rem;
  14.   background-color: #f4f4f4;
  15. }
  17. a {
  18.   text-decoration: none;
  19. }
  21. ol,
  22. ul {
  23.   list-style: none;
  24. }
  25. input {
  26.   border: 0;
  27. }
  28. img {
  29.   width: 100%;
  30. }

home.css

  1. /* 设置页面最小高度是100可视高度，grid布局便于给上中下三部分区分高度 */
  2. .home {
  3.   min-height: 100vh;
  4.   display: grid;
  5.   grid-template-rows: 4.1rem 1fr 4.1rem;
  6. }
  7. /* 给内容区限定高度，超过的内容滚动条展示 */
  8. .home .main {
  9.   height: calc(100vh - 4.1rem - 4.1rem);
  10.   overflow-y: scroll;
  11. }

header.css

  1. /* 头设置总宽100% 底色 字体颜色 flex布局 0.5rem内边距 */
  2. .header {
  3.   width: 100%;
  4.   background-color: #ff852a;
  5.   color: white;
  6.   display: flex;
  7.   padding: 0.5rem;
  8. }
  9. /* 淘字大小3.2rem */
  10. .header .icon-tao {
  11.   font-size: 3.2rem;
  12. }
  13. /* 搜索a标签字体居中，0.5rem内边距 flex布局可拉伸收缩 宽度默认
  14. 设置背景色 圆角 flex布局处理a标签 横向居中 */
  15. .header .search {
  16.   text-align: center;
  17.   padding: 0.5rem;
  18.   flex: 1 1 auto;
  19.   background-color: #ff4e22;
  20.   border-radius: 0.4em;
  21.   display: flex;
  22.   place-content: center;
  23. }
  24. /* 设置搜索字体图标大小 */
  25. .header .search .iconfont.icon-search {
  26.   font-size: 2.6rem;
  27. }
  28. /* 设置a标签搜索字体颜色 */
  29. .header .search {
  30.   color: white;
  31. }

main.css

  1. main {
  2.   overflow-y: scroll;
  3. }
  5. /* 幻灯图 */
  6. /* 幻灯图区域设置为定位元素 */
  7. .main .slide {
  8.   position: relative;
  9. }
  10. /* 限制幻灯图尺寸 */
  11. .main .slide .slide-img img {
  12.   width: 100%;
  13.   height: 12rem;
  14. }
  15. /* 设置滚动小点区域尺寸 定位方式绝对定位 距离底部2rem 使用flex布局 水平居中 */
  16. .main .slide .slide-switch {
  17.   width: 100%;
  18.   position: absolute;
  19.   bottom: 2%;
  20.   display: flex;
  21.   place-content: center;
  22. }
  23. /* 设置滚动小点默认样式 */
  24. .main .slide .slide-switch span {
  25.   font-size: 2.5rem;
  26.   color: rgb(1, 1, 1, 0.5);
  27. }
  28. /* 设置第一个选中小点颜色 */
  29. .main .slide .slide-switch span:first-of-type {
  30.   color: red;
  31. }
  33. /* 功能区 */
  34. /* 功能区转为定位元素，宽度百分之百，背景色为白色 */
  35. .main .function {
  36.   position: relative;
  37.   width: 100%;
  38.   background-color: white;
  39. }
  40. /* 功能区小图标及文字宽度100%，grid布局5列每列宽1/5,2行，每行高1/2，文字居中 */
  41. .main .function .function-a {
  42.   width: 100%;
  43.   display: grid;
  44.   grid-template-columns: repeat(5, 1fr);
  45.   grid-template-rows: repeat(2, 1fr);
  46.   text-align: center;
  47. }
  48. /* 设置功能区文字字体颜色 */
  49. .main .function .function-a .function-a-content a {
  50.   color: black;
  51. }
  52. /* 功能区滑动小按钮 flex布局 水平跟垂直都是居中 2rem高 宽100% */
  53. .main .function .function-switch {
  54.   display: flex;
  55.   place-content: center;
  56.   align-items: center;
  57.   height: 2rem;
  58.   width: 100%;
  59. }
  60. /* 滑动小按钮总宽5rem 高0.3rem,背景色灰色 */
  61. .main .function .function-switch .function-switch-a {
  62.   width: 5rem;
  63.   height: 0.3rem;
  64.   background-color: #d4d8de;
  65. }
  66. /* 定位小按钮默认宽2rem,高0.3rem,背景色西红柿色 */
  67. .main .function .function-switch .function-switch-b {
  68.   width: 2rem;
  69.   height: 0.3rem;
  70.   background-color: #ff6d2a;
  71. }
  72. /* 你可能还喜欢小图片 */
  73. /* flex布局水平、垂直居中、设置上下边距 */
  74. .main .guess {
  75.   display: flex;
  76.   place-content: center;
  77.   place-items: center;
  78.   margin: 1rem 0 2rem 0;
  79. }
  80. /* 设置图片大小 */
  81. .main .guess img {
  82.   height: 2rem;
  83.   width: auto;
  84. }
  85. .main .list .list-main {
  86.   display: grid;
  87.   grid-template-columns: repeat(2, 0.45fr);
  88.   gap: 1.5rem;
  89.   place-content: space-evenly;
  90. }
  91. .main .list .list-main li {
  92.   background-color: white;
  93.   border-radius: 1.5rem;
  94. }
  95. .main .list .list-main li a {
  96.   color: black;
  97. }
  98. .main .list .list-main li a img {
  99.   border-radius: 1.5rem;
  100. }
  101. .main .list .list-main li a p {
  102.   padding: 1rem;
  103.   font-size: 1.8rem;
  104. }
  105. .main .list .list-main li a .price {
  106.   padding: 0 0 1.6rem 1.6rem;
  107. }
  108. .main .list .list-main li a .price .iconfont.icon-renminbi {
  109.   color: red;
  110.   font-size: 2rem;
  111. }
  112. .main .list .list-main li a .price .buy {
  113.   color: gray;
  114. }

fixed.css

  1. /* 设置打开淘宝样式 */
  2. /* 先给外边布一个div方便内部布局，给100%宽度，固定定位，距离底部6rem，flex布局，内容水平居中 */
  3. .open {
  4.   width: 100%;
  5.   position: fixed;
  6.   bottom: 6rem;
  7.   display: flex;
  8.   place-content: center;
  9. }
  10. /* 给里面div也设置一个flex布局内容水平居中 设置一个背景色 圆角 宽高 */
  11. .open div {
  12.   display: flex;
  13.   place-content: center;
  14.   background-color: #ff5000;
  15.   border-radius: 1.8rem;
  16.   width: 11.6rem;
  17.   height: 3.6rem;
  18. }
  19. /* 给a标签字体样式行高3.6rem，字体大小1.4rem，白色加粗 */
  20. .open a {
  21.   line-height: 3.6rem;
  22.   font-size: 1.4rem;
  23.   color: white;
  24.   font-weight: bolder;
  25. }
  27. /* 设置回到顶部栏样式 */
  28. /* 设置白色背景 一个边框 圆形圆角 距底部7rem 右侧1rem 固定定位 */
  29. .top {
  30.   background-color: white;
  31.   border: 1px solid #d6d6d6;
  32.   border-radius: 50%;
  33.   bottom: 7rem;
  34.   right: 1rem;
  35.   position: fixed;
  36. }
  37. /* 给a标签设置1rem的内边距灰色字体flex布局，内容纵向排列 */
  38. .top a {
  39.   padding: 1rem;
  40.   color: gray;
  41.   display: flex;
  42.   flex-direction: column;
  43. }
  44. /* 给a标签的顶部二字设置字体大小 */
  45. .top a span {
  46.   font-size: 1.2rem;
  47. }
  48. /* 给回到顶部小图标设置字体大小 */
  49. .top a .iconfont.icon-dingbu {
  50.   font-size: 2rem;
  51. }
  1. /* 给底部功能区设置grid布局 5列 每列1/5，白色背景 字体居中 */
  2. .footer {
  3.   display: grid;
  4.   grid-template-columns: repeat(5, 1fr);
  5.   background-color: white;
  6.   text-align: center;
  7. }
  8. /* 给每个小功能设置字体颜色灰色 flex布局纵向排列 字体大小1.2rem */
  9. .footer div {
  10.   color: gray;
  11.   display: flex;
  12.   flex-direction: column;
  13.   font-size: 1.2rem;
  14. }
  15. /* 设置图标字体大小2.5rem */
  16. .footer div .iconfont {
  17.   font-size: 2.5rem;
  18. }

最后

  • 图标字体都可以从 iconfont 上查找，代码查了好几次分了三个文件夹，就先不贴了

  • 淘宝原页面中间的推荐栏也可以用 grid 布局跟 flex 布局搭建，由于用法一样，也先没写

  • 代码均去除推荐部分后效果对比（左侧淘宝原网站，右侧仿建）
    完结

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