PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 210326 flex布局 仿写

210326 flex布局 仿写

xyphpblog
xyphpblog 原创
2021年03月31日 19:10:54 420浏览

  • index.html
  • index.css
  • reset.css
  • header.css
  • nav.css
  • miaosha.css
  • recommend.css
  • footer.css

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Document</title>
  8. <link rel="stylesheet" href="static/icon-font/iconfont.css">
  9. <link rel="stylesheet" href="static/css/index.css">
  10. <link rel="stylesheet" href="static/css/header.css">
  11. <link rel="stylesheet" href="static/css/footer.css">
  12. <link rel="stylesheet" href="static/css/nav.css">
  13. <link rel="stylesheet" href="static/css/miaosha.css">
  14. <link rel="stylesheet" href="static/css/recommed.css">
  15. </head>
  16. <body>
  17. <!-- header -->
  18. <header class="header">
  19. <!-- menu icon -->
  20. <div class="menu iconfont icon-menu"></div>
  21. <!-- search bar -->
  22. <div class="search">
  23. <div class="logo">JD</div>
  24. <div class="zoom iconfont icon-search"></div>
  25. <input type="text" class="words" value="移动硬盘500G" name="" id="">
  26. </div>
  27. <!-- login button -->
  28. <a href="" class="login">登录</a>
  29. </header>
  30. <!-- main -->
  31. <main class="main">
  32. <!-- main nav area -->
  33. <ul class="nav">
  34. <li>
  35. <a href=""><img src="static/images/dh/nav-1.png" alt=""></a>
  36. <a href="">京东超市</a>
  37. </li>
  38. <li>
  39. <a href=""><img src="static/images/dh/nav-2.png" alt=""></a>
  40. <a href="">数码电器</a>
  41. </li>
  42. <li>
  43. <a href=""><img src="static/images/dh/nav-3.png" alt=""></a>
  44. <a href="">京东服饰</a>
  45. </li>
  46. <li>
  47. <a href=""><img src="static/images/dh/nav-4.png" alt=""></a>
  48. <a href="">京东生鲜</a>
  49. </li>
  50. <li>
  51. <a href=""><img src="static/images/dh/nav-5.png" alt=""></a>
  52. <a href="">京东到家</a>
  53. </li>
  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="miaosha">
  77. <!-- 秒杀区顶部 -->
  78. <div class="miaosha-top">
  79. <div class="left">
  80. <div class="title">京东秒杀</div>
  81. <div class="venue-combo">
  82. <div class="venue-hour">20点场</div>
  83. <div class="venue-time">01:39:28</div>
  84. </div>
  85. </div>
  86. <div class="right">更多秒杀 <span>&nbsp;>&nbsp; </span></div>
  87. </div>
  88. <!-- 秒杀区主体 -->
  89. <ul class="miaosha-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">338</div>
  98. <div class="iconfont icon-rmb">338</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">338</div>
  103. <div class="iconfont icon-rmb">338</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">338</div>
  108. <div class="iconfont icon-rmb">338</div>
  109. </li>
  110. </ul>
  111. </div>
  112. <!-- 推荐区 -->
  113. <ul class="recommend">
  114. <li class="item">
  115. <a href=""><img src="static/images/sp/sp-4.webp" alt=""></a>
  116. <p>商品介绍哈哈</p>
  117. <div class="price">
  118. <div class="iconfont icon-rmb">138</div>
  119. <div>看相似</div>
  120. </div>
  121. </li>
  122. <li class="item">
  123. <a href=""><img src="static/images/sp/sp-3.webp" alt=""></a>
  124. <p>商品介绍哈哈</p>
  125. <div class="price">
  126. <div class="iconfont icon-rmb">138</div>
  127. <div>看相似</div>
  128. </div>
  129. </li>
  130. <li class="item">
  131. <a href=""><img src="static/images/sp/sp-2.webp" alt=""></a>
  132. <p>商品介绍哈哈</p>
  133. <div class="price">
  134. <div class="iconfont icon-rmb">138</div>
  135. <div>看相似</div>
  136. </div>
  137. </li>
  138. <li class="item">
  139. <a href=""><img src="static/images/sp/sp-2.webp" alt=""></a>
  140. <p>商品介绍哈哈</p>
  141. <div class="price">
  142. <div class="iconfont icon-rmb">138</div>
  143. <div>看相似</div>
  144. </div>
  145. </li>
  146. </ul>
  147. </main>
  148. <footer class="footer">
  149. <div>
  150. <div class="iconfont icon-home"></div>
  151. <div>首页</div>
  152. </div>
  153. <div>
  154. <div class="iconfont icon-layers"></div>
  155. <div>分类</div>
  156. </div>
  157. <div>
  158. <div class="iconfont icon-xiangmu"></div>
  159. <div>京喜</div>
  160. </div>
  161. <div>
  162. <div class="iconfont icon-shopping-cart"></div>
  163. <div>购物车</div>
  164. </div>
  165. <div>
  166. <div class="iconfont icon-user"></div>
  167. <div>未登录</div>
  168. </div>
  169. </footer>
  170. </body>
  171. </html>

