search

博客列表 >flex实现PC端通用布局方案与移动端主页布局(高仿小米商城app主页静态)

flex实现PC端通用布局方案与移动端主页布局(高仿小米商城app主页静态)

lilove的博客
lilove的博客原创
2020年06月28日 00:14:161407浏览

PC端通用布局案例：

  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>小刚日志：pc端通用布局方案</title>
  7.   </head>
  8.   <style>
  9.     /* 初始化所有元素 */
  10.     * {
  11.       padding: 0;
  12.       margin: 0;
  13.       box-sizing: border-box;
  14.     }
  15.     /* 将body转为弹性盒子，使页面结构垂直布局 */
  16.     body {
  17.       min-width: 800px;
  18.       display: flex;
  19.       flex-flow: column nowrap;
  20.     }
  21.     /* 头部也转为弹性盒子 */
  22.     header {
  23.       width: 100%;
  24.       height: 50px;
  25.       padding: 0 20px;
  26.       background-color: dimgrey;
  27.       display: flex;
  28.     }
  29.     /* 导航条中的链接样式初始化 */
  30.     header > a {
  31.       padding: 0 15px;
  32.       line-height: 50px;
  33.       color: honeydew;
  34.       text-decoration: none;
  35.     }
  36.     /* 将导航条第一个链接（一般是logo图片）单独设置右外边距使之与其他导航分开 */
  37.     header > a:first-of-type {
  38.       margin-right: 100px;
  39.     }
  40.     /* 将注册和登录链接单独分开（后两个a标签） */
  41.     header > a:nth-last-of-type(2) {
  42.       margin-left: auto;
  43.     }
  44.     /* 将导航条中除了第一个a标签外的所有标签设置样式 */
  45.     header > a:hover:not(:first-of-type) {
  46.       color: teal;
  47.       background-color: khaki;
  48.       cursor: pointer;
  49.     }
  50.     /* 主体部分容器设置成弹性盒子 */
  51.     .container {
  52.       min-width: 700px;
  53.       min-height: 600px;
  54.       margin: 10px auto;
  55.       display: flex;
  56.       justify-content: center;
  57.     }
  58.     /* 设置主体各区域内容内边距 */
  59.     .container > aside,
  60.     .container > main {
  61.       padding: 10px;
  62.     }
  63.     /* 设置主体区域左右边栏样式 */
  64.     .container > aside {
  65.       width: 150px;
  66.       border: 1px solid black;
  67.     }
  68.     /* 设置主体区域主题内容样式 */
  69.     .container > main {
  70.       width: 400px;
  71.       margin: 0 10px;
  72.       border: 1px dashed black;
  73.     }
  74.     /* 页面底部样式 */
  75.     footer {
  76.       display: flex;
  77.       flex-flow: column nowrap;
  78.       text-align: center;
  79.       border: 1px solid black;
  80.     }
  81.   </style>
  82.   <body>
  83.     <header>
  84.       <a href="#">logo</a>
  85.       <a href="">首页</a>
  86.       <a href="">工具</a>
  87.       <a href="">手册</a>
  88.       <a href="">登录</a>
  89.       <a href="">注册</a>
  90.     </header>
  92.     <div class="container">
  93.       <aside class="left">左边</aside>
  94.       <main class="main">主体</main>
  95.       <aside class="right">右边</aside>
  96.     </div>
  98.     <footer>
  99.       <p>XXXX©备案号：<a href="#">000000022222</a></p>
  100.       <p>版权所有|翻版必究</p>
  101.     </footer>
  102.   </body>
  103. </html>

运行效果:

