Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML flex弹性布局实战之PC端通用布局和移动端布局解决方案
Blogger Information
Blog 11
fans 0
comment 0
visits 12895
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML flex弹性布局实战之PC端通用布局和移动端布局解决方案
写代码的张先森
Original
1898 people have browsed it

PC端通用布局解决方案

我们利用flex弹性布局来快速完成一个PC端通用布局的解决方案，以后遇到类似布局可以直接仿照当前布局方案来做

代码：

  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>PC端布局的通用解决方案</title>
  7.     <style>
  8.       /* 初始化 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  15.       a {
  16.         color: #666;
  17.         text-decoration: none;
  18.       }
  20.       body {
  21.         /* 设置最小宽度 */
  22.         min-width: 680px;
  23.         /* 将body转为flex弹性容器 */
  24.         display: flex;
  25.         /* 主轴垂直方向,不换行 因为body下的元素都需要垂直布局 */
  26.         flex-flow: column nowrap;
  27.       }
  29.       header,
  30.       footer {
  31.         /* 添加页眉和页脚的公共样式 */
  32.         height: 50px;
  33.         border: 1px solid #000;
  34.       }
  36.       header {
  37.         /* 将页眉转为flex 弹性容器*/
  38.         display: flex;
  39.         /* 所有项目在交叉轴方向上居中显示  因为页眉的导航栏需要居中显示*/
  40.         align-items: center;
  41.       }
  43.       header > a {
  44.         /* 给定每个header下的弹性项目 不增长 不收缩 基础宽度100px */
  45.         flex: 0 1 100px;
  46.         /* 文本居中 */
  47.         text-align: center;
  48.       }
  49.       /* Logo */
  50.       header > a:first-of-type {
  51.         margin-right: 50px;
  52.       }
  54.       header > a:last-of-type {
  55.         margin-left: auto;
  56.       }
  57.       /* 鼠标悬停时忽略logo */
  58.       header > a:hover:not(:first-of-type) {
  59.         color: coral;
  60.       }
  61.       .banner {
  62.         width: 1020px;
  63.         height: 180px;
  64.         /* 转为弹性布局 */
  65.         display: flex;
  66.         margin: 10px auto;
  67.       }
  68.       .banner img {
  69.         width: 100%;
  70.       }
  71.       .container {
  72.         /* 主体这里为了显示方便给定最小高度为400px */
  73.         min-height: 400px;
  75.         margin: 10px auto;
  76.         /* 转为弹性布局 */
  77.         display: flex;
  78.         /* 剩余空间给两端平均分配 达到主体居中效果 */
  79.         justify-content: center;
  80.       }
  81.       .container > aside,
  82.       .container > main {
  83.         border: 1px solid #000;
  84.         padding: 10px;
  85.       }
  87.       .container > aside {
  88.         /* 给定两个侧边栏基础宽度为200px */
  89.         flex: 0 0 200px;
  90.       }
  91.       .container > main {
  92.         /* 主体基础宽度为600px */
  93.         flex: 0 0 600px;
  94.         margin: 0 10px;
  95.       }
  97.       footer {
  98.         /* 将页脚转为弹性布局 */
  99.         display: flex;
  100.         /* 弹性项目主轴为垂直排列 */
  101.         flex-flow: column nowrap;
  102.         /* 文本居中显示 */
  103.         text-align: center;
  104.       }
  105.     </style>
  106.   </head>
  107.   <body>
  108.     <!-- 页眉 -->
  109.     <header>
  110.       <a href="">LOGO</a>
  111.       <a href="">首页</a>
  112.       <a href="">栏目1</a>
  113.       <a href="">栏目2</a>
  114.       <a href="">栏目3</a>
  115.       <a href="">登录</a>
  116.     </header>
  118.     <!-- 轮播图 -->
  119.     <div class="banner">
  120.       <img src="static/images/banner_pc.jpg" alt="" />
  121.     </div>
  122.     <!-- 主体 -->
  123.     <div class="container">
  124.       <!-- 左边栏 -->
  125.       <aside>左边栏</aside>
  126.       <!-- 主体内容区 -->
  127.       <main>主体内容区</main>
  128.       <!-- 右边栏 -->
  129.       <aside>右边栏</aside>
  130.     </div>
  132.     <!-- 页脚 -->
  133.     <footer>
  134.       <p>
  135.         北京xx公司 &copy;版权所有 &nbsp;&nbsp;(2018-2022) | 备案号:
  136.         <a href="">京ICP-18********</a>
  137.       </p>
  138.       <p>中国.北京市通州区金融街园中园999号 | 电话: 0551-888999**</p>
  139.     </footer>
  140.   </body>
  141. </html>