index.css

  1. /* @import url("reset.css"); */
  2. @import "reset.css";
  3. .header {
  4. background-color: #e43130;
  5. color: #fff;
  6. height: 4.4rem;
  7. /* 固定header在顶部 */
  8. position: fixed;
  9. top: 0;
  10. left: 0;
  11. right: 0;
  12. /* 保证在最前端 */
  13. z-index: 1000;
  14. }
  15. .footer {
  16. background-color: rgb(255, 250, 250);
  17. color: rgb(131, 129, 129);
  18. height: 4.4rem;
  19. /* 固定header在顶部 */
  20. position: fixed;
  21. bottom: 0;
  22. left: 0;
  23. right: 0;
  24. /* 保证在最前端 */
  25. z-index: 100;
  26. }
  27. .main {
  28. /* 主题绝对定位,防止被header, footer遮挡 */
  29. position: absolute;
  30. top: 4.4rem;
  31. left: 0;
  32. right: 0;
  33. /* 无效, 不知道为毛 */
  34. /* bottom: 4.4rem; */
  35. /* main添加padding-bottom 无法解决底部遮挡,需要推荐部分添加 */
  36. /* padding-bottom: 50rem; */
  37. /* 保证在最前端 */
  38. z-index: 100;
  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. text-decoration: none;
  11. color: #7b7b7b;
  12. }
  13. body {
  14. background-color: #f6f6f6;
  15. }
  16. html {
  17. font-size: 10px;
  18. }
  19. body {
  20. font-size: 1.6rem;
  21. }
  22. @media screen and (min-width: 480px) {
  23. html {
  24. font-size: 12px;
  25. }
  26. }
  27. @media screen and (min-width: 640px) {
  28. html {
  29. font-size: 14px;
  30. }
  31. }
  32. @media screen and (min-width: 720px) {
  33. html {
  34. font-size: 16px;
  35. }
  36. }

header.css

  1. .header {
  2. display: flex;
  3. flex-flow: row nowrap;
  4. align-items: center;
  5. }
  6. .header .menu {
  7. flex: 1;
  8. text-align: center;
  9. font-size: 2.5rem;
  10. }
  11. .header .login {
  12. flex: 1;
  13. color: white;
  14. text-align: center;
  15. }
  16. .header .search {
  17. flex: 6;
  18. background-color: #fff;
  19. border-radius: 10rem;
  20. display: flex;
  21. }
  22. .header .search .logo {
  23. color: red;
  24. text-align: center;
  25. line-height: 2rem;
  26. flex-basis: 4rem;
  27. }
  28. .header .search .zoom {
  29. color: #ccc;
  30. border-left: 1px solid;
  31. text-align: center;
  32. line-height: 2rem;
  33. flex-basis: 4rem;
  34. }
  35. .header .search .words {
  36. /* flex: auto; */
  37. font-size: 1.2rem;
  38. color: #aaa;
  39. border: none;
  40. outline: none;
  41. }

nav.css

  1. /* images */
  2. .main .nav img {
  3. height: 4rem;
  4. width: 4rem;
  5. }
  6. /* nav area */
  7. .main .nav {
  8. /* border: 1px solid white; */
  9. display: flex;
  10. flex-flow: row wrap;
  11. padding: 1rem;
  12. }
  13. .main .nav li {
  14. flex: 1 1 20%;
  15. display: flex;
  16. flex-flow: column nowrap;
  17. align-items: center;
  18. /* padding: 1rem; */
  19. }

