search

博客列表 >CSS弹性盒子布局---仿京东手机版页面

CSS弹性盒子布局---仿京东手机版页面

葵花宝典
葵花宝典原创
2020年12月26日 17:40:491558浏览

惭愧…
九牛二虎之力后,完成迟到的作业

先来图片效果

手机版布局
猜你喜欢页面
弹性盒子效果

利用CSS弹性盒子布局模仿网站

html 代码
代码简单,主要功夫用在 CSS

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex布局仿京东手机版首页</title>
  7.     <link rel="stylesheet" href="font/iconfont.css" />
  8.     <link rel="stylesheet" href="css/style.css" />
  9.   </head>
  10.   <body>
  11.     <div class="header">
  12.       <span class="menu iconfont icon-viewgallery"></span>
  13.       <div class="so">
  14.         <span>JD</span>
  15.         <span class="iconfont icon-search"></span>
  16.         <input type="text" placeholder="海尔电视" value="海尔电视" />
  17.       </div>
  18.       <span class="login">登录</span>
  19.     </div>
  20.     <div class="content">
  21.       <ul class="nav">
  22.         <li>
  23.           <a href="http:baidu.com" target="_blank"
  24.             ><img src="img/li1.png" alt="" /><span>京东超市</span></a
  25.           >
  26.         </li>
  27.         <li>
  28.           <a href="http:baidu.com" target="_blank"
  29.             ><img src="img/li2.png" alt="" /><span>数码电器</span></a
  30.           >
  31.         </li>
  32.         <li>
  33.           <a href="http:baidu.com" target="_blank"
  34.             ><img src="img/li3.png" alt="" /><span>京东服饰</span></a
  35.           >
  36.         </li>
  37.         <li>
  38.           <a href="http:baidu.com" target="_blank"
  39.             ><img src="img/li4.png" alt="" /><span>京东生鲜</span></a
  40.           >
  41.         </li>
  42.         <li>
  43.           <a href="http:baidu.com" target="_blank"
  44.             ><img src="img/li5.png" alt="" /><span>京东到家</span></a
  45.           >
  46.         </li>
  47.         <li>
  48.           <a href="http:baidu.com" target="_blank"
  49.             ><img src="img/li6.png" alt="" /><span>充值缴费</span></a
  50.           >
  51.         </li>
  52.         <li>
  53.           <a href="http:baidu.com" target="_blank"
  54.             ><img src="img/li7.png" alt="" /><span>9.9元拼</span></a
  55.           >
  56.         </li>
  57.         <li>
  58.           <a href="http:baidu.com" target="_blank"
  59.             ><img src="img/li8.png" alt="" /><span>领券</span></a
  60.           >
  61.         </li>
  62.         <li>
  63.           <a href="http:baidu.com" target="_blank"
  64.             ><img src="img/li9.png" alt="" /><span>领金帖</span></a
  65.           >
  66.         </li>
  67.         <li>
  68.           <a href="http:baidu.com" target="_blank"
  69.             ><img src="img/li10.png" alt="" /><span>PLUS会员</span></a
  70.           >
  71.         </li>
  72.       </ul>
  73.       <div class="haohuo">
  74.         <h3>来电好货 国潮风尚</h3>
  75.         <ul>
  76.           <li>
  77.             <a href=""
  78.               ><span>正品直籖</span><img src="img/hao1.jpg" alt=""
  79.             /></a>
  80.           </li>
  81.           <li>
  82.             <a href=""
  83.               ><span>3C大放价</span><img src="img/hao2.jpg" alt=""
  84.             /></a>
  85.           </li>
  86.           <li>
  87.             <a href=""
  88.               ><span>国货正当时</span><img src="img/hao3.jpg" alt=""
  89.             /></a>
  90.           </li>
  91.           <li>
  92.             <a href=""
  93.               ><span>都是你爱的</span><img src="img/hao4.jpg" alt=""
  94.             /></a>
  95.           </li>
  96.         </ul>
  97.       </div>
  98.       <div class="like">
  99.         <h3>猜你喜欢</h3>
  100.         <ul>
  101.           <li>
  102.             <div>
  103.               <a href=""
  104.                 ><img src="img/like1.png" alt="" /><span
  105.                   >上林春天 实木餐桌 可伸缩拆叠木餐桌椅组合餐桌</span
  106.                 >
  107.               </a>
  108.               <div class="price">
  109.                 <span class="price-left"
  110.                   ><label class="iconfont icon-icondownload"></label>999</span
  111.                 ><span class="price-right">看相似</span>
  112.               </div>
  113.             </div>
  114.           </li>
  115.           <li>
  116.             <div>
  117.               <a href=""
  118.                 ><img src="img/like2.png" alt="" /><span
  119.                   >上林春天 实木餐桌 可伸缩拆叠木餐桌椅组合餐桌</span
  120.                 >
  121.               </a>
  122.               <div class="price">
  123.                 <span class="price-left"
  124.                   ><label class="iconfont icon-icondownload"></label>999</span
  125.                 ><span class="price-right">看相似</span>
  126.               </div>
  127.             </div>
  128.           </li>
  129.           <li>
  130.             <div>
  131.               <a href=""
  132.                 ><img src="img/like3.png" alt="" /><span
  133.                   >上林春天 实木餐桌 可伸缩拆叠木餐桌椅组合餐桌</span
  134.                 >
  135.               </a>
  136.               <div class="price">
  137.                 <span class="price-left"
  138.                   ><label class="iconfont icon-icondownload"></label>999</span
  139.                 ><span class="price-right">看相似</span>
  140.               </div>
  141.             </div>
  142.           </li>
  143.           <li>
  144.             <div>
  145.               <a href=""
  146.                 ><img src="img/like4.png" alt="" /><span
  147.                   >上林春天 实木餐桌 可伸缩拆叠木餐桌椅组合餐桌</span
  148.                 >
  149.               </a>
  150.               <div class="price">
  151.                 <span class="price-left"
  152.                   ><label class="iconfont icon-icondownload"></label>999</span
  153.                 ><span class="price-right">看相似</span>
  154.               </div>
  155.             </div>
  156.           </li>
  157.           <li>
  158.             <div>
  159.               <a href=""
  160.                 ><img src="img/like2.png" alt="" /><span
  161.                   >上林春天 实木餐桌 可伸缩拆叠木餐桌椅组合餐桌</span
  162.                 >
  163.               </a>
  164.               <div class="price">
  165.                 <span class="price-left"
  166.                   ><label class="iconfont icon-icondownload"></label>999</span
  167.                 ><span class="price-right">看相似</span>
  168.               </div>
  169.             </div>
  170.           </li>
  171.           <li>
  172.             <div>
  173.               <a href=""
  174.                 ><img src="img/like3.png" alt="" /><span
  175.                   >上林春天 实木餐桌 可伸缩拆叠木餐桌椅组合餐桌</span
  176.                 >
  177.               </a>
  178.               <div class="price">
  179.                 <span class="price-left"
  180.                   ><label class="iconfont icon-icondownload"></label>999</span
  181.                 ><span class="price-right">看相似</span>
  182.               </div>
  183.             </div>
  184.           </li>
  185.         </ul>
  186.       </div>
  187.     </div>
  189.     <div class="footer">
  190.       <a href="http://baidu.com"
  191.         ><span class="iconfont icon-cry"></span> <span>首页</span></a
  192.       >
  193.       <a href="http://baidu.com"
  194.         ><span class="iconfont icon-all"></span> <span>分类</span></a
  195.       >
  196.       <a href="http://baidu.com"
  197.         ><span class="iconfont icon-creditlevel"></span> <span>京喜</span></a
  198.       >
  199.       <a href="http://baidu.com"
  200.         ><span class="iconfont icon-cart"></span> <span>购物车</span></a
  201.       >
  202.       <a href="http://baidu.com"
  203.         ><span class="iconfont icon-account"></span> <span>未登录</span></a
  204.       >
  205.     </div>
  206.   </body>
  207. </html>