效果：

PC端的通用布局大体上就这样，可以仿照这个flex自己动手试试
注：图中为了演示效果把高度都调低了 实际开发科根据自身需求调节高度大小

移动端布局解决方案

接下来我们利用flex弹性布局来快速完成一个移动端通用布局的解决方案，以后遇到类似布局可以直接仿照当前布局方案来做

代码：

  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.     <!-- 加载字体图标 -->
  7.     <link rel="stylesheet" href="static/css/font-icon.css" />
  8.     <title>移动端的解决方案</title>
  9.     <style>
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       a {
  16.         text-decoration: none;
  17.         color: #666;
  18.       }
  20.       html {
  21.         /* vw： 可视区宽度，100指100份 */
  22.         /* vh:可视区的高度，100指100分 */
  23.         width: 100vw;
  24.         height: 100vh;
  25.         font-size: 14px;
  26.         color: #666;
  27.       }
  29.       body {
  30.         min-width: 360px;
  31.         background-color: #fff;
  32.         display: flex;
  33.         flex-flow: column nowrap;
  34.       }
  36.       body > header {
  37.         color: white;
  38.         background-color: #333;
  39.         height: 30px;
  41.         display: flex;
  42.         align-items: center;
  43.         justify-content: space-between;
  45.         position: fixed;
  46.         width: 100vw;
  47.         padding: 0 15px;
  48.       }
  50.       body > .slider {
  51.         margin-top: 30px;
  52.         height: 180px;
  53.       }
  54.       body > .slider > img {
  55.         width: 100%;
  56.         height: 100%;
  57.       }
  59.       /* 主导航区 */
  60.       nav {
  61.         height: 200px;
  62.         margin-bottom: 10px;
  64.         display: flex;
  65.         /* 转为多行容器 */
  66.         flex-flow: row wrap;
  67.         align-content: space-around;
  68.       }
  70.       nav > div {
  71.         width: 25vw;
  73.         display: flex;
  74.         flex-flow: column nowrap;
  76.         align-items: center;
  77.       }
  79.       nav > div > a:first-of-type {
  80.         text-align: center;
  81.       }
  83.       nav > div img {
  84.         width: 50%;
  85.       }
  87.       /* 每个区域的标题样式 */
  88.       .title {
  89.         margin-top: 10px;
  90.         font-size: 1.2rem;
  91.         font-weight: normal;
  92.         text-align: center;
  93.       }
  94.       /* 热销商品区 */
  95.       .hot-goods {
  96.         border-top: 1px solid #cdcdcd;
  97.         margin-top: 10px;
  98.         font-size: 0.8rem;
  99.         display: flex;
  100.         /* 水平多行容器 */
  101.         flex-flow: row wrap;
  102.       }
  103.       .hot-goods img {
  104.         width: 100%;
  105.       }
  106.       .hot-goods > .goods-img {
  107.         /* 内边距并重置大小 */
  108.         padding: 10px;
  109.         box-sizing: border-box;
  110.         /* 允许放大不允许缩小,否则项目不会换行,多行容器失效 */
  111.         flex: 1 0 30vw;
  113.         /* 再将每个商品描述转为flex */
  114.         display: flex;
  115.         /* 主轴垂直且不允许换行 */
  116.         flex-flow: column nowrap;
  117.         justify-content: center;
  118.       }
  119.       /* 商品描述的最后一个区域转flex,并设置项目在主轴上排列对齐方式 */
  120.       .hot-goods > .goods-img > div {
  121.         display: flex;
  122.         /* 分散对齐 */
  123.         justify-content: space-around;
  124.       }
  126.       /* 热销样式 */
  127.       .hot {
  128.         color: coral;
  129.       }
  131.       /* 商品列表区 */
  132.       .list-goods {
  133.         padding: 10px;
  135.         border-top: 1px solid #cdcdcd;
  136.         margin-top: 10px;
  137.         font-size: 0.8rem;
  139.         display: flex;
  140.         /* 主轴水平  转为多行容器 */
  141.         flex-flow: row wrap;
  142.         /* 把底部占用的空间撑开 */
  143.         margin-bottom: 55px;
  144.       }
  145.       /* 每个项目也转为flex */
  146.       .list-goods > .goods-desc {
  147.         /* 定义每个弹性项目的宽度 */
  148.         width: 47vw;
  149.         margin: 10px 0;
  150.         /* 转为弹性布局 */
  151.         display: flex;
  152.         /* 弹性项目垂直排列 不换行 */
  153.         flex-flow: column nowrap;
  154.       }
  155.       /* 列表中每个项目的样式,加些间距 */
  156.       .list-goods > .goods-desc > a {
  157.         padding: 10px;
  158.         box-sizing: border-box;
  159.       }
  160.       .list-goods > .goods-desc > a:last-of-type:hover {
  161.         color: lightseagreen;
  162.       }
  163.       /* 图片全部适应项目空间 */
  164.       .list-goods img {
  165.         width: 100%;
  166.       }
  168.       body > footer {
  169.         color: #666;
  170.         background-color: #efefef;
  171.         border-top: 1px solid #ccc;
  172.         height: 55px;
  174.         position: fixed;
  175.         bottom: 0;
  176.         width: 100vw;
  178.         display: flex;
  179.         justify-content: space-evenly;
  180.       }
  181.       body > footer a {
  182.         margin-top: 10px;
  183.         font-size: 0.8rem;
  184.         display: flex;
  185.         /* 垂直排列不换行 */
  186.         flex-flow: column nowrap;
  187.         /* 交叉轴项目居中显示 */
  188.         align-items: center;
  189.       }
  190.       body > footer a > span:first-of-type {
  191.         /* 图标字体应该大一些 */
  192.         font-size: 1.6rem;
  193.       }
  194.     </style>
  195.   </head>
  196.   <body>
  197.     <!-- 页眉 -->
  198.     <header>
  199.       <a href="">LOGO</a>
  200.       <span class="iconfont">&#xe61f;</span>
  201.     </header>
  203.     <!-- 轮播图 -->
  204.     <div class="slider">
  205.       <img src="static/images/banner.jpg" alt="" />
  206.     </div>
  208.     <!-- 主导航区 -->
  209.     <nav>
  210.       <div>
  211.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  212.         <a href="">京东超市</a>
  213.       </div>
  214.       <div>
  215.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  216.         <a href="">服装百货</a>
  217.       </div>
  218.       <div>
  219.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  220.         <a href="">数码精品</a>
  221.       </div>
  222.       <div>
  223.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  224.         <a href="">优惠劵</a>
  225.       </div>
  226.       <div>
  227.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  228.         <a href="">超市精选</a>
  229.       </div>
  230.       <div>
  231.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  232.         <a href="">服装百货</a>
  233.       </div>
  234.       <div>
  235.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  236.         <a href="">数码精品</a>
  237.       </div>
  238.       <div>
  239.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  240.         <a href="">优惠劵</a>
  241.       </div>
  242.     </nav>
  244.     <!-- 热销商品 -->
  245.     <h2>
  246.       热销商品<span class="iconfont hot" style="color: coral;">&#xe60b;</span>
  247.     </h2>
  249.     <div class="hot-goods">
  250.       <div class="goods-img">
  251.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  252.         <p>Apple iPhone 11 128G</p>
  253.         <div>
  254.           <span>6299&nbsp;元</span>
  255.           <span class="iconfont hot">&#xe602;</span>
  256.         </div>
  257.       </div>
  258.       <div class="goods-img">
  259.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  260.         <p>Apple iPhone X 512G</p>
  261.         <div>
  262.           <span>8299&nbsp;元</span>
  263.           <span class="iconfont hot">&#xe602;</span>
  264.         </div>
  265.       </div>
  267.       <div class="goods-img">
  268.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  269.         <p>华为笔记本电脑</p>
  270.         <div>
  271.           <span>5699&nbsp;元</span>
  272.           <span class="iconfont hot">&#xe602;</span>
  273.         </div>
  274.       </div>
  275.       <div class="goods-img">
  276.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  277.         <p>小米笔记本电脑</p>
  278.         <div>
  279.           <span>3999&nbsp;元</span>
  280.           <span class="iconfont hot">&#xe602;</span>
  281.         </div>
  282.       </div>
  283.       <div class="goods-img">
  284.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  285.         <p>联想笔记本电脑</p>
  286.         <div>
  287.           <span>4399&nbsp;元</span>
  288.           <span class="iconfont hot">&#xe602;</span>
  289.         </div>
  290.       </div>
  291.     </div>
  293.     <!-- 商品列表区 -->
  294.     <h2 class="title">
  295.       商品列表<span class="iconfont hot" style="color: coral;">&#xe64b;</span>
  296.     </h2>
  297.     <div class="list-goods">
  298.       <div class="goods-desc">
  299.         <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
  300.         <a href=""
  301.           >[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  302.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  303.           以上都是我瞎编的<span
  304.             class="iconfont hot"
  305.             style="vertical-align: middle;"
  306.             >&#xe675;</span
  307.           ></a
  308.         >
  309.       </div>
  310.       <div class="goods-desc">
  311.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  312.         <a href=""
  313.           >[白条24期免息]Apple洗衣机,专业清洗苹果手机,
  314.           苹果电脑,iPad,洗好保证不能用, 免费领取500元保险费,
  315.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  316.           以上都是我瞎编的<span
  317.             class="iconfont hot"
  318.             style="vertical-align: middle;"
  319.             >&#xe675;</span
  320.           ></a
  321.         >
  322.       </div>
  323.       <div class="goods-desc">
  324.         <a href=""><img src="static/images/goods5.png" alt="" /></a>
  325.         <a href=""
  326.           >[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  327.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  328.           以上都是我瞎编的<span
  329.             class="iconfont hot"
  330.             style="vertical-align: middle;"
  331.             >&#xe675;</span
  332.           ></a
  333.         >
  334.       </div>
  335.       <div class="goods-desc">
  336.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  337.         <a href=""
  338.           >[白条24期免息]华为笔记本MateBook 14 全面屏轻薄性能笔记本电脑
  339.           十代酷睿(i5 16G 512G MX250 触控屏 多屏协同)灰, 以上都是我瞎编的<span
  340.             class="iconfont hot"
  341.             style="vertical-align: middle;"
  342.             >&#xe675;</span
  343.           ></a
  344.         >
  345.       </div>
  346.     </div>
  348.     <footer>
  349.       <a href="">
  350.         <span class="iconfont hot">&#xe60c;</span>
  351.         <span>首页</span>
  352.       </a>
  353.       <a href="">
  354.         <span class="iconfont hot">&#xe64b;</span>
  355.         <span>分类</span>
  356.       </a>
  357.       <a href="">
  358.         <span class="iconfont hot">&#xe602;</span>
  359.         <span>购物车</span>
  360.       </a>
  361.       <a href="">
  362.         <span class="iconfont hot">&#xe65b;</span>
  363.         <span>未登录</span>
  364.       </a>
  365.     </footer>
  366.   </body>
  367. </html>

效果图：

注：以上主要代码都在代码块重做了注释，请详细阅读代码，以上移动端布局示例都是采用flex弹性布局来做的。

小结：

1.请结合图中代码亲自动手试一下效果，用到的技术：阿里云字体图标的引用，flex弹性布局，css其他样式属性
2.以上两个示例只是大部分网站通用的格式，可根据自己的想法进行修改和重新布局

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：其实, 你只要有一个完整项目的开发经验, 这些都不再问题了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post