flex应用:仿写某网站H5页面

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

index.css文件

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

reset.css文件

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

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. }
  11. .header .menu {
  12. text-align: center;
  13. flex: 1;
  14. font-size: 2.5rem;
  15. }
  16. .header .search {
  17. flex: 6;
  18. padding: 0.5rem;
  19. background-color: #fff;
  20. border-radius: 3rem;
  21. display: flex;
  22. }
  23. /* logo */
  24. .header .search .logo {
  25. color: #e43130;
  26. flex: 0 1 4rem;
  27. font-size: 2rem;
  28. /* 水平垂直居中 */
  29. text-align: center;
  30. line-height: 2rem;
  31. }
  32. /* 放大镜 */
  33. .header .search .zoom {
  34. color: #ccc;
  35. flex: 0 1 4rem;
  36. border-left: 1px solid;
  37. /* 水平垂直居中 */
  38. text-align: center;
  39. line-height: 2rem;
  40. }
  41. /* 搜索文本框 */
  42. .header .search .words {
  43. flex: auto;
  44. border: none;
  45. outline: none;
  46. color: #aaa;
  47. }

footer.css文件

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

nav.css文件

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

ms.css文件

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