search

博客列表 >flex布局

flex布局

BARRY
BARRY原创
2020年09月26日 00:25:26693浏览

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>flex三列布局</title>
  7.     <style>
  8.       /* 初始化 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         text-decoration: none;
  16.         color: cornflowerblue;
  17.       }
  19.       body {
  20.         display: flex;
  21.         flex-flow: column nowrap;
  22.         width: 1100px;
  23.         margin: auto;
  24.       }
  25.       header,
  26.       footer {
  27.         height: 50px;
  28.         border: 1px solid;
  29.       }
  30.       header {
  31.         display: flex;
  32.         /* justify-content: center; */
  33.         align-items: center;
  34.       }
  35.       header > a {
  36.         flex: 0 1 120px;
  37.         text-align: center;
  38.       }
  39.       header > a:first-of-type {
  40.         margin-right: 80px;
  41.       }
  42.       header > a:last-of-type {
  43.         margin-left: auto;
  44.       }
  45.       header > a:hover:not(:first-of-type) {
  46.         color: crimson;
  47.       }
  48.       /* 内容区布局 */
  49.       .container {
  50.         display: flex;
  51.         min-height: 600px;
  52.         justify-content: space-between;
  53.       }
  54.       .container > aside {
  55.         flex: 0 0 200px;
  56.       }
  57.       .container > main {
  58.         flex: 0 0 600px;
  59.       }
  60.       footer {
  61.         display: flex;
  62.         flex-flow: column nowrap;
  63.         text-align: center;
  64.       }
  65.       aside {
  66.         background-color: greenyellow;
  67.       }
  68.       main {
  69.         background-color: khaki;
  70.       }
  72.       /* 媒体查询 */
  73.       @media screen and (max-width: 900px) {
  74.         aside:last-of-type {
  75.           display: none;
  76.         }
  77.         .container > main {
  78.           flex: auto;
  79.         }
  80.       }
  81.       @media screen and (max-width: 650px) {
  82.         footer,
  83.         aside,
  84.         header > a:not(:first-of-type) {
  85.           display: none;
  86.         }
  87.       }
  88.     </style>
  89.   </head>
  90.   <body>
  91.     <header>
  92.       <a href="">LOGO</a>
  93.       <a href="">首页</a>
  94.       <a href="">分类</a>
  95.       <a href="">新闻</a>
  96.       <a href="">产品</a>
  97.       <a href="">登录</a>
  98.     </header>
  99.     <div class="container">
  100.       <aside>左侧</aside>
  101.       <main>内容区</main>
  102.       <aside>右侧</aside>
  103.     </div>
  104.     <footer>
  105.       <p>。。。。。。版权所有 &copy;苏cc 8888-9999</p>
  106.       <p>地址：江苏省苏州市金枫路888号</p>
  107.     </footer>
  108.   </body>
  109. </html>

运行结果

