使用flex布局页面，仿照某东H5页面实例。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>仿写首页</title>
  7.     <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  8.     <link rel="stylesheet" href="static/css/index.css" />
  9.     <link rel="stylesheet" href="static/css/header.css" />
  10.     <link rel="stylesheet" href="static/css/footer.css" />
  11.     <link rel="stylesheet" href="static/css/nav.css" />
  12.     <link rel="stylesheet" href="static/css/ms.css" />
  13.   </head>
  15.   <body>
  16.     <!-- 页眉 -->
  17.     <div class="header">
  18.       <!-- 字体图标菜单 -->
  19.       <div class="menu iconfont icon-menu"></div>
  20.       <!-- 搜索框 -->
  21.       <div class="search">
  22.         <div class="logo">JD</div>
  23.         <div class="zoom iconfont icon-search"></div>
  24.         <input class="words" type="text" value="移动硬盘" />
  25.       </div>
  26.       <!-- 登录按钮 -->
  27.       <a href="" class="login">登录</a>
  28.     </div>
  30.     <!-- 主体 -->
  31.     <div class="main">
  32.       <!-- 主导航区 -->
  33.       <ul class="nav">
  34.         <!-- 第一组 -->
  35.         <li>
  36.           <a href=""><img src="static/images/dh/nav-1.png" alt="" /></a>
  37.           <a href="">京东超市</a>
  38.         </li>
  39.         <li>
  40.           <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  41.           <a href="">数码电器</a>
  42.         </li>
  43.         <li>
  44.           <a href=""><img src="static/images/dh/nav-3.png" alt="" /></a>
  45.           <a href="">京东服饰</a>
  46.         </li>
  47.         <li>
  48.           <a href=""><img src="static/images/dh/nav-4.png" alt="" /></a>
  49.           <a href="">京东生鲜</a>
  50.         </li>
  51.         <li>
  52.           <a href=""><img src="static/images/dh/nav-5.png" alt="" /></a>
  53.           <a href="">京东到家</a>
  54.         </li>
  55.         <!-- 第二组 -->
  56.         <li>
  57.           <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  58.           <a href="">充值缴费</a>
  59.         </li>
  60.         <li>
  61.           <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  62.           <a href="">9.9元拼</a>
  63.         </li>
  64.         <li>
  65.           <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  66.           <a href="">领券</a>
  67.         </li>
  68.         <li>
  69.           <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  70.           <a href="">领金贴</a>
  71.         </li>
  72.         <li>
  73.           <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  74.           <a href="">PLUS会员</a>
  75.         </li>
  76.       </ul>
  78.       <!-- 秒杀区 -->
  79.       <div class="ms">
  80.         <!-- 头部 -->
  81.         <div class="ms-top">
  82.           <div class="left">
  83.             <div class="title">京东秒杀</div>
  84.             <div class="notice">
  85.               <div class="tips">22点专场</div>
  86.               <div class="time">00:10:20</div>
  87.             </div>
  88.           </div>
  89.           <div class="right">更多秒杀</div>
  90.         </div>
  92.         <!-- 秒杀主体区 -->
  93.         <ul class="ms-body">
  94.           <li class="item">
  95.             <a href=""><img src="static/images/ms/ms-1.jpg" alt="" /></a>
  96.             <div class="iconfont icon-rmb">338</div>
  97.             <div class="iconfont icon-rmb">558</div>
  98.           </li>
  99.           <li class="item">
  100.             <a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
  101.             <div class="iconfont icon-rmb">3456</div>
  102.             <div class="iconfont icon-rmb">4567</div>
  103.           </li>
  104.           <li class="item">
  105.             <a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
  106.             <div class="iconfont icon-rmb">789</div>
  107.             <div class="iconfont icon-rmb">999</div>
  108.           </li>
  109.           <li class="item">
  110.             <a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
  111.             <div class="iconfont icon-rmb">3213</div>
  112.             <div class="iconfont icon-rmb">4532</div>
  113.           </li>
  114.         </ul>
  115.       </div>
  116.     </div>
  117.     <!-- 页脚 -->
  118.     <div class="footer">
  119.       <div>
  120.         <div class="iconfont icon-home"></div>
  121.         <span>主页</span>
  122.       </div>
  123.       <div>
  124.         <div class="iconfont icon-layers"></div>
  125.         <span>分类</span>
  126.       </div>
  127.       <div>
  128.         <div class="iconfont icon-kehuguanli"></div>
  129.         <span>京喜</span>
  130.       </div>
  131.       <div>
  132.         <div class="iconfont icon-shopping-cart"></div>
  133.         <span>购物车</span>
  134.       </div>
  135.       <div>
  136.         <div class="iconfont icon-user"></div>
  137.         <span>未登录</span>
  138.       </div>
  139.     </div>
  140.   </body>
  141. </html>

