search

博客列表 >利用flex布局模仿某商城首页

利用flex布局模仿某商城首页

酿酒的人ァ
酿酒的人ァ原创
2021年03月28日 21:59:12688浏览

示例图

代码实例

  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.     <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  8.     <link rel="stylesheet" href="static/css/index.css" />
  9.     <title>Document</title>
  10.   </head>
  11.   <body>
  12.     <header>
  13.       <!-- 小导航图标 -->
  14.       <div class="menu iconfont icon-menu"></div>
  15.       <!-- 搜索框 -->
  16.       <div class="search">
  17.         <div class="logo">JD</div>
  18.         <div class="suosuo iconfont icon-search"></div>
  19.         <input type="text" class="word" value="蛋糕" />
  20.       </div>
  21.       <a href="" class="login">登陆</a>
  22.     </header>
  24.     <div class="main">
  25.       <div class="banner">
  26.         <img src="static/images/bg/banner1.jpg" alt="" />
  27.       </div>
  28.       <ul class="nav">
  29.         <li>
  30.           <a href="#"><img src="static/images/dh/nav-1.png" alt="" /></a>
  31.           <a href="">京东超市</a>
  32.         </li>
  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-1.png" alt="" /></a>
  39.           <a href="">京东超市</a>
  40.         </li>
  41.         <li>
  42.           <a href="#"><img src="static/images/dh/nav-1.png" alt="" /></a>
  43.           <a href="">京东超市</a>
  44.         </li>
  45.         <li>
  46.           <a href="#"><img src="static/images/dh/nav-1.png" alt="" /></a>
  47.           <a href="">京东超市</a>
  48.         </li>
  49.         <li>
  50.           <a href="#"><img src="static/images/dh/nav-1.png" alt="" /></a>
  51.           <a href="">京东超市</a>
  52.         </li>
  53.         <li>
  54.           <a href="#"><img src="static/images/dh/nav-1.png" alt="" /></a>
  55.           <a href="">京东超市</a>
  56.         </li>
  57.         <li>
  58.           <a href="#"><img src="static/images/dh/nav-1.png" alt="" /></a>
  59.           <a href="">京东超市</a>
  60.         </li>
  61.         <li>
  62.           <a href="#"><img src="static/images/dh/nav-1.png" alt="" /></a>
  63.           <a href="">京东超市</a>
  64.         </li>
  65.         <li>
  66.           <a href="#"><img src="static/images/dh/nav-1.png" alt="" /></a>
  67.           <a href="">京东超市</a>
  68.         </li>
  69.       </ul>
  70.       <!-- 秒杀? -->
  71.       <div class="ms">
  72.         <div class="mstop">
  73.           <div class="left">
  74.             <div class="title">京东秒杀</div>
  75.             <div class="notice">
  76.               <div class="tips">22点专场</div>
  77.               <div class="time">01:11:22</div>
  78.             </div>
  79.           </div>
  80.           <div class="right">更多秒杀</div>
  81.         </div>
  82.         <ul class="miaoshi">
  83.           <li class="neir">
  84.             <a href="#"><img src="static/images/ms/ms-1.jpg" alt="" /></a>
  85.             <div class="iconfont icon-rmb">338</div>
  86.             <div class="iconfont icon-rmb">588</div>
  87.           </li>
  88.           <li class="neir">
  89.             <a href="#"><img src="static/images/ms/ms-1.jpg" alt="" /></a>
  90.             <div class="iconfont icon-rmb">338</div>
  91.             <div class="iconfont icon-rmb">588</div>
  92.           </li>
  93.           <li class="neir">
  94.             <a href="#"><img src="static/images/ms/ms-1.jpg" alt="" /></a>
  95.             <div class="iconfont icon-rmb">338</div>
  96.             <div class="iconfont icon-rmb">588</div>
  97.           </li>
  98.         </ul>
  99.       </div>
  100.       <div class="title">推荐商品</div>
  101.       <ul class="tj">
  102.         <li class="sp">
  103.           <a href="#"><img src="static/images/sp/sp-1.webp" alt="" /></a>
  104.           <p>这里是一个商品的介绍信息显示地方</p>
  105.           <div class="xs">
  106.             <div class="iconfont icon-rmb">100</div>
  107.             <div>看相似</div>
  108.           </div>
  109.         </li>
  110.         <li class="sp">
  111.           <a href="#"><img src="static/images/sp/sp-1.webp" alt="" /></a>
  112.           <p>这里是一个商品的介绍信息显示地方</p>
  113.           <div class="xs">
  114.             <div class="iconfont icon-rmb">100</div>
  115.             <div>看相似</div>
  116.           </div>
  117.         </li>
  118.         <li class="sp">
  119.           <a href="#"><img src="static/images/sp/sp-1.webp" alt="" /></a>
  120.           <p>这里是一个商品的介绍信息显示地方</p>
  121.           <div class="xs">
  122.             <div class="iconfont icon-rmb">100</div>
  123.             <div>看相似</div>
  124.           </div>
  125.         </li>
  126.         <li class="sp">
  127.           <a href="#"><img src="static/images/sp/sp-1.webp" alt="" /></a>
  128.           <p>这里是一个商品的介绍信息显示地方</p>
  129.           <div class="xs">
  130.             <div class="iconfont icon-rmb">100</div>
  131.             <div>看相似</div>
  132.           </div>
  133.         </li>
  134.       </ul>
  135.     </div>
  136.     <footer>
  137.       <div>
  138.         <div class="iconfont icon-home"></div>
  139.         <span>首页</span>
  140.       </div>
  141.       <div>
  142.         <div class="iconfont icon-layers"></div>
  143.         <span>分类</span>
  144.       </div>
  145.       <div>
  146.         <div class="iconfont icon-shopping-cart"></div>
  147.         <span>购物车</span>
  148.       </div>
  149.       <div>
  150.         <div class="iconfont icon-user"></div>
  151.         <span>我的</span>
  152.       </div>
  153.     </footer>
  154.   </body>
  155. </html>

