search

博客列表 >flex学习二：pc端手机端通用解决方案

flex学习二：pc端手机端通用解决方案

小追
小追原创
2020年06月28日 12:59:47876浏览

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.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         a{
  14.             color:#666;
  15.             text-decoration:none;
  16.         }
  17.         /* 将body视为容器，header、.container、footer三个视为主轴垂直，然后.container中的元素视为主轴水平 */
  18.         body{
  19.             min-width:680px;
  20.             display:flex;
  21.             /* 主轴垂直方向，不换行 */
  22.             flex-flow:column nowrap;
  23.         }
  24.         header,footer{
  25.             height:50px;
  26.             border:1px solid #000;
  27.         }
  28.         header{
  29.             display:flex;
  30.             /* 所有项目在交叉轴上居中显示 */
  31.             align-items:center;
  32.         }
  33.         header>a{
  34.             flex:0 1 100px;
  35.             /* justify-content:center;是让所有项目在弹性容器中居中，不是让项目中的内容居中 */
  36.             text-align:center;
  37.         }
  38.         header>a:first-of-type{
  39.             margin-right:50px;
  40.         }
  41.         header>a:last-of-type{
  42.             margin-left:auto;
  43.         }
  44.         /* 鼠标悬停效果，并排除掉第一个元素 */
  45.         header>a:hover:not(:first-of-type){
  46.             color:coral;
  47.         }
  48.         .container{
  49.             display:flex;
  50.             /* 主轴水平方向，不换行，是默认值不用写
  51.              flex-flow:row nowrap; */
  52.              min-height:400px;
  53.              margin:10px auto;
  54.              justify-content:center;
  55.         }
  56.         .container>aside,.container>main{
  57.             border:1px solid #000;
  58.             padding:10px;
  59.             margin:0 10px;
  60.         }
  61.         .container>aside{
  62.             flex:0 0 200px;
  63.         }
  64.         .container>main{
  65.             flex:0 0 600px;
  66.         }
  67.         footer{
  68.             display:flex;
  69.             flex-flow:column nowrap;
  70.             text-align:center;
  71.         }
  72.     </style>
  73. </head>
  74. <body>
  75.     <!-- 页眉 -->
  76.     <header>
  77.         <a href="">LOGO</a>
  78.         <a href="">首页</a>
  79.         <a href="">栏目1</a>
  80.         <a href="">栏目2</a>
  81.         <a href="">栏目3</a>
  82.         <a href="">登录</a>
  83.     </header>
  85.     <!-- 主体 -->
  86.     <div class="container">
  87.         <!-- 左边栏 -->
  88.         <aside>左边栏</aside>
  89.         <!-- 主体内容区 -->
  90.         <main>主体内容区</main>
  91.         <!-- 右边栏 -->
  92.         <aside>右边栏</aside>
  93.     </div>
  95.     <!-- 页脚 -->
  96.     <footer>
  97.         <p>php中文网&copy;版权所有&nbsp;&nbsp;（2018-2020）| 备案号：<a href="">皖ICP-18*********</a></p>
  98.         <p>中国·合肥政务新区999号|电话：0551-88889999</p>
  99.     </footer>
  100. </body>
  101. </html>