移动端布局

  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>移动端flex</title>
  7.     <link rel="stylesheet" href="iconfont/iconfont.css" />
  8.     <link rel="stylesheet" href="icon01.css" />
  9.     <script src="iconfont/iconfont.js"></script>
  10.     <style>
  11.        * {
  12.         margin: 0;
  13.         padding: 0;
  14.       }
  15.       a {
  16.         text-decoration: none;
  17.         color: #666;
  18.       }
  20.       html {
  21.         width: 100vw;
  22.         height: 100vh;
  23.         font-size: 14px;
  24.         color: #666;
  25.       }
  27.       body {
  28.         min-width: 360px;
  29.         background-color: #fff;
  30.         display: flex;
  31.         flex-flow: column nowrap;
  32.       }
  34.       body > header {
  35.         display: flex;
  36.         width: 95vw;
  37.         color: white;
  38.         background-color: #333;
  39.         justify-content: space-between;
  40.         height: 30px;
  41.         align-items: center;
  42.         padding: 0 15px;
  43.         position: fixed;
  44.       }
  45.       body > .slider {
  46.         height: 180px;
  47.       }
  48.       body > .slider > img {
  49.         width: 100%;
  50.       }
  52.       nav {
  53.         height: 200px;
  54.         display: flex;
  55.         flex-flow: row wrap;
  56.         align-content: space-around;
  57.         margin-top: 20px;
  58.       }
  59.       nav > div {
  60.         display: flex;
  61.         width: 25vw;
  62.         flex-flow: column nowrap;
  63.         align-items: center;
  64.       }
  65.       nav > div img {
  66.         width: 50%;
  67.       }
  68.       nav > div > a:first-of-type {
  69.         text-align: center;
  70.       }
  71.       .title {
  72.         margin-top: 10px;
  73.         font-size: 1.2rem;
  74.         font-weight: normal;
  75.         text-align: center;
  76.       }
  77.       .hot-goods {
  78.         display: flex;
  79.         margin-top: 10px;
  80.         font-size: 0.8rem;
  81.         flex-flow: row wrap;
  82.       }
  83.       .hot-goods img {
  84.         width: 100%;
  85.       }
  86.       .hot-goods > .goods-img {
  87.         padding: 10px;
  88.         box-sizing: border-box;
  89.         flex: 1 0 30vw;
  90.         display: flex;
  91.         flex-flow: column nowrap;
  92.         justify-content: center;
  93.       }
  94.       .hot-goods > .goods-img > div {
  95.         display: flex;
  96.         justify-content: space-between;
  97.       }
  99.       .list-goods {
  100.         display: flex;
  101.         flex-flow: column nowrap;
  102.         margin-top: 10px;
  103.         font-size: 0.8rem;
  104.         padding: 10px;
  105.         box-sizing: border-box;
  106.         border-top: 1px solid #555;
  107.       }
  109.       .list-goods > .goods-desc {
  110.         display: flex;
  111.         margin: 10px;
  112.       }
  113.       .list-goods > .goods-desc a {
  114.         padding: 10px;
  115.         box-sizing: border-box;
  116.       }
  117.       .list-goods > .goods-desc a:hover {
  118.         color: skyblue;
  119.       }
  120.       .list-goods img {
  121.         width: 100%;
  122.       }
  124.       footer {
  125.         display: flex;
  126.         position: fixed;
  127.         bottom: 0;
  128.         height: 55px;
  129.         width: 100vw;
  130.         background-color: ghostwhite;
  131.         border-top: 1px solid #ccc;
  132.         justify-content: space-around;
  133.         align-items: center;
  134.       }
  135.       footer > a {
  136.         display: flex;
  137.         flex-direction: column;
  138.         align-items: center;
  139.       }
  140.       footer > a:hover {
  141.         color: chocolate;
  142.       }
  143.       footer > a > span:first-of-type {
  144.         font-size: 1.8rem;
  145.       }
  146.       .goods-img > div >span:last-of-type {
  147.         font-size: 1.5rem;
  148.       }
  149.       .goods-img > div >span:nth-of-type(2) {
  150.         font-size: 1.5rem;
  151.       }
  152.     </style>
  153.   </head>
  154.   <body>
  155.     <header>
  156.       <a href="">LOGO</a>
  157.       <span class="iconfont">&#xe638;</span>
  158.     </header>
  159.     <div class="slider">
  160.       <img src="image/shop1.jpg" alt="" />
  161.     </div>
  162.     <nav>
  163.       <div>
  164.         <a href=""
  165.           ><svg class="icon" aria-hidden="true">
  166.             <use xlink:href="#icon-1"></use></svg
  167.         ></a>
  168.         <a href="">男宝宝</a>
  169.       </div>
  170.       <div>
  171.         <a href=""
  172.           ><svg class="icon" aria-hidden="true">
  173.             <use xlink:href="#icon-9"></use></svg
  174.         ></a>
  175.         <a href="">女宝宝</a>
  176.       </div>
  177.       <div>
  178.         <a href=""
  179.           ><svg class="icon" aria-hidden="true">
  180.             <use xlink:href="#icon-4"></use></svg
  181.         ></a>
  182.         <a href="">连体衣</a>
  183.       </div>
  184.       <div>
  185.         <a href=""
  186.           ><svg class="icon" aria-hidden="true">
  187.             <use xlink:href="#icon-7"></use></svg
  188.         ></a>
  189.         <a href="">裤子</a>
  190.       </div>
  191.       <div>
  192.         <a href=""
  193.           ><svg class="icon" aria-hidden="true">
  194.             <use xlink:href="#icon-2"></use></svg
  195.         ></a>
  196.         <a href="">袜子</a>
  197.       </div>
  198.       <div>
  199.         <a href=""
  200.           ><svg class="icon" aria-hidden="true">
  201.             <use xlink:href="#icon-6"></use></svg
  202.         ></a>
  203.         <a href="">连衣裙</a>
  204.       </div>
  205.       <div>
  206.         <a href=""
  207.           ><svg class="icon" aria-hidden="true">
  208.             <use xlink:href="#icon-8"></use></svg
  209.         ></a>
  210.         <a href="">裙子</a>
  211.       </div>
  212.       <div>
  213.         <a href=""
  214.           ><svg class="icon" aria-hidden="true">
  215.             <use xlink:href="#icon-5"></use></svg
  216.         ></a>
  217.         <a href="">团购</a>
  218.     </nav>
  219.         <h2 class="title">热销商品</h2>
  220.         <div class="hot-goods">
  221.           <div class="goods-img">
  222.             <a href=""><img src="image/dou.jpg" alt="" /></a>
  223.             <p>巴布豆</p>
  224.             <div>
  225.               <span>99&nbsp;元</span>
  226.               <span class="iconfont">&#xe65a;</span>
  227.               <span class="iconfont">&#xe640;</span>
  228.             </div>
  229.           </div>
  230.           <div class="goods-img">
  231.             <a href=""><img src="image/dou.jpg" alt="" /></a>
  232.             <p>巴布豆</p>
  233.             <div>
  234.               <span>99&nbsp;元</span>
  235.               <span class="iconfont">&#xe640;</span>
  236.             </div>
  237.           </div>
  238.           <div class="goods-img">
  239.             <a href=""><img src="image/dou.jpg" alt="" /></a>
  240.             <p>巴布豆</p>
  241.             <div>
  242.               <span>99&nbsp;元</span>
  243.               <span class="iconfont">&#xe640;</span>
  244.             </div>
  245.           </div>
  246.         </div>
  247.       </div>
  248.     <h2 class="title">
  249.         商品列表<a href=""><img src="image/logo.jpg" height="17vw" alt="" /></a>
  250.       </h2>
  251.       <div class="list-goods">
  252.         <div class="goods-desc">
  253.           <a href=""><img src="image/yf.jpg" alt="" height="130vw" /></a>
  254.           <a href=""
  255.             >男童T恤2020秋装新款假两件宝宝长袖上衣小童打底衫儿童洋气衣服............................</a
  256.           >
  257.         </div>
  258.         <div class="goods-desc">
  259.           <a href=""><img src="image/yf.jpg" alt="" height="130vw" /></a>
  260.           <a href=""
  261.             >男童T恤2020秋装新款假两件宝宝长袖上衣小童打底衫儿童洋气衣服..........................</a
  262.           >
  263.         </div>
  264.         <div class="goods-desc">
  265.           <a href=""><img src="image/yf.jpg" alt="" height="130vw" /></a>
  266.           <a href=""
  267.             >男童T恤2020秋装新款假两件宝宝长袖上衣小童打底衫儿童洋气衣服..........................</a
  268.           >
  269.         </div>
  270.       </div>
  271.       <footer>
  272.         <a href="">
  273.           <span class="iconfont hot">&#xe63d;</span>
  274.           <span>首页</span>
  275.         </a>
  276.         <a href="">
  277.           <span class="iconfont hot">&#xe62f;</span>
  278.           <span>分类</span>
  279.         </a>
  280.         <a href="">
  281.           <span class="iconfont hot">&#xe645;</span>
  282.           <span>订单</span>
  283.         </a>
  284.         <a href="">
  285.           <span class="iconfont hot">&#xe625;</span>
  286.           <span>客服</span>
  287.         </a>
  288.       </footer>
  289.   </body>
  290. </html>

运行结果

上一条：我们搞开发的为什么会感觉到累下一条：laravel7实现后台登录页面实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多