CSS部分

  1. /* 导入公共初始化样式表 */
  2. @import "reset.css";
  3. /* 头部开始 */
  4. header {
  5.   display: flex;
  6.   align-items: center;
  7.   background-color: #e43130;
  8.   color: white;
  9.   height: 4.4rem;
  10.   position: fixed;
  11.   top: 0;
  12.   left: 0;
  13.   right: 0;
  14.   z-index: 100;
  16.   font-size: 1.4rem;
  17. }
  18. header .menu {
  19.   text-align: center;
  20.   flex: 1;
  21.   font-size: 2.5rem;
  22. }
  23. header .search {
  24.   flex: 6;
  25.   padding: 0.5rem;
  26.   background-color: #fff;
  27.   border-radius: 3rem;
  28.   display: flex;
  29. }
  30. header .search .logo {
  31.   color: #e43130;
  32.   flex: 0 1 4rem;
  33.   font-size: 2rem;
  34.   text-align: center;
  35.   line-height: 2rem;
  36. }
  37. header .search .suosuo {
  38.   color: #ccc;
  39.   flex: 0 1 2em;
  40.   border-left: 1px solid;
  41.   text-align: center;
  42.   line-height: 2rem;
  43. }
  44. header .search .word {
  45.   flex: auto;
  46.   border: none;
  47.   outline: none;
  48.   color: #aaa;
  49. }
  50. header .login {
  51.   color: #fff;
  52.   text-align: center;
  53.   flex: 1;
  54. }
  55. /* 头部结束 */
  57. /* 内容区暂定 */
  58. .main {
  59.   position: absolute;
  60.   top: 4.4rem;
  61.   bottom: 4.4rem;
  62.   left: 0;
  63.   right: 0;
  64.   font-size: 1.4rem;
  65. }
  66. .banner {
  67.   margin: 1rem;
  68. }
  69. .banner img {
  70.   height: 15rem;
  71.   width: auto;
  72.   border-radius: 2rem;
  73. }
  74. .main .nav {
  75.   padding: 1rem;
  76.   display: flex;
  77.   flex-flow: row wrap;
  78.   justify-content: space-between;
  79. }
  80. .main .nav li {
  81.   flex: 1 1 20%;
  82.   display: flex;
  83.   flex-flow: column nowrap;
  84.   align-items: center;
  85. }
  86. .main .nav img {
  87.   height: 4rem;
  88.   width: 4rem;
  89. }
  90. /* 秒杀 */
  91. .ms {
  92.   background-color: #fff;
  93.   padding: 1rem;
  94.   margin: 1rem;
  95.   border-radius: 2rem;
  96. }
  97. .mstop {
  98.   font-size: 1.3rem;
  99.   height: 3rem;
  100.   display: flex;
  101.   justify-content: space-between;
  102. }
  103. .left {
  104.   display: flex;
  105. }
  106. .notice {
  107.   font-size: 1.1rem;
  108.   height: 2rem;
  109.   border: 1px solid #e43130;
  110.   border-radius: 2rem;
  111.   margin-left: 1rem;
  112.   display: flex;
  113.   justify-content: center;
  114.   align-items: center;
  115. }
  116. .tips {
  117.   background-color: #e43130;
  118.   color: #fff;
  119.   border-radius: 2rem;
  120.   padding: 0.3rem 0.5rem;
  121. }
  122. .time {
  123.   padding: 0.3rem 0.5rem;
  124. }
  125. .right {
  126.   color: #e43130;
  127. }
  129. .miaoshi {
  130.   display: flex;
  131.   justify-content: space-between;
  132. }
  133. .neir {
  134.   display: flex;
  135.   flex-direction: column;
  136.   align-items: center;
  137.   justify-content: center;
  138. }
  139. .neir img {
  140.   height: 12rem;
  141.   width: 12rem;
  142. }
  143. .main .ms .neir div:first-of-type {
  144.   color: #e43130;
  145.   font-weight: bolder;
  146. }
  147. .main .ms .neir div:last-of-type {
  148.   color: #666666;
  149.   text-decoration: line-through;
  150.   text-decoration-color: #666666;
  151. }
  152. /* 商品? */
  153. .title {
  154.   height: 4rem;
  155.   color: #555;
  156.   font-weight: 500;
  157.   text-align: center;
  158. }
  159. .tj {
  160.   font-size: 1rem;
  161.   display: flex;
  162.   flex-wrap: wrap;
  163. }
  164. .sp {
  165.   flex: 1 1 calc(50% - 2rem);
  166.   background-color: #fff;
  167.   overflow: hidden;
  168.   display: flex;
  169.   flex-flow: column nowrap;
  170.   padding: 1rem;
  171.   margin-left: 1rem;
  172.   margin-bottom: 1rem;
  173.   padding-bottom: 1rem;
  174.   border-radius: 1rem;
  175. }
  176. .sp img {
  177.   width: 100%;
  178.   height: 100%;
  179. }
  180. .xs {
  181.   display: flex;
  182.   justify-content: space-between;
  183. }
  184. .xs div:first-of-type {
  185.   color: #e43130;
  186. }
  187. .xs div:last-of-type {
  188.   color: #666;
  189.   background-color: #f6f6f6;
  190.   border-radius: 1rem;
  191.   padding: 0.2rem 1rem;
  192. }
  193. /* 底部开始 */
  194. footer {
  195.   display: flex;
  196.   justify-content: space-around;
  197.   align-items: center;
  198.   color: #666;
  199.   background-color: #fafafa;
  200.   box-shadow: 0 0 3px #999;
  201.   height: 4.4rem;
  202.   position: fixed;
  203.   bottom: 0;
  204.   left: 0;
  205.   right: 0;
  206.   z-index: 100;
  207.   font-size: 1.6rem;
  208. }
  209. footer div {
  210.   display: flex;
  211.   flex-flow: column nowrap;
  212.   align-items: center;
  213. }
  215. footer div .iconfont {
  216.   font-size: 2.4rem;
  217. }
  218. footer div .span {
  219.   font-size: 1rem;
  220. }
  221. /* 底部结束 */
上一条：flex基础：flex项目上的三个属性以及利用flex完成移动商城首页的页眉和页脚布局下一条：box-sizing功能、相对定位与绝对定位
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议