移动端主页布局(高仿小米商城app主页)

  • 几乎100%用flex布局实现小米商城app主页静态内容,由于代码较多,将css样式写到了外部文件中。

  • demo.html内容：

  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.     <link rel="stylesheet" href="demo.css" />
  7.     <title>小刚日志：移动端主页布局（仿小米商城APP首页）</title>
  8.   </head>
  9.   <style>
  10.     /* unicode方式引入阿里字体图标 */
  11.     @font-face {
  12.       font-family: "iconfont";
  13.       src: url("font_icon/iconfont.eot");
  14.       src: url("font_icon/iconfont.eot?#iefix") format("embedded-opentype"),
  15.         url("font_icon/iconfont.woff2") format("woff2"),
  16.         url("font_icon/iconfont.woff") format("woff"),
  17.         url("font_icon/iconfont.ttf") format("truetype"),
  18.         url("font_icon/iconfont.svg#iconfont") format("svg");
  19.     }
  21.     /* 设置字体图标样式 */
  22.     .iconfont {
  23.       font-family: "iconfont" !important;
  24.       font-size: 30px;
  25.       font-style: normal;
  26.       -webkit-font-smoothing: antialiased;
  27.       -webkit-text-stroke-width: 0.2px;
  28.       -moz-osx-font-smoothing: grayscale;
  29.     }
  31.     .fontsmall {
  32.       font-size: 17px;
  33.     }
  34.   </style>
  35.   <body>
  36.     <!-- 搜索条 -->
  37.     <header>
  38.       <nav>
  39.         <a href="#"><strong>99包邮</strong></a>
  40.         <div>
  41.           <a href="#"><span class="iconfont fontsmall"></span></a>
  42.           <input type="text" placeholder="输入搜索" />
  43.           <a href="#"><span class="iconfont fontsmall"></span></a>
  44.         </div>
  45.         <a href="#"><span class="iconfont"></span></a>
  46.         <a href="#"><span class="iconfont"></span></a>
  47.       </nav>
  48.     </header>
  50.     <!-- 主体部分 -->
  51.     <div class="container">
  52.       <!-- 轮播图 -->
  53.       <div class="carousel">
  54.         <a href="#"><img src="images/banner1.png" alt="1" /></a>
  55.       </div>
  56.       <!-- 分类 -->
  57.       <div class="classify">
  58.         <div class="classifyShop">
  59.           <div>
  60.             <a href="#">
  61.               <img src="images/classify.png" alt="" />
  62.               <p>分类</p>
  63.             </a>
  64.           </div>
  65.           <div>
  66.             <a href="#">
  67.               <img src="images/classify.png" alt="" />
  68.               <p>分类</p>
  69.             </a>
  70.           </div>
  71.           <div>
  72.             <a href="#">
  73.               <img src="images/classify.png" alt="" />
  74.               <p>分类</p>
  75.             </a>
  76.           </div>
  77.           <div>
  78.             <a href="#">
  79.               <img src="images/classify.png" alt="" />
  80.               <p>分类</p>
  81.             </a>
  82.           </div>
  83.           <div>
  84.             <a href="#">
  85.               <img src="images/classify.png" alt="" />
  86.               <p>分类</p>
  87.             </a>
  88.           </div>
  89.           <div>
  90.             <a href="#">
  91.               <img src="images/classify.png" alt="" />
  92.               <p>分类</p>
  93.             </a>
  94.           </div>
  95.           <div>
  96.             <a href="#">
  97.               <img src="images/classify.png" alt="" />
  98.               <p>分类</p>
  99.             </a>
  100.           </div>
  101.           <div>
  102.             <a href="#">
  103.               <img src="images/classify.png" alt="" />
  104.               <p>分类</p>
  105.             </a>
  106.           </div>
  107.           <div>
  108.             <a href="#">
  109.               <img src="images/classify.png" alt="" />
  110.               <p>分类</p>
  111.             </a>
  112.           </div>
  113.           <div>
  114.             <a href="#">
  115.               <img src="images/classify.png" alt="" />
  116.               <p>分类</p>
  117.             </a>
  118.           </div>
  119.         </div>
  120.         <div class="want">
  121.           <div>
  122.             <p>想要标题</p>
  123.             <p>4百人想要</p>
  124.           </div>
  125.           <a href="#"><img src="images/want.png" alt="" /></a>
  126.           <div>
  127.             <p>想要标题</p>
  128.             <p>2千人想要</p>
  129.           </div>
  130.           <a href="#"><img src="images/want.png" alt="" /></a>
  131.           <div>
  132.             <p>想要标题</p>
  133.             <p>2千人想要</p>
  134.           </div>
  135.           <a href="#"><img src="images/want.png" alt="" /></a>
  136.         </div>
  137.       </div>
  138.       <!-- 广告图 -->
  139.       <div class="advert">
  140.         <a href="#"><img src="images/advert.png" alt="" /></a>
  141.       </div>
  142.       <!-- 推荐商品 -->
  143.       <div class="hotGoods">
  144.         <div>
  145.           <a href="#"><img src="images/hot.png" alt="" /></a>
  146.           <p>优惠价格：222元</p>
  147.           <p>商品名</p>
  148.         </div>
  149.         <div>
  150.           <a href="#"><img src="images/hot.png" alt="" /></a>
  151.           <p>优惠价格：222元</p>
  152.           <p>商品名</p>
  153.         </div>
  154.         <div>
  155.           <a href="#"><img src="images/hot.png" alt="" /></a>
  156.           <p>优惠价格：222元</p>
  157.           <p>商品名</p>
  158.         </div>
  159.       </div>
  160.       <!-- 推荐活动 -->
  161.       <div class="activity">
  162.         <div>
  163.           <a href="#">
  164.             <h3>通讯福利专场</h3>
  165.             <p>最高得168元话费</p>
  166.           </a>
  167.           <div>
  168.             <a href="#"><img src="images/activity.png" alt="" /></a>
  169.             <a href="#"><img src="images/activity.png" alt="" /></a>
  170.           </div>
  171.         </div>
  172.         <div>
  173.           <a href="#">
  174.             <h3>正在直播<small>Live</small></h3>
  175.             <p>小米端午节直播</p>
  176.           </a>
  177.           <div>
  178.             <a href="#"><img src="images/activity.png" alt="" /></a>
  179.             <a href="#"><img src="images/activity.png" alt="" /></a>
  180.           </div>
  181.         </div>
  182.         <div>
  183.           <a href="#">
  184.             <h3>49元换电池</h3>
  185.             <p>一场与鄂黑津的未完之约</p>
  186.           </a>
  187.           <div>
  188.             <a href="#"><img src="images/activity.png" alt="" /></a>
  189.             <a href="#"><img src="images/activity.png" alt="" /></a>
  190.           </div>
  191.         </div>
  192.         <div>
  193.           <a href="#">
  194.             <h3>“粽享快乐”</h3>
  195.             <p>最高立省800元</p>
  196.           </a>
  197.           <div>
  198.             <a href="#"><img src="images/activity.png" alt="" /></a>
  199.             <a href="#"><img src="images/activity.png" alt="" /></a>
  200.           </div>
  201.         </div>
  202.       </div>
  203.       <!-- 实时活动 -->
  204.       <div class="actual">
  205.         <!-- 秒杀 -->
  206.         <div class="seckill">
  207.           <div>
  208.             <a href="#"><strong>小米秒杀</strong></a>
  209.             <a href="#">
  210.               <span>14点场</span>
  211.               <span>00:13:51</span>
  212.             </a>
  213.           </div>
  214.           <a href="#">
  215.             <img src="images/seckill.png" alt="" />
  216.             <p>¥99</p>
  217.             <small><del>¥149</del></small>
  218.           </a>
  219.           <a href="#">
  220.             <img src="images/seckill.png" alt="" />
  221.             <p>¥1699</p>
  222.             <small><del>¥2499</del></small>
  223.           </a>
  224.           <a href="#">
  225.             <img src="images/seckill.png" alt="" />
  226.             <p>¥579</p>
  227.             <small><del>¥699</del></small>
  228.           </a>
  229.         </div>
  230.         <!-- 新品 -->
  231.         <div class="news">
  232.           <a href="#">
  233.             <strong>新品发布</strong><span>Redmi 10X ></span>
  234.           </a>
  235.           <a href="#">小米手环5 NFC版</a>
  236.           <a href=""><img src="images/news.png" alt="" /></a>
  237.           <a href=""><img src="images/news.png" alt="" /></a>
  238.         </div>
  239.         <!-- 项目 -->
  240.         <div class="projects">
  241.           <a href="#">
  242.             <h3>小米众筹</h3>
  243.             <p>科技新生活</p>
  244.             <img src="images/projects.png" alt="" />
  245.           </a>
  246.           <a href="#">
  247.             <h3>1分拼团</h3>
  248.             <p>全场包邮</p>
  249.             <img src="images/projects.png" alt="" />
  250.           </a>
  251.           <a href="#">
  252.             <h3>以旧换新</h3>
  253.             <p>便捷换新</p>
  254.             <img src="images/projects.png" alt="" />
  255.           </a>
  256.           <a href="#">
  257.             <h3>数码电器</h3>
  258.             <p>科技生活</p>
  259.             <img src="images/projects.png" alt="" />
  260.           </a>
  261.         </div>
  262.         <div class="channel">
  263.           <h3>精选频道</h3>
  264.           <div>
  265.             <div>
  266.               <img src="images/channel.png" alt="" />
  267.               <p>星球农场</p>
  268.             </div>
  269.             <div>
  270.               <img src="images/channel.png" alt="" />
  271.               <p>生活周边</p>
  272.             </div>
  273.             <div>
  274.               <img src="images/channel.png" alt="" />
  275.               <p>空调选购</p>
  276.             </div>
  277.             <div>
  278.               <img src="images/channel.png" alt="" />
  279.               <p>爆款新品</p>
  280.             </div>
  281.             <div>
  282.               <img src="images/channel.png" alt="" />
  283.               <p>企业团购</p>
  284.             </div>
  285.           </div>
  286.         </div>
  287.         <!-- 早报 -->
  288.         <div class="newspaper">
  289.           <a href="#">
  290.             <strong>早报  </strong>
  291.             <span>热门</span>
  292.              新品Redmi9，低至799起
  293.           </a>
  294.           <a href="#">更多</a>
  295.         </div>
  296.       </div>
  297.       <!-- 公式条 -->
  298.       <a href="#" class="standard">小米商城合规公示</a>
  299.       <!-- 分类横条 -->
  300.       <div class="category">
  301.         <a href="#">
  302.           <h4>精选</h4>
  303.           <small>为你推荐</small>
  304.         </a>
  305.         <a href="#">
  306.           <h4>手机</h4>
  307.           <small>探索黑科技</small>
  308.         </a>
  309.         <a href="#">
  310.           <h4>电器</h4>
  311.           <small>数码家电</small>
  312.         </a>
  313.         <a href="#">
  314.           <h4>特惠</h4>
  315.           <small>多买多省</small>
  316.         </a>
  317.         <a href="#">
  318.           <h4>智能家庭</h4>
  319.           <small>生活听我的</small>
  320.         </a>
  321.       </div>
  322.       <!-- 商品 -->
  323.       <div class="goods">
  324.         <a href="#">
  325.           <img src="images/goods1.png" alt="" />
  326.           <h5>商品标签商品标签商品标签商品标签商品标签商品标签</h5>
  327.           <p><span>¥9999</span><span href="#">看相似</span></p>
  328.           <span>简介</span>
  329.         </a>
  330.         <a href="#">
  331.           <img src="images/goods2.png" alt="" />
  332.           <h5>商品标签商品标签商品标签</h5>
  333.           <p><span>¥899</span><span href="#">看相似</span></p>
  334.         </a>
  335.         <a href="#">
  336.           <img src="images/goods3.png" alt="" />
  337.           <h5>商品标签商品标签</h5>
  338.           <p><span>¥899</span><span href="#">看相似</span></p>
  339.           <span>简介</span>
  340.         </a>
  341.         <a href="#">
  342.           <img src="images/goods2.png" alt="" />
  343.           <h5>商品标签</h5>
  344.           <p><span>¥99</span><span href="#">看相似</span></p>
  345.           <span>简介</span>
  346.         </a>
  347.         <a href="#">
  348.           <img src="images/goods3.png" alt="" />
  349.           <h5>商品标签商品标签商品标签商品标签</h5>
  350.           <p><span>¥79</span><span href="#">看相似</span></p>
  351.           <span>简介</span>
  352.         </a>
  353.         <a href="#">
  354.           <img src="images/goods1.png" alt="" />
  355.           <h5>商品标签</h5>
  356.           <p><span>¥899</span><span href="#">看相似</span></p>
  357.           <span>简介</span>
  358.         </a>
  359.         <a href="#">
  360.           <img src="images/goods2.png" alt="" />
  361.           <h5>商品标签</h5>
  362.           <p><span>¥899</span><span href="#">看相似</span></p>
  363.           <span>简介</span>
  364.         </a>
  365.         <a href="#">
  366.           <img src="images/goods3.png" alt="" />
  367.           <h5>商品标签</h5>
  368.           <p><span>¥899</span><span href="#">看相似</span></p>
  369.           <span>简介</span>
  370.         </a>
  371.         <a href="#">
  372.           <img src="images/goods2.png" alt="" />
  373.           <h5>商品标签</h5>
  374.           <p><span>¥899</span><span href="#">看相似</span></p>
  375.           <span>简介</span>
  376.         </a>
  377.         <a href="#">
  378.           <img src="images/goods1.png" alt="" />
  379.           <h5>商品标签</h5>
  380.           <p><span>¥899</span><span href="#">看相似</span></p>
  381.           <span>简介</span>
  382.         </a>
  383.       </div>
  384.     </div>
  386.     <!-- 底部固定工具条 -->
  387.     <footer>
  388.       <a href="#">
  389.         <span class="iconfont"></span>
  390.         <p>首页</p>
  391.       </a>
  392.       <a href="#">
  393.         <span class="iconfont"></span>
  394.         <p>分类</p>
  395.       </a>
  396.       <a href="#">
  397.         <span class="iconfont"></span>
  398.         <p>星球</p>
  399.       </a>
  400.       <a href="#">
  401.         <span class="iconfont"></span>
  402.         <p>购物车</p>
  403.       </a>
  404.       <a href="#">
  405.         <span class="iconfont"></span>
  406.         <p>我的</p>
  407.       </a>
  408.     </footer>
  410.     <!-- 回到顶部 -->
  411.     <a href="#" class="backtop">回到顶部</a>
  412.   </body>
  413. </html>
  • demo.css内容：
  1. /* 仿小米商城APP首页样式表 */
  3. /* 初始化 */
  4. * {
  5.   padding: 0;
  6.   margin: 0;
  7.   box-sizing: border-box;
  8. }
  10. body {
  11.   background-color: #f7f7f9;
  12.   display: flex;
  13.   flex-flow: column nowrap;
  14.   padding: 50px 0 60px 0;
  15. }
  17. a {
  18.   color: #737373;
  19.   text-decoration: none;
  20. }
  22. /* 顶部工具条 */
  23. header {
  24.   width: 100vw;
  25.   background-color: #db2613;
  26.   position: fixed;
  27.   top: 0;
  28.   left: 0;
  29. }
  31. header > nav {
  32.   height: 50px;
  33.   display: flex;
  34.   justify-content: space-around;
  35.   align-items: center;
  36. }
  38. header > nav > div {
  39.   height: 30px;
  40.   display: flex;
  41. }
  43. header > nav > div > input {
  44.   width: 150px;
  45.   height: 30px;
  46.   border: 0;
  47.   padding-left: 10px;
  48. }
  50. header > nav > div > :nth-child(odd) {
  51.   color: #c6c8c7;
  52.   background-color: #fff;
  53. }
  55. header > nav > div > :nth-child(1) {
  56.   border-radius: 15px 0 0 15px;
  57.   line-height: 30px;
  58.   padding-left: 5px;
  59. }
  61. header > nav > div > :nth-child(3) {
  62.   border-radius: 0 15px 15px 0;
  63.   line-height: 30px;
  64.   padding-right: 5px;
  65. }
  67. header > nav a {
  68.   color: #f8eade;
  69. }
  71. /* 主体内容 */
  72. .container {
  73.   width: 100%;
  74.   display: flex;
  75.   flex-direction: column;
  76.   justify-content: center;
  77. }
  79. .container > * {
  80.   margin: 10px auto 0 auto;
  81. }
  83. /* 轮播图 */
  84. .container > .carousel > a > img {
  85.   width: 350px;
  86. }
  88. /* 分类 */
  89. .container > .classify {
  90.   width: 90%;
  91.   border-radius: 10px;
  92.   background-color: #fff;
  93. }
  95. .container > .classify > .classifyShop {
  96.   display: flex;
  97.   flex-flow: row wrap;
  98.   align-content: space-evenly;
  99. }
  101. .container > .classify > .classifyShop > div {
  102.   margin: 0 auto;
  103.   text-align: center;
  104. }
  106. .container > .classify > .classifyShop > div > a {
  107.   color: #111;
  108. }
  110. .container > .classify > .classifyShop > div > a > img {
  111.   width: 45px;
  112.   margin: 10px 10px 0 10px;
  113. }
  115. .container > .classify > .want {
  116.   display: flex;
  117.   justify-content: center;
  118.   align-items: center;
  119. }
  121. .container > .classify > .want > div {
  122.   margin: 5px;
  123.   font-size: 0.8rem;
  124. }
  126. .container > .classify > .want img {
  127.   width: 30px;
  128.   height: 30px;
  129.   margin: auto 5px;
  130. }
  132. /* 广告图片 */
  133. .container > .advert > a > img {
  134.   width: 100%;
  135. }
  137. .container > .hotGoods {
  138.   width: 330px;
  139.   display: flex;
  140.   justify-content: space-evenly;
  141.   text-align: center;
  142. }
  144. /* 推荐商品 */
  145. .container > .hotGoods > div {
  146.   padding: 5px;
  147.   border-radius: 10px;
  148.   background-color: #0cd9c7;
  149. }
  151. .container > .hotGoods img {
  152.   width: 90px;
  153. }
  155. .container > .hotGoods p {
  156.   font-size: 0.7rem;
  157.   color: #fff;
  158. }
  160. /* 推荐活动 */
  161. .container > .activity {
  162.   width: 350px;
  163.   border-radius: 10px;
  164.   background-color: #fff;
  165.   display: flex;
  166.   flex-wrap: wrap;
  167.   align-content: center;
  168. }
  170. .container > .activity > div {
  171.   margin: auto 5px;
  172. }
  174. .container > .activity > div > a > h3 {
  175.   color: black;
  176. }
  178. .container > .activity > div:nth-child(2) > a > h3 > small {
  179.   font-size: xx-small;
  180.   color: #fff;
  181.   background-color: #fec435;
  182.   border-radius: 0 5px;
  183.   padding: 2px 5px;
  184.   margin-left: 10px;
  185.   text-align: right;
  186. }
  188. .container > .activity > div > a > p {
  189.   font-size: 0.9rem;
  190.   color: #fcc432;
  191. }
  193. .container > .activity img {
  194.   width: 80px;
  195. }
  197. /* 实时活动 */
  198. .container > .actual {
  199.   width: 350px;
  200.   text-align: center;
  201.   background-color: #fff;
  202.   border-radius: 10px;
  203.   display: flex;
  204.   flex-flow: row wrap;
  205.   align-content: space-around;
  206. }
  208. .container > .actual > .seckill,
  209. .container > .actual > .news {
  210.   width: 170px;
  211.   margin: auto;
  212.   display: flex;
  213.   flex-flow: row wrap;
  214.   align-content: space-evenly;
  215.   justify-content: space-evenly;
  216. }
  217. /* 秒杀 */
  218. .container > .actual > .seckill > div {
  219.   height: 40px;
  220.   display: flex;
  221. }
  223. .container > .actual > .seckill > div > a:first-of-type {
  224.   width: 70px;
  225.   color: black;
  226.   line-height: 30px;
  227.   margin-top: 5px;
  228.   margin-bottom: 5px;
  229. }
  231. .container > .actual > .seckill > div > a:not(:first-of-type) {
  232.   font-size: 10px;
  233.   height: 18px;
  234.   border: 1px solid #fa3726;
  235.   border-radius: 16px;
  236.   color: #fa3726;
  237.   margin-top: 11px;
  238.   margin-bottom: 11px;
  239.   display: flex;
  240. }
  242. .container > .actual > .seckill > div > a:last-of-type > span:first-child {
  243.   color: #fff;
  244.   background-color: #fa3726;
  245.   border-radius: 15px;
  246. }
  248. .container > .actual > .seckill img {
  249.   width: 50px;
  250. }
  251. /* 新品 */
  252. .container > .actual > .news img {
  253.   width: 80px;
  254. }
  256. .container > .actual > .news > a:first-child > strong {
  257.   color: #111;
  258.   margin-right: 5px;
  259. }
  261. .container > .actual > .news > a:first-child > span {
  262.   background-color: #f3f3f3;
  263.   border-radius: 15px;
  264.   font-size: 11px;
  265.   padding: 1px 3px;
  266. }
  268. .container > .actual > .news > a:first-child {
  269.   margin: 5px auto 0 6px;
  270. }
  272. .container > .actual > .news > a:nth-child(2) {
  273.   color: #e11e26;
  274.   font-size: 12px;
  275.   margin: 5px auto 10px 6px;
  276. }
  278. .container > .actual > .projects,
  279. .container > .actual > .channel,
  280. .container > .actual > .newspaper {
  281.   width: 100%;
  282.   display: flex;
  283.   margin: 15px auto 0 auto;
  284. }
  286. /* 项目 */
  287. .container > .actual > .projects {
  288.   justify-content: space-evenly;
  289.   text-align: left;
  290. }
  291. .container > .actual > .projects > a > h3 {
  292.   color: #111;
  293. }
  295. .container > .actual > .projects > a > p {
  296.   color: #f4a688;
  297.   margin-bottom: 5px;
  298. }
  299. .container > .actual > .projects > a > img {
  300.   width: 80px;
  301. }
  303. /* 精选频道 */
  304. .container > .actual > .channel {
  305.   flex-flow: column nowrap;
  306. }
  308. .container > .actual > .channel > h3 {
  309.   text-align: left;
  310.   padding: 5px 10px;
  311. }
  313. .container > .actual > .channel p {
  314.   color: #a2a2a2;
  315.   font-size: small;
  316. }
  318. .container > .actual > .channel > div {
  319.   display: flex;
  320.   justify-content: space-evenly;
  321. }
  323. .container > .actual > .channel > div > div {
  324.   display: flex;
  325.   flex-flow: column nowrap;
  326.   align-items: center;
  327. }
  329. .container > .actual > .channel > div > div > img {
  330.   width: 60px;
  331. }
  333. /* 早报 */
  334. .container > .actual > .newspaper {
  335.   width: 100%;
  336.   padding: 0 10px;
  337.   margin-bottom: 10px;
  338.   display: flex;
  339. }
  341. .container > .actual > .newspaper > a:first-child > span {
  342.   color: #e49687;
  343.   background-color: #ffe8df;
  344.   text-align: center;
  345.   padding: 2px;
  346.   border-radius: 3px;
  347.   font-size: xx-small;
  348. }
  350. .container > .actual > .newspaper > a:last-child {
  351.   margin-left: auto;
  352. }
  354. /* 合规公示 */
  355. .container > .standard {
  356.   width: 350px;
  357.   color: #dcdedd;
  358.   background-color: #fff;
  359.   border-radius: 5px;
  360.   padding: 5px;
  361.   font-size: smaller;
  362. }
  364. /* 分类横条 */
  365. .container > .category {
  366.   width: 360px;
  367.   display: flex;
  368.   align-content: center;
  369.   justify-content: space-evenly;
  370.   text-align: center;
  371. }
  373. .container > .category > a {
  374.   width: 70px;
  375. }
  377. .container > .category > a > h4 {
  378.   color: #fe6438;
  379. }
  381. .container > .category > a > small {
  382.   color: #fff;
  383.   font-size: x-small;
  384.   background-color: #fe6438;
  385.   border-radius: 15px;
  386.   padding: 2px 3px;
  387. }
  389. /* 商品 */
  390. .container > .goods {
  391.   width: 350px;
  392.   display: flex;
  393.   flex-flow: row wrap;
  394.   justify-content: space-evenly;
  395.   align-items: start;
  396. }
  398. .container > .goods > a {
  399.   width: 160px;
  400.   background-color: #fff;
  401.   border-radius: 10px;
  402.   padding: 5px;
  403.   margin-top: 10px;
  404.   display: flex;
  405.   flex-flow: column wrap;
  406. }
  408. .container > .goods > a > * {
  409.   margin-bottom: 5px;
  410. }
  412. .container > .goods > a > p {
  413.   display: flex;
  414. }
  416. .container > .goods > a > p > span:first-of-type {
  417.   color: #ea7c59;
  418. }
  420. .container > .goods > a > p > span:last-of-type {
  421.   color: #8e938c;
  422.   margin-left: auto;
  423.   border: 1px solid #8e938c;
  424.   border-radius: 15px;
  425.   font-size: x-small;
  426.   padding: 3px;
  427. }
  429. .container > .goods > a > span:last-child {
  430.   color: #8e938c;
  431.   border: 1px solid #8e938c;
  432.   border-radius: 10px;
  433.   font-size: xx-small;
  434.   padding: 5px;
  435. }
  437. .container > .goods img {
  438.   width: 150px;
  439. }
  441. /* 底部 */
  442. footer {
  443.   /* 要底部固定须设置宽度 */
  444.   width: 100vw;
  445.   height: 60px;
  446.   background-color: #fff;
  447.   display: flex;
  448.   /* 底部固定定位 */
  449.   position: fixed;
  450.   bottom: 0;
  451. }
  453. footer > a {
  454.   width: 20%;
  455.   height: 60px;
  456.   color: #7c7c7c;
  457.   display: flex;
  458.   flex-flow: column wrap;
  459.   text-align: center;
  460. }
  462. /* 回到顶部 */
  463. .backtop {
  464.   width: 45px;
  465.   height: 45px;
  466.   color: white;
  467.   text-align: center;
  468.   background-color: #ff6a31;
  469.   position: fixed;
  470.   right: 10px;
  471.   bottom: 80px;
  472. }

运行效果图：

动画演示：

总结：

这次案例将近期所学知识进行了汇总，遇到不少卡壳的地方，不过总算完成了。

  1. 在flex对齐方式上要清楚逻辑;
  2. 图标位置移动;
  3. 文字与图片的混排;
  4. 页头，页尾的固定;
  5. flex的嵌套使用;
上一条：laravel实战-仿抖音项目-视频在线播放下一条：浮动元素高度塌陷、三列经典布局（前端第七课）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多