简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >Flex PC端通用布局和移动端通用布局方案

Flex PC端通用布局和移动端通用布局方案

知行合一
知行合一原创
2020年07月01日 11:22:111409浏览

今天我们通过使用FLex布局实现PC端和移动端网页布局

Flex PC端通用布局方案


代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex PC端布局</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         body {
  16.             display: flex;
  17.             flex-flow: column nowrap;
  18.         }
  20.         header,
  21.         footer {
  22.             height: 50px;
  23.             border: 1px salmon solid;
  24.             width: 1000px;
  25.             margin: 0 auto;
  26.         }
  28.         header {
  29.             display: flex;
  30.             align-items: center;
  31.         }
  33.         header>a {
  34.             flex: 0 1 100px;
  35.             text-align: center;
  36.         }
  38.         header>a:first-of-type {
  39.             margin-right: 50px;
  40.         }
  42.         header>a:last-of-type {
  43.             margin-left: auto;
  44.         }
  46.         header>a:hover:not(:first-of-type) {
  47.             color: seagreen;
  48.         }
  50.         .container {
  51.             display: flex;
  52.             flex-flow: row nowrap;
  53.             min-height: 400px;
  54.             margin: 10px auto;
  55.             justify-content: center;
  56.         }
  58.         .container>aside {
  59.             background-color: seagreen;
  60.             border: 1px salmon solid;
  61.             padding: 10px;
  62.             flex: 0 0 200px;
  63.         }
  65.         .container>main {
  66.             background-color: tan;
  67.             border: 1px salmon solid;
  68.             flex: 0 0 580px;
  69.             padding: 10px;
  70.             margin: 0 10px;
  71.         }
  73.         footer {
  74.             display: flex;
  75.             flex-flow: column nowrap;
  76.             align-items: center;
  77.         }
  78.     </style>
  79. </head>
  80. <body>
  81.     <header>
  82.         <a href="">网站首页</a>
  83.         <a href="">栏目1</a>
  84.         <a href="">栏目2</a>
  85.         <a href="">栏目3</a>
  86.         <a href="">栏目4</a>
  87.         <a href="">栏目5</a>
  88.         <a href="">登陆/注册</a>
  89.     </header>
  90.     <div class="container">
  91.         <aside>左侧</aside>
  92.         <main>据6月27日美媒报道，加州大学旧金山分校研究人员首次用显微镜拍摄到新冠病毒感染健康细胞的过程。专家称新冠病毒传播方式“十分邪恶” ，利用丝状伪足提高感染效率。</main>
  93.         <aside>右侧</aside>
  94.     </div>
  95.     <footer>
  96.         <p>PHP中文网版权所有</p>
  97.         <p>地址：河南省郑州市</p>
  98.     </footer>
  99. </body>
  100. </html>

flex 移动端通用布局方案