index.css文件

  1. /* 导入公共初始化样式表 */
  2. @import "reset.css";
  4. /* 页眉 */
  5. .header {
  6.   background-color: #e43130;
  7.   color: white;
  8.   height: 4rem;
  10.   /* 固定定位 */
  11.   position: fixed;
  12.   top: 0;
  13.   left: 0;
  14.   right: 0;
  15.   z-index: 100;
  17.   font-size: 1.4rem;
  18. }
  20. /* 页脚*/
  21. .footer {
  22.   color: #666;
  23.   background-color: #fafafa;
  24.   box-shadow: 0 0 3px #999;
  25.   height: 4rem;
  27.   /* 固定定位 */
  28.   position: fixed;
  29.   bottom: 0;
  30.   left: 0;
  31.   right: 0;
  32.   z-index: 100;
  34.   font-size: 1.4rem;
  35. }
  37. /* 主体 */
  38. .main {
  39.   /* 绝对定位 */
  40.   position: absolute;
  41.   top: 4rem;
  42.   bottom: 4rem;
  43.   left: 0;
  44.   right: 0;
  46.   font-size: 1.4rem;
  47. }

reset.css文件

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. li {
  8.     list-style: none;
  9. }
  10. a {
  11.     color: #7b7b7b;
  12.     text-decoration: none;
  13. }
  15. body {
  16.     background-color: #F6F6F6;
  17. }
  19. html {
  20.     font-size: 10px;
  21. }
  23. /* 媒体查询 */
  24. @media screen and (min-width: 480px) {
  25.     html {
  26.         font-size: 12px;
  27.     }
  28. }
  30. @media screen and (min-width: 640px) {
  31.     html {
  32.         font-size: 14px;
  33.     }
  34. }
  36. @media screen and (min-width: 720px) {
  37.     html {
  38.         font-size: 16px;
  39.     }
  40. }

header.css文件

  1. .header {
  2.   display: flex;
  3.   align-items: center;
  4. }
  5. /* 页眉中的三个部分比例 1:6:1 */
  6. .header .login {
  7.   color: #fff;
  8.   text-align: center;
  9.   flex: 1;
  10. }
  12. .header .menu {
  13.   text-align: center;
  14.   flex: 1;
  15.   font-size: 2.5rem;
  16. }
  18. .header .search {
  19.   flex: 6;
  20.   padding: 0.5rem;
  21.   background-color: #fff;
  22.   border-radius: 3rem;
  24.   display: flex;
  25. }
  27. /* logo  */
  28. .header .search .logo {
  29.   color: #e43130;
  30.   flex: 0 1 4rem;
  31.   font-size: 2rem;
  32.   /* 水平垂直居中 */
  33.   text-align: center;
  34.   line-height: 2rem;
  35. }
  36. /* 放大镜 */
  37. .header .search .zoom {
  38.   color: #ccc;
  39.   flex: 0 1 4rem;
  41.   border-left: 1px solid;
  42.   /* 水平垂直居中 */
  43.   text-align: center;
  44.   line-height: 2rem;
  45. }
  47. /* 搜索文本框 */
  48. .header .search .words {
  49.   flex: auto;
  50.   border: none;
  51.   outline: none;
  52.   color: #aaa;
  53. }