效果图：

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.     <link rel="stylesheet" href="font-icon.css" /> 
  7.     <title>手机端解决方案</title>
  8.     <style>
  9.         /* 初始化 */
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.             box-sizing:border-box;
  14.         }
  15.         /* 给所有a标签样式 */
  16.         a{
  17.             text-decoration:none;
  18.             color:#666;
  19.         }
  20.         html{
  21.             /* vw/vh  是视口宽度、视口高度的简写100vw/100vh表示视口100%显示 */
  22.             width:100vw;
  23.             height:100vh;
  24.             font-size:14px;
  25.             color:#666;
  26.         }
  27.         body{
  28.             min-width:360px;
  29.             background-color:#fff;
  30.             display:flex;
  31.             flex-flow:column nowrap;
  32.         }
  33.         /* 页眉样式 */
  34.         body>header{
  35.             color:white;
  36.             background-color:#333;
  37.             height:30px;
  38.             display:flex;
  39.             align-items:center;
  40.             justify-content:space-between;
  41.             position:fixed;
  42.             width:100vw;
  43.             padding:0 15px;
  44.         }
  45.         /* 轮播图样式 */
  46.         body>.slider{
  47.             height:180px;
  48.         }
  49.         body>.slider>img{
  50.             /* 轮播图100%显示 */
  51.             width:100%;
  52.             height:100%;
  53.         }
  54.         /* 主导航样式 */
  55.         nav{
  56.             height:200px;
  57.             margin-bottom:10px;
  58.             /* 转换为多行容器，让项目平均分散 */
  59.             display:flex;
  60.             flex-flow:row wrap;
  61.             align-content:space-around;
  62.         }
  63.         nav>div{
  64.             width:25vw;
  65.             display:flex;
  66.             /* div转化为弹性容器，让里面的项目成列显示，不换行 */
  67.             flex-flow:column nowrap;
  68.             align-items:center;
  69.         }
  70.         nav>div>a:first-of-type{
  71.             text-align:center;
  72.         }
  73.         nav>div img{
  74.             width:50%;
  75.         }
  76.         /* 每个商品区标题样式 */
  77.         .title{
  78.             margin-top:10px;
  79.             font-size:1.2rem;
  80.             font-weight:normal;
  81.             text-align:center;
  82.         }
  83.         /* 热销商品 */
  84.         .hot-goods{
  85.             border-top:1px solid #cdcdcd;
  86.             margin-top:10px;
  87.             font-size:0.8rem;
  88.             display:flex;
  89.             /* 设置容器水平多行 */
  90.             flex-flow:row wrap;
  91.         }
  92.         /* 图片适应项目空间 */
  93.         .hot-goods img{
  94.             width:100%;
  95.         }
  96.         .hot-goods>.goods-img{
  97.             /* 为每个商品设置内边距，内容大小以盒子计算 */
  98.             padding:10px;
  99.             box-sizing:border-box;
  100.             /* 允许放大，不允许缩小，否则项目不会换行，多行容器会失效，宽度为视口的30%； */
  101.             flex:1 0 30vw;
  102.             display:flex;
  103.             /* 将内容主轴设置为垂直，不允许换行 */
  104.             flex-flow:column nowrap;
  105.             justify-content:center;
  106.         }
  107.         .hot-goods>.goods-img>p{
  108.             display:flex;
  109.             justify-content:center;
  110.         }
  111.         .hot-goods>.goods-img>div{
  112.             display:flex;
  113.             justify-content:center;
  114.         }
  115.         .hot{
  116.             color:coral;
  117.         }
  118.         /* 商品列表 */
  119.         .list-goods{
  120.             padding:10px;
  121.             border-top:1px solid #cdcdcd;
  122.             margin:10px 0;
  123.             font-size:0.8rem;
  124.             display:flex;
  125.             flex-flow:column nowrap;
  126.         }
  127.         /* 列表中每个项目都转为弹性项目 */
  128.         .list-goods>.goods-desc{
  129.             margin:10px 0;
  130.             display:flex;
  131.         }
  132.         /* 给列表中每个项目的样式加些间距 */
  133.         .list-goods>.goods-desc>a{
  134.             padding:10px;
  135.             box-sizing:border-box;
  136.         }
  137.         .list-goods>.goods-desc>a:last-of-type:hover{
  138.             color:lightseagreen;
  139.         }
  140.         /* 图片适应项目空间 */
  141.         .list-goods img{
  142.             width:100%;
  143.         }
  144.         /* 页脚样式 */
  145.         body>footer{
  146.             color:#666;
  147.             background-color:#efefef;
  148.             border-top:1px solid #ccc;
  149.             height:55px;
  150.             position:fixed;
  151.             bottom:0;
  152.             width:100vw;
  153.             display:flex;
  154.             justify-content:space-evenly;
  155.         }
  156.         body>footer a{
  157.             margin-top:10px;
  158.             font-size:0.8rem;
  159.             display:flex;
  160.             flex-flow:column nowrap;
  161.             align-items:center;
  162.         }
  163.         /* 图标字体不够大，让每个span项目中的第一个放大 */
  164.         body>footer a>span:first-of-type{
  165.             font-size:1.6rem;
  166.         }
  167.     </style>
  168. </head>
  169. <body>
  170.     <!-- 页眉 -->
  171.     <header>
  172.         <a href="">东哥商城</a>
  173.         <span class="iconfont">&#xe61f;</span>
  174.     </header>
  175.     <!-- 轮播图 -->
  176.     <div class="slider">
  177.         <img src="static/images/banner.jpg" alt="" />
  178.     </div>
  179.     <!-- 主导航 -->
  180.     <nav>
  181.         <div>
  182.             <a href=""><img src="static/images/link1.webp" alt="京东超市" /></a>
  183.             <a href="">京东超市</a>
  184.         </div>
  185.         <div>
  186.             <a href=""><img src="static/images/link2.webp" alt="服装百货" /></a>
  187.             <a href="">服装百货</a>
  188.         </div>
  189.         <div>
  190.             <a href=""><img src="static/images/link3.webp" alt="数码精品" /></a>
  191.             <a href="">数码精品</a>
  192.         </div>
  193.         <div>
  194.             <a href=""><img src="static/images/link4.webp" alt="优惠券" /></a>
  195.             <a href="">优惠券</a>
  196.         </div>
  197.         <div>
  198.             <a href=""><img src="static/images/link1.webp" alt="超市精选" /></a>
  199.             <a href="">超市精选</a>
  200.         </div>
  201.         <div>
  202.             <a href=""><img src="static/images/link2.webp" alt="服装百货" /></a>
  203.             <a href="">服装百货</a>
  204.         </div>
  205.         <div>
  206.             <a href=""><img src="static/images/link3.webp" alt="数码精品" /></a>
  207.             <a href="">数码精品</a>
  208.         </div>
  209.         <div>
  210.             <a href=""><img src="static/images/link4.webp" alt="优惠券" /></a>
  211.             <a href="">优惠券</a>
  212.         </div>
  213.     </nav>
  214.     <!-- 热销商品 -->
  215.     <h2 class="title">
  216.         热销商品<span class="iconfont hot">&#xe60b;</span>
  217.     </h2>
  218.     <div class="hot-goods">
  219.         <div class="goods-img">
  220.             <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  221.             <p>Apple iPhone 11 128G</p>
  222.             <div>
  223.                 <span class="iconfont hot">&#xeb63;</span>
  224.                 <span>6299</span>
  225.                 <span class="iconfont hot">&#xe602;</span>
  226.             </div>
  227.         </div>
  228.         <div class="goods-img">
  229.             <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  230.             <p>HuaWei mate30 128G</p>
  231.             <div>
  232.                 <span class="iconfont hot">&#xeb63;</span>
  233.                 <span>6299</span>
  234.                 <span class="iconfont hot">&#xe602;</span>
  235.             </div>
  236.         </div>
  237.         <div class="goods-img">
  238.             <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  239.             <p>XiaoMi 11 128G</p>
  240.             <div>
  241.                 <span class="iconfont hot">&#xeb63;</span>
  242.                 <span>6299</span>
  243.                 <span class="iconfont hot">&#xe602;</span>
  244.             </div>
  245.         </div>
  246.         <div class="goods-img">
  247.             <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  248.             <p>Apple Macbook 11 i7</p>
  249.             <div>
  250.                 <span class="iconfont hot">&#xeb63;</span>
  251.                 <span>6299</span>
  252.                 <span class="iconfont hot">&#xe602;</span>
  253.             </div>
  254.         </div>
  255.         <div class="goods-img">
  256.             <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  257.             <p>HuaWei MateBook 14</p>
  258.             <div>
  259.                 <span class="iconfont hot">&#xeb63;</span>
  260.                 <span>6299</span>
  261.                 <span class="iconfont hot">&#xe602;</span>
  262.             </div>
  263.         </div>
  264.         <div class="goods-img">
  265.             <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  266.             <p>RedMiBook 16</p>
  267.             <div>
  268.                 <span class="iconfont hot">&#xeb63;</span>
  269.                 <span>6299</span>
  270.                 <span class="iconfont hot">&#xe602;</span>
  271.             </div>
  272.         </div>
  273.     </div>
  274.     <!-- 商品列表 -->
  275.     <h2 class="title">商品列表<span class="iconfont hot">&#xe64b;</span></h2>
  276.     <div class="list-goods">
  277.         <div class="goods-desc">
  278.             <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
  279.             <a href="">[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  280.                 今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后
  281.                 <span class="iconfont hot">&#xe602;</span>
  282.             </a>
  283.         </div>
  284.         <div class="goods-desc">
  285.             <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
  286.             <a href="">[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  287.                 今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后
  288.                 <span class="iconfont hot">&#xe602;</span>
  289.             </a>
  290.         </div>
  291.         <div class="goods-desc">
  292.             <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
  293.             <a href="">[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  294.                 今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后
  295.                 <span class="iconfont hot">&#xe602;</span>
  296.             </a>
  297.         </div>
  298.         <div class="goods-desc">
  299.             <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
  300.             <a href="">[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  301.                 今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后
  302.                 <span class="iconfont hot">&#xe602;</span>
  303.             </a>
  304.         </div>
  305.     </div>
  306.     <!-- 页脚 -->
  307.     <footer>
  308.         <a href="">
  309.             <span class="iconfont hot">&#xe60c;</span>
  310.             <span>首页</span>
  311.         </a>
  312.         <a href="">
  313.             <span class="iconfont hot">&#xe64b;</span>
  314.             <span>分类</span>
  315.         </a>
  316.         <a href="">
  317.             <span class="iconfont hot">&#xe602;</span>
  318.             <span>购物车</span>
  319.         </a>
  320.         <a href="">
  321.             <span class="iconfont hot">&#xe65b;</span>
  322.             <span>个人中心</span>
  323.         </a>
  324.     </footer>
  325. </body>
  326. </html>

" class="reference-link">效果图：

上一条：Flex 容器的常用属性与简单案例下一条：唯品会首页部分页面模仿
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多