请忽略截图中 底部的内容在图片中间显示哦！

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>flex 移动端布局</title>
  8.     <link type="text/css" rel="stylesheet" href="//at.alicdn.com/t/font_1915214_vgr1grfl9jc.css" />
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.             box-sizing: border-box;
  15.         }
  17.         li {
  18.             list-style: none;
  19.         }
  21.         html {
  22.             width: 100vw;
  23.             height: 100vh;
  24.             font-size: 14px;
  25.             color: #666;
  27.         }
  29.         a {
  30.             color: #666;
  32.             text-decoration: none;
  33.         }
  35.         a:hover {
  36.             color: #666;
  37.         }
  39.         header {
  40.             height: 30px;
  41.             background-color: #333;
  42.             display: flex;
  43.             justify-content: space-between;
  44.             padding: 0 10px;
  45.             align-items: center;
  46.             position: fixed;
  47.             top: 0;
  48.             left: 0;
  49.             width: 100vw;
  51.         }
  53.         header>a {
  54.             color: white;
  55.             font-size: 18px;
  56.         }
  58.         header>a:hover {
  59.             color: white;
  60.         }
  62.         header>span {
  63.             color: white;
  64.         }
  66.         .slider>img {
  67.             width: 100%;
  69.         }
  71.         .nav>ul {
  72.             display: flex;
  73.             flex-flow: row wrap;
  76.         }
  78.         .nav>ul>li {
  79.             width: 20%;
  80.             display: flex;
  81.             flex-direction: column;
  82.             margin: 10px 0;
  83.             align-items: center;
  84.         }
  86.         .nav>ul>li a:first-of-type {
  87.             font-size: 50px;
  88.             color: tomato;
  89.         }
  91.         .hotpro {
  92.             margin: 20px 0;
  93.             padding: 0 10px;
  95.         }
  97.         .hotpro>.h2 {
  98.             display: flex;
  99.             padding-bottom: 5px;
  100.             border-bottom: 1px dotted #333;
  103.         }
  105.         .hotpro>.h2 a {
  106.             margin-left: auto;
  107.         }
  109.         .hotpro>ul {
  110.             display: flex;
  111.             flex-wrap: wrap;
  112.             margin-top: 20px;
  113.         }
  115.         .hotpro>ul>li {
  116.             width: 50%;
  117.             display: flex;
  118.             flex-direction: column;
  119.             text-align: center;
  120.             margin: 15px 0;
  121.         }
  123.         .hotpro>ul>li>a>img {
  124.             max-width: 100%;
  125.             display: block;
  126.         }
  128.         .hotpro>ul>li>div {
  129.             display: flex;
  130.             justify-content: space-around;
  131.         }
  133.         .hotpro>ul>li>div span:last-of-type {
  134.             color: brown;
  135.         }
  137.         .newslist {
  138.             margin-bottom: 50px;
  139.         }
  141.         .newslist h2 {
  142.             text-align: center;
  143.             height: 30px;
  144.             line-height: 30px;
  145.         }
  147.         .newslist>ul {
  149.             margin: 20px 0;
  150.         }
  152.         .newslist>ul>li {
  153.             width: 100%;
  154.             display: flex;
  155.             border-bottom: 1px dotted #ccc;
  156.             margin-bottom: 15px;
  158.         }
  160.         .newslist>ul>li a {
  161.             display: block;
  163.         }
  165.         .newslist>ul>li p {}
  167.         .newslist>ul>li img {
  168.             max-width: 100%;
  169.         }
  171.         footer {
  173.             display: flex;
  174.             justify-content: space-around;
  175.             position: fixed;
  176.             bottom: 0;
  177.             left: 0;
  178.             width: 100vw;
  179.             background-color: lightgrey;
  182.         }
  184.         footer>a {
  185.             display: flex;
  186.             flex-direction: column;
  187.             text-align: center;
  188.         }
  190.         footer>a>i {
  191.             font-size: 25px !important;
  192.             color: brown;
  194.         }
  195.     </style>
  197. </head>
  199. <body>
  200.     <header>
  201.         <a href="">logo</a>
  202.         <span class="iconfont icon-fenlei"></span>
  204.     </header>
  205.     <section class="slider"><img src="images/banner.jpg"></section>
  207.     <section class="nav">
  208.         <ul>
  209.             <li><a href="" class="iconfont icon-shiwu"></a>
  210.                 <a href="">美味食物</a></li>
  212.             <li><a href="" class="iconfont icon-_fuzhi-"></a>
  213.                 <a href="">精美水杯</a></li>
  215.             <li><a href="" class="iconfont icon-yinliao"></a>
  216.                 <a href="">可口饮料</a></li>
  218.             <li><a href="" class="iconfont icon--"></a>
  219.                 <a href="">新鲜蔬菜</a></li>
  221.             <li><a href="" class="iconfont icon-danfan"></a>
  222.                 <a href="">高档数码</a></li>
  225.             <li><a href="" class="iconfont icon-jiaju"></a>
  226.                 <a href="">古典家具</a></li>
  228.             <li><a href="" class="iconfont icon-gongju"></a>
  229.                 <a href="">精品工具</a></li>
  231.             <li><a href="" class="iconfont icon-huabancopy"></a>
  232.                 <a href="">设计软件</a></li>
  233.             <li><a href="" class="iconfont icon-jixie"></a>
  234.                 <a href="">机械加工</a></li>
  235.             <li><a href="" class="iconfont icon-wenju"></a>
  236.                 <a href="">学习文具</a></li>
  237.         </ul>
  238.     </section>
  239.     <section class="hotpro">
  241.         <div class="h2">
  242.             <h2>热销商品</h2>
  243.             <a href="">更多</a>
  244.         </div>
  245.         <ul>
  246.             <li>
  247.                 <a href=""><img src="images/iphone.jpg"></a>
  248.                 <p>苹果手机ipone11 128G</p>
  249.                 <div><span>4999元</span><span class="iconfont icon-gouwuche"></span></div>
  250.             </li>
  251.             <li>
  252.                 <a href=""><img src="images/iphone.jpg"></a>
  253.                 <p>苹果手机ipone11 128G</p>
  254.                 <div><span>4999元</span><span class="iconfont icon-gouwuche"></span></div>
  255.             </li>
  256.             <li>
  257.                 <a href=""><img src="images/iphone.jpg"></a>
  258.                 <p>苹果手机ipone11 128G</p>
  259.                 <div><span>4999元</span><span class="iconfont icon-gouwuche"></span></div>
  260.             </li>
  261.             <li>
  262.                 <a href=""><img src="images/iphone.jpg"></a>
  263.                 <p>苹果手机ipone11 128G</p>
  264.                 <div><span>4999元</span><span class="iconfont icon-gouwuche"></span></div>
  265.             </li>
  266.             <li>
  267.                 <a href=""><img src="images/iphone.jpg"></a>
  268.                 <p>苹果手机ipone11 128G</p>
  269.                 <div><span>4999元</span><span class="iconfont icon-gouwuche"></span></div>
  270.             </li>
  271.             <li>
  272.                 <a href=""><img src="images/iphone.jpg"></a>
  273.                 <p>苹果手机ipone11 128G</p>
  274.                 <div><span>4999元</span><span class="iconfont icon-gouwuche"></span></div>
  275.             </li>
  277.         </ul>
  278.     </section>
  280.     <section class="newslist">
  281.         <h2>新闻资讯</h2>
  282.         <ul>
  284.             <li><a href=""><img src="images/newsimg.jpg"></a>
  285.                 <p>[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费, 今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  286.                     以上都是我瞎编</p>
  287.             </li>
  288.             <li><a href=""><img src="images/newsimg.jpg"></a>
  289.                 <p>[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费, 今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  290.                     以上都是我瞎编</p>
  291.             </li>
  292.             <li><a href=""><img src="images/newsimg.jpg"></a>
  293.                 <p>[白条24期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费, 今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后,
  294.                     以上都是我瞎编</p>
  295.             </li>
  296.         </ul>
  297.     </section>
  299.     <footer>
  300.         <a href=""><i class="iconfont icon-shouye"></i>
  301.             <pan>首页</pan>
  302.         </a>
  303.         <a href=""><i class="iconfont icon-fenlei1"></i>
  304.             <pan>分类</pan>
  305.         </a>
  306.         <a href=""><i class="iconfont icon-gouwuche1"></i>
  307.             <pan>购物车</pan>
  308.         </a>
  309.         <a href=""><i class="iconfont icon-gongzhonghao"></i>
  310.             <pan>微信</pan>
  311.         </a>
  312.     </footer>
  313. </body>
  315. </html>

总结

Flex布局比浮动和定位来布局，代码简洁，书写方便 推荐大家使用。

上一条：记录一次在 CentOS 7上安装使用 Nginx 的 WordPress下一条：关闭vscode的MDN提示框
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多