search

博客列表 >HTML flex弹性布局实战之PC端通用布局和移动端布局解决方案

HTML flex弹性布局实战之PC端通用布局和移动端布局解决方案

写代码的张先森
写代码的张先森原创
2020年06月24日 15:46:111909浏览

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.以上两个示例只是大部分网站通用的格式，可根据自己的想法进行修改和重新布局

上一条：第八节 实例演示背景控制 精灵图的原理与实现 阿里字体图标的完整引用流程下一条：PC端与移动端的布局案例-web前端第10章6.23
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多