footer.css文件

  1. .footer {
  2.     display: flex;
  3.     justify-content: space-around;
  4.     align-items: center;
  5. }
  7. .footer > div {
  8.     display: flex;
  9.     flex-flow: column nowrap;
  10.     align-items: center;
  11. }
  13. .footer > div > .iconfont {
  14.     font-size: 2rem;
  15. }
  16. .footer > div > span {
  17.     font-size: 1rem;
  18. }

nav.css文件

  1. /* 主导航区 */
  3. .main .nav {
  4.     /* background-color: #fff; */
  5.     padding: 1rem;
  7.     display: flex;
  8.     /* 允许换行 */
  9.     flex-flow: row wrap;
  10.     justify-content: space-between
  11. }
  13. .main .nav img {
  14.     height: 4rem;
  15.     width: 4rem;
  16. }
  18. .main .nav li {
  19.     /* 每一行显示5个,100%来分配,应该是20% */
  20.     flex: 1 1 20%;
  22.     display: flex;
  23.     flex-flow: column nowrap;
  24.     align-items: center;
  25. }

ms.css文件

  1. /* 秒杀 */
  2. .main .ms {
  3.   background-color: #fff;
  4.   padding: 1rem;
  5.   margin: 1rem 0;
  6. }
  8. .main .ms .ms-top {
  9.   font-size: 1.3rem;
  10.   height: 3rem;
  11.   display: flex;
  12.   justify-content: space-between;
  13. }
  15. .main .ms .ms-top .left {
  16.   display: flex;
  17. }
  19. .main .ms .ms-top .left .notice {
  20.   font-size: 1.1rem;
  21.   height: 2rem;
  22.   border: 1px solid #e43130;
  23.   border-radius: 2rem;
  24.   margin-left: 1rem;
  25.   display: flex;
  26.   justify-content: center;
  27.   align-items: center;
  28. }
  30. .main .ms .ms-top .left .notice .tips {
  31.   background-color: #e43130;
  32.   color: #fff;
  33.   border-radius: 2rem;
  34.   padding: 0.3rem 0.5rem;
  35. }
  37. .main .ms .ms-top .left .notice .time {
  38.   padding: 0.3rem 0.5rem;
  39. }
  41. .main .ms .ms-top .right {
  42.   color: #e43130;
  43. }
  45. /* 主体区 */
  47. .main .ms .ms-body {
  48.   display: flex;
  49.   justify-content: space-between;
  50. }
  51. .main .ms .ms-body img {
  52.   height: 12rem;
  53.   width: 12rem;
  54. }
  56. /* 秒杀价 */
  57. .main .ms .ms-body .item div:first-of-type {
  58.   color: #e43130;
  59.   font-weight: bolder;
  60. }
  62. /* 原价 */
  63. .main .ms .ms-body .item div:last-of-type {
  64.   color: #666666;
  65.   text-decoration: line-through;
  66.   text-decoration-color: #666666;
  67. }
  69. .main .ms .ms-body .item {
  70.   text-align: center;
  71. }

更多相关文章

  1. Python_学习之Pycharm配置技巧
  2. Python爬虫进阶必备 | 关于 ReRes 的一篇教程
  3. 图文带你理解 Apache Iceberg 时间旅行是如何实现的？
  4. Apache Iceberg 是如何解决小文件问题的？
  5. K8S进阶实践 之 ConfigMap配置文件挂载的使用场景
  6. Python 下载文件的多种方法
  7. RPM打包，安装到指定目录
  8. 文件夹无法访问. 不知道如何找到呢？
  9. 开眼界！Python 遍历文件可以这样做！

随机推荐

  1. android 5.0 默认水波纹背景属性,可设置
  2. android中gallery的使用
  3. Android重要控件概览(上)
  4. Android DrawerLayout 侧边栏使用之道
  5. Android 打勾显示输入的密码
  6. Android 开发环境安装配置手册
  7. Android(安卓)MonkeyRunner测试NotePad例
  8. MainFest.xml android
  9. 20个Android游戏源码，…
  10. js 判读是iPhone还是Android