miaosha.css

  1. .main .miaosha {
  2. background-color: #fff;
  3. margin: 1rem 2.2rem;
  4. padding: 1rem;
  5. border: 1px solid #fff;
  6. border-radius: 2rem;
  7. /* display: flex; */
  8. /* flex-flow: row nowrap; */
  9. }
  10. .main .miaosha .miaosha-top {
  11. display: flex;
  12. justify-content: space-between;
  13. margin-bottom: 2rem;
  14. }
  15. .main .miaosha .miaosha-top .left {
  16. display: flex;
  17. }
  18. .main .miaosha .miaosha-top .left .venue-combo {
  19. display: flex;
  20. /* justify-content: center;
  21. align-items: center; */
  22. }
  23. .main .miaosha .miaosha-top .left .venue-combo .venue-hour {
  24. color: red;
  25. margin: 0 1rem;
  26. }
  27. .main .miaosha .miaosha-top .left .venue-combo .venue-time {
  28. color: white;
  29. background-color: red;
  30. margin: 0 1rem;
  31. }
  32. .main .miaosha .miaosha-top .right {
  33. color: red;
  34. }
  35. .main .miaosha .miaosha-top .right > span {
  36. color: white;
  37. background-color: red;
  38. border-radius: 5rem;
  39. }
  40. .main .miaosha .miaosha-body {
  41. display: flex;
  42. flex-grow: row nowrap;
  43. justify-content: space-between;
  44. }
  45. .main .miaosha .miaosha-body .item {
  46. display: flex;
  47. flex-flow: column nowrap;
  48. align-items: center;
  49. /* text-align: center; */
  50. }
  51. .main .miaosha .miaosha-body .item img {
  52. height: 8rem;
  53. width: 8rem;
  54. }
  55. .main .miaosha .miaosha-body .item div:first-of-type {
  56. color: red;
  57. font-weight: bolder;
  58. }
  59. .main .miaosha .miaosha-body .item div:last-of-type {
  60. color: #666;
  61. text-decoration: line-through;
  62. text-decoration-color: #666;
  63. }

recommend.css

  1. .main .recommend {
  2. display: flex;
  3. flex-flow: row wrap;
  4. justify-content: center;
  5. /* border: 1px solid; */
  6. /* margin-bottom 无法解决底部遮挡 */
  7. /* margin-bottom: 20rem; */
  8. padding-bottom: 4.4rem;
  9. }
  10. .main .recommend .item {
  11. display: flex;
  12. flex-flow: column nowrap;
  13. /* ************ */
  14. /* flex-basis: 50%; */
  15. flex-basis: calc(50% - 3rem);
  16. padding: 1rem;
  17. background-color: #fff;
  18. margin-left: 1rem;
  19. margin-bottom: 1rem;
  20. /* 图没了价格也在item 底部 */
  21. justify-content: flex-end;
  22. }
  23. .main .recommend .item img {
  24. width: 100%;
  25. height: 100%;
  26. }
  27. /* 右边商品单独设置外边距 even / 2n */
  28. .main .recommend .item:nth-of-type(even) {
  29. margin-right: 1rem;
  30. }
  31. .main .recommend .item .price {
  32. display: flex;
  33. justify-content: space-between;
  34. }
  35. .main .recommend .item .price div:first-of-type {
  36. color: red;
  37. font-weight: bolder;
  38. font-size: x-large;
  39. }
  40. .main .recommend .item .price div:last-of-type {
  41. background-color: #7675752c;
  42. font-weight: lighter;
  43. font-size: smaller;
  44. border-radius: 1rem;
  45. }

footer.css

  1. .footer {
  2. display: flex;
  3. flex-flow: row nowrap;
  4. justify-content: space-around;
  5. align-items: center;
  6. }
  7. .footer > div {
  8. display: flex;
  9. flex-flow: column nowrap;
  10. }
  11. .footer > div .iconfont {
  12. font-size: 2rem;
  13. text-align: center;
  14. }
  15. .footer > div > div:last-of-type {
  16. font-size: 1rem;
  17. }
  18. .footer > div:hover {
  19. cursor: pointer;
  20. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议