CSS 文件

  1. /* 全局样式 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. li {
  8.   list-style: none;
  9. }
  10. html {
  11.   font-size: 10px;
  12.   font-family: -apple-system, Helvetica, sans-serif;
  13. }
  14. body {
  15.   background-color: #f7f7f7;
  16. }
  17. a:link {
  18.   color: #8d8d8d;
  19. }
  20. a:visited {
  21.   color: #8d8d8d;
  22. }
  23. a:active {
  24.   color: #8d8d8d;
  25. }
  26. a:hover {
  27.   color: #8d8d8d;
  28. }
  29. a {
  30.   text-decoration: none;
  31. }
  32. /* 头部样式 */
  33. .header {
  34.   height: 5rem;
  35.   background-color: #e43130;
  36.   position: fixed;
  37.   top: 0;
  38.   left: 0;
  39.   right: 0;
  40.   z-index: 100;
  41.   display: flex;
  42.   flex-flow: row nowrap;
  43.   align-items: center;
  44. }
  45. .menu {
  46.   width: 5rem;
  47.   color: snow;
  48.   font-size: 2.5rem;
  49.   font-weight: 800;
  50.   padding-left: 1rem;
  51. }
  52. .login {
  53.   color: snow;
  54.   width: 5rem;
  55.   font-size: 1.5rem;
  56. }
  57. .so {
  58.   background-color: white;
  59.   width: 100%;
  60.   height: 3.5rem;
  61.   margin: 1rem;
  62.   border-radius: 20px;
  63.   display: flex;
  64.   flex-flow: row nowrap;
  65.   align-items: center;
  66.   color: rgb(116, 115, 115);
  67. }
  68. .header .so span:first-of-type {
  69.   font-size: 2rem;
  70.   font-weight: 600;
  71.   color: red;
  72.   margin: 0 1rem;
  73. }
  74. .header .so span:nth-of-type(2) {
  75.   font-weight: 800;
  76.   padding: 0 1rem;
  77.   border-left: 1px solid rgb(116, 115, 115);
  78. }
  79. .header .so input {
  80.   margin-right: 1rem;
  81.   width: 100%;
  82.   border: 0;
  83.   color: rgb(116, 115, 115);
  84. }
  85. /* 主体样式 */
  86. .content {
  87.   margin: 6rem 0 6rem;
  88.   min-height: 100rem;
  89.   font-size: 1.3rem;
  90. }
  91. /* 主体10菜单 */
  92. .content .nav {
  93.   border-top-left-radius: 10px;
  94.   border-top-right-radius: 10px;
  95.   margin: 1rem;
  96.   background-color: white;
  97.   display: flex;
  98.   flex-flow: row wrap;
  99. }
  100. .content .nav li {
  101.   flex: 1 1 20%;
  102. }
  103. .content .nav a {
  104.   display: flex;
  105.   flex-flow: column nowrap;
  106.   align-items: center;
  107. }
  108. .content .nav li img {
  109.   width: 100%;
  110.   padding: 1.5rem;
  111. }
  112. /* 来电好货 */
  113. .content .haohuo {
  114.   margin: 1rem;
  115.   background-color: white;
  116.   text-align: center;
  117. }
  118. .content .haohuo ul {
  119.   display: flex;
  120.   flex-flow: row nowrap;
  121.   justify-content: space-evenly;
  122. }
  123. .content .haohuo a {
  124.   display: flex;
  125.   flex-flow: column nowrap;
  126.   align-items: center;
  127. }
  128. .content .haohuo img {
  129.   width: 100%;
  130. }
  131. .content .haohuo span {
  132.   margin: 0.5rem;
  133. }
  134. /* 猜你喜欢 */
  135. .content .like {
  136.   text-align: center;
  137. }
  138. .content .like ul {
  139.   display: flex;
  140.   flex-flow: row wrap;
  141. }
  142. .content .like ul li {
  143.   flex: 1 1 50%;
  144. }
  145. .content .like ul li > div {
  146.   margin: 1rem;
  147.   padding-bottom: 2rem;
  148.   background-color: white;
  149.   border-top-left-radius: 1rem;
  150.   border-top-right-radius: 1rem;
  151.   text-align: left;
  152. }
  153. .content .like img {
  154.   width: 100%;
  155.   border-radius: 1rem;
  156. }
  157. .content .like a {
  158.   color: black;
  159.   line-height: 1.5;
  160. }
  162. .content .like .price {
  163.   display: flex;
  164.   flex-flow: row nowrap;
  165.   justify-content: space-between;
  166.   padding: 1rem 0;
  167. }
  168. .content .price-right {
  169.   background-color: rgb(235, 234, 234);
  170.   color: rgb(97, 95, 95);
  171.   border-radius: 10px;
  172.   padding: 3px;
  173. }
  174. .content .price-left {
  175.   color: red;
  176.   font-weight: 600;
  177. }
  178. .content .price-left label {
  179.   margin-right: 1rem;
  180. }
  182. /* 底部样式 */
  183. .footer {
  184.   height: 6rem;
  185.   background-color: #ffffff;
  186.   position: fixed;
  187.   left: 0;
  188.   right: 0;
  189.   bottom: 0;
  190.   display: flex;
  191.   justify-content: space-around;
  192. }
  193. .footer a {
  194.   display: flex;
  195.   flex-flow: column nowrap;
  196.   align-items: center;
  197.   padding: 1rem;
  198. }
  199. .footer .iconfont {
  200.   font-size: 2.5rem;
  201. }
  202. .footer a span:nth-of-type(2) {
  203.   font-weight: 600;
  204. }
上一条：grid布局中的对齐方式下一条：Markdown的练习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
葵花宝典2020-12-27 11:03:401楼
应该有个总结: 我在把元素转过flex盒子后, 如果对盒子设置margin, 下面的子项目水平分配等一些属性就不起作用了. 子项目也一样,用了margin布局就出错. 用padding没事. 所以在子项目要继续做弹性盒子,我就在盒外面又包了一个DIV, 在DIV上设置边距. 很别扭. 但在看了grid布局后, 就个轨道属性, 这就解决了边距的问题. ....配合用应该是最好的.

相关文章

查看更多