使用 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 布局搭建，由于用法一样，也先没写

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

更多相关文章

  1. 如何设计营销型网站首页？营销型网站首页九大模块设置
  2. php生成PDF格式文件并且加密
  3. 使用 HTML 基本常用标签搭建简易静态页面网站及相关介绍
  4. 前端软件安装设置、Markdown和Emmet语法
  5. PHP header 的7种用法
  6. 用小鸟云服务器搭建网站常用的伪静态设置规则
  7. 学习笔记：php.ini的开发配置
  8. file本地文本传输协议为什么无法设置cookies
  9. nginx设置跨域

随机推荐

  1. Android : android 9.0 audio 接口分析
  2. Android Studio 之 AndroidManifest.xml
  3. android studio打包apk时遇见的一些问题
  4. Android(安卓)签名详解
  5. android:sharedUserId="android.uid.syst
  6. Android的Touch系统简介（一）
  7. android背景选择器selector用法
  8. 安装android sdk 遇到几个问题
  9. Android 很酷的天气动画控件
  10. Android 带百分比数字的水平、圆形进度条