search

博客列表 >flex PC端的一个布局方案 一个移动端的布局方案

flex PC端的一个布局方案 一个移动端的布局方案

刹那永恒个人博客
刹那永恒个人博客原创
2020年06月29日 10:34:34921浏览

一.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.         text-decoration: none;
  15.         color: #ccc;
  16.       }
  17.       body {
  18.         display: flex;
  19.         /* 垂直流不换行 */
  20.         flex-flow: column nowrap;
  21.       }
  22.       .container {
  23.         display: flex;
  24.         min-height: 300px;
  25.         margin: 10px auto;
  26.         /* 居中对齐 */
  27.         justify-content: center;
  28.       }
  29.       .container > aside,
  30.       .container > main {
  31.         padding: 10px;
  32.       }
  33.       .container > aside {
  34.         flex: 0 0 200px;
  35.       }
  36.       .container > main {
  37.         flex: 0 0 450px;
  38.         margin: 0 10px;
  39.       }
  40.       header,
  41.       footer {
  42.         height: 50px;
  43.         border: 1px dashed #000;
  44.       }
  45.       header {
  46.         display: flex;
  47.         /* 所有项目在交叉轴方向上垂直居中 */
  48.         align-items: center;
  49.       }
  50.       header a {
  51.         flex: 0 1 100px;
  52.         text-align: center;
  53.       }
  54.       header a:first-of-type {
  55.         margin-right: 50px;
  56.       }
  57.       header > a:last-of-type {
  58.         margin-left: auto;
  59.       }
  60.       header a:hover:not(:first-of-type) {
  61.         color: pink;
  62.       }
  63.       footer {
  64.         text-align: center;
  65.       }
  66.       footer {
  67.         display: flex;
  68.         /* 主轴方向水平且不换行 */
  69.         flex-flow: column nowrap;
  70.         /* text-align: center; */
  71.       }
  72.     </style>
  73.   </head>
  74.   <body>
  75.     <header>
  76.       <a href="">logo</a>
  77.       <a href="">首页</a>
  78.       <a href="">栏目1</a>
  79.       <a href="">栏目2</a>
  80.       <a href="">栏目3</a>
  81.       <a href="">登陆</a>
  82.     </header>
  83.     <div class="container">
  84.       <aside>左边栏</aside>
  85.       <main>主题内容区</main>
  86.       <aside>右边栏</aside>
  87.     </div>
  88.     <footer>
  89.       php中文网©版权所有  (2020-2030)|备案号:安-00001号
  90.       <p><a href=""></a></p>
  91.       <p>中国合肥 | 电话+86 -0551 88888888</p>
  92.     </footer>
  93.   </body>
  94. </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.     <title>移动端布局 仿京东</title>
  7.     <link rel="stylesheet" href="./css/font-icon.css" />
  8.     <link rel="stylesheet" href="./css/common.css" />
  9.     <style>
  10.       html{
  11.         width: 100vw;
  12.         height: 100vh;
  13.         font-size: 14px;
  15.       }
  16.       body{
  17.         display:flex;
  18.         flex-flow: column wrap;
  19.         background-color: #eeeeee;
  21.         /* position: relative; */
  23.       }
  24. /* --------------------菜单栏--------------------------       */
  25.       header{
  26.         /* 转为弹性布局 */
  27.         display: flex;
  28.         /* 水平不换行 */
  29.         flex-flow: row nowrap;
  30.         /* 背景色 */
  31.         background-color: rgb(51, 51, 51);
  32.         /* 宽高 */
  33.         height: 32px;
  34.         width: 100vw;
  35.         /* 可放大 可收缩 尺寸自动 */
  36.         flex-flow: 1 1 auto;
  37.         /* 两端对齐 */
  38.         justify-content: space-between;
  39.         /* 上下居中 */
  40.         align-items: center;
  41.         /* 调整内边距 */
  42.         padding:0 20px;
  43.         position: fixed;
  44.       }
  45.       header>*{
  46.         /* 设置大小和颜色 */
  47.         font-size:1.2rem;
  48.         color: #eee;
  49.       }
  50. /* --------------------轮播图------------------------ */
  51.       .banner{
  52.         width: 100vw;
  53.       }
  54.       .banner>img{
  55.         width: 100vw;
  56.       } 
  57.       /* --------------商品主导航--------------------- */
  58.       /* 主导航栏 nav >div >a >img p  */
  59.       nav{ */
  60.         display:flex;
  61.         /* 水平 自动换行 */
  62.         flex-flow: row wrap;
  63.         /* 宽度可视区100% */
  64.         width: 100vw;
  65.        /* 可放大 可收缩 尺寸自动 */
  66.          flex: 1 1 auto;
  67.       }
  68.       nav>div{
  69.         margin: 10px 0;
  70.         display:flex;
  71.         /* 水平自动换行 */
  72.         flex-flow: row wrap;
  73.       }
  74.       nav>div>a{
  75.         display: flex;
  76.         width: 20vw;
  77.         flex-flow: row wrap;
  78.         flex: 1 1 auto;
  79.         align-items: center;
  80.         margin: 7px 0;
  81.       }
  82.       nav>div>a>img{
  83.         width: 40%;
  84.         /* height:auto; */
  85.       }
  86.       nav>div>a{
  87.         display:flex;
  88.         flex-flow:column nowrap;
  89.         flex: 1 1 auto;
  90.       }
  91. /* -------------热销商品大标题---------div>h1+span-------------------------- */
  92. .rxtitle{
  93.   display: flex;
  94.   flex:1 1 auto;
  95.   align-items: center;
  96.   color:rgb(252, 94, 94);
  97.   /* width: 96vw; */
  98.   /* margin: 0 50px; */
  99.   margin: 10px 20px;
  100. }
  101. /* ----hoot-goods">hoot-goods-one-----------------热销商品------------------------------------ */
  102. .hoot-goods{
  103.   width: 96vw;
  104.   display:flex;
  105.   flex-flow: row wrap;
  106.   flex:1 1 auto;
  107.   align-items: center;
  108.   justify-content: center;
  109.   margin: 10px  auto;
  110.   border-radius: 5px;
  111.   /* position: relative; */
  112. }
  113. /* 图片和标题 */
  114. .hoot-goods-one{
  115. background-color: #fff;
  116. display: flex;
  117. flex-flow: column wrap;
  118. flex: 1 1 auto;
  119. width: 45vw;
  120. font-size: 0.7rem;
  121. margin: 2px;
  122.   border-radius: 5px;
  123. }
  124. .hoot-goods-one:hover{
  125.   color:chartreuse;
  126. }
  127. /* 购物车和价格 */
  128. .hoot-goods-jiage{
  129. display: flex;
  130. flex-flow: row wrap;
  131. justify-content: center;
  132. width: 50vw;
  133. color: red;
  134. }
  135. /* 商品图和名称 */
  136. .hoot-goods-one>a{
  137.   width: 48vw;
  138.   display: flex;
  139. flex-flow: column wrap;
  140. align-items: center;
  141. }
  142. /* 商品名 */
  143. .hoot-goods-one>a>p{
  144.   padding: 3px 0;
  145. }
  146. /* 商品图 */
  147. .hoot-goods-one>a>img{
  148.   width: 30vw;
  149.   display: flex;
  150.   flex: 1 1 auto;
  151.   padding: 10px 0;
  152. }
  153. .list-title{
  154.   /* background-color: rgb(116, 116, 116); */
  155.   width: 100vw;
  156.   height: 50px;
  157.   text-align: center;
  158.   line-height: 50px;
  159. }
  160. /* ---------------------------列表商品------------------ */
  161. .last-goods{
  162.   display: flex;
  163.   flex-flow: row wrap;
  164.   flex-flow: 1 1 auto;
  165.   width: 96vw;
  166.   margin: 0 auto;
  167.   /* align-content: center; */
  168. }
  169. .last-goods-one{
  170.   display: flex;
  171.   flex-flow: row wrap;
  172.   flex-flow: 1 1 auto;
  173.   width: 96vw;
  174.   /* margin: 10 0; */
  175.   background-color: #fff;
  176.   align-content: center;
  177.   border-radius: 3px;
  178.   margin: 1px auto;
  179. }
  180. .last-goods-one>a{
  181.   margin: 15px 0;
  182.   display: flex;
  183.   flex-flow: row wrap;
  184.   flex: 1 1 auto;
  185.   /* width: 100vw; */
  186.   width: 40vw;
  187.   text-align: center;
  188.   align-items: center;
  189.   justify-content: space-between;
  190.   justify-content: center;
  191.   justify-content: space-evenly;
  193. }
  194. .last-goods-one>a>*{
  195.   width: 40vw;
  196.   text-align: center;
  197. }
  198. /* ------------footer-------------------------- */
  199. footer{
  200.   /* 转为flex */
  201.   display: flex;
  202.   flex-flow: row nowrap;
  203.   flex: 1 1 auto;
  204.   min-height: 30px;
  205.   background-color: black;
  206.   /* 居中 */
  207.   justify-content: center;
  208.   /* 分散对齐 */
  209. justify-content: space-evenly;
  210. align-items: center;
  211. }
  212. footer>*{
  213.   color: #fff;
  214. }
  215. footer>a>*:hover{
  216.   color: pink;
  217. }
  218.     </style>
  219.   </head>
  220.   <body>
  221.     <!-- headr -->
  222.     <header>
  223.       <a href="">logo</a>
  224.       <span class="iconfont">&#xe61f;</span>
  225.     </header>
  226.     <!-- 轮播图 -->
  227.     <div class="banner">
  228.       <img src="./images/banner.jpg" alt="" />
  229.     </div>
  230.     <!-- 主导航 -->
  231.     <nav>
  232.       <div>
  233.         <a href="">
  234.           <img src="./images/chaoshi.png" alt="" />
  235.           <p>京东超市</p>
  236.         </a>
  238.         <a href="">
  239.           <img src="./images/shumadianqi.png" alt="" />
  240.           <p>数码电器</p>
  241.         </a>
  242.         <a href="">
  243.           <img src="./images/jingdongfushi.png" alt="" />
  244.           <p>京东服饰</p>
  245.         </a>
  246.         <a href="">
  247.           <img src="./images/jingdongshengxian.png" alt="" />
  248.           <p>京东生鲜</p>
  249.         </a>
  250.         <a href="">
  251.           <img src="./images/dongjia.png" alt="" />
  252.           <p>京东到家</p>
  253.         </a>
  254.         <a href="">
  255.           <img src="./images/chongzhijiaofei.png" alt="" />
  256.           <p>充值缴费</p>
  257.         </a>
  258.         <a href="">
  259.           <img src="./images/9.9yuanpin.png" alt="" />
  260.           <p>9.9元拼</p>
  261.         </a>
  262.         <a href="">
  263.           <img src="./images/lingquan.png" alt="" />
  264.           <p>领券</p>
  265.         </a>
  266.         <a href="">
  267.           <img src="./images/zhuanqian.png" alt="" />
  268.           <p>赚钱</p>
  269.         </a>
  270.         <a href="">
  271.           <img src="./images/plus.png" alt="" />
  272.           <p>PLUS会员</p>
  273.         </a>
  275.     </nav>
  277.     <!-- 热销商品 标题 --------------------------------------------------------------->
  278.     <div class="rxtitle">
  279.       <h1 class="rxsphead">热销商品&nbsp;
  280.       </h1><span class="iconfont huo">&#xe60b;</span>
  281.     </div>
  282.     <!-- 热销商品大盒子 -------------------------------------------->
  283.     <div class="hoot-goods">
  285.       <!-- - 热销单个商品 -start-> -->
  286.         <div class="hoot-goods-one">
  287.           <a href="" >
  288.             <img src="./images/goods1.jpg" alt="">
  289.           <p>Apple iPhone 11 128G</p></a>
  290.           <div class="hoot-goods-jiage">
  291.             <!-- 价格购物车 -->
  292.             <span>1888元</span>&nbsp;&nbsp;&nbsp;
  293.             <span class="iconfont huo">&#xe602;</span>
  294.          </div>
  295.         </div>
  297.      <!-- 热销单个end -->
  298.            <!-- - 热销单个商品 -start-> -->
  299.            <div class="hoot-goods-one">
  300.             <a href="" >
  301.               <img src="./images/goods2.jpg" alt="">
  302.             <p>联想100核电脑</p></a>
  303.             <div class="hoot-goods-jiage">
  304.               <!-- 价格购物车 -->
  305.               <span>1888元</span>&nbsp;&nbsp;&nbsp;
  306.               <span class="iconfont huo">&#xe602;</span>
  307.            </div>
  308.           </div>
  309.                 <!-- 热销单个end -->
  310.              <!-- - 热销单个商品 -start-> -->
  311.              <div class="hoot-goods-one">
  312.               <a href="" >
  313.                 <img src="./images/goods3.jpg" alt="">
  314.               <p>滚筒洗衣机</p></a>
  315.               <div class="hoot-goods-jiage">
  316.                 <!-- 价格购物车 -->
  317.                 <span>1888元</span>&nbsp;&nbsp;&nbsp;
  318.                 <span class="iconfont huo">&#xe602;</span>
  319.              </div>
  320.             </div>
  322.          <!-- 热销单个end -->
  323.                <!-- - 热销单个商品 -start-> -->
  324.         <div class="hoot-goods-one">
  325.           <a href="" >
  326.             <img src="./images/goods4.jpg" alt="">
  327.           <p>华为P80手机</p></a>
  328.           <div class="hoot-goods-jiage">
  329.             <!-- 价格购物车 -->
  330.             <span>1888元</span>&nbsp;&nbsp;&nbsp;
  331.             <span class="iconfont huo">&#xe602;</span>
  332.          </div>
  333.         </div>
  335.      <!-- 热销单个end -->
  336.               <!-- 热销单个end -->
  337.                <!-- - 热销单个商品 -start-> -->
  338.                <div class="hoot-goods-one">
  339.                 <a href="" >
  340.                   <img src="./images/goods5.png" alt="">
  341.                 <p>vivoX21 PLUS</p></a>
  342.                 <div class="hoot-goods-jiage">
  343.                   <!-- 价格购物车 -->
  344.                   <span>1888元</span>&nbsp;&nbsp;&nbsp;
  345.                   <span class="iconfont huo">&#xe602;</span>
  346.                </div>
  347.               </div>
  349.            <!-- 热销单个end -->
  351.         <!-- 热销单个end -->
  352.               <!-- 热销单个end -->
  353.                <!-- - 热销单个商品 -start-> -->
  354.                <div class="hoot-goods-one">
  355.                 <a href="" >
  356.                   <img src="./images/goods6.webp" alt="">
  357.                 <p>罗西尼手表</p></a>
  358.                 <div class="hoot-goods-jiage">
  359.                   <!-- 价格购物车 -->
  360.                   <span>1888元</span>&nbsp;&nbsp;&nbsp;
  361.                   <span class="iconfont huo">&#xe602;</span>
  362.                </div>
  363.               </div>
  365.            <!-- 热销单个end -->
  370.           </div>
  372. <!-- 热销单个end -->
  374. <!-- ---------商品列表大标题------- -->
  376. <h2 class="list-title">商品列表<span class="iconfont hot" style="color: coral; font-size: 1.5rem;">&#xe64b;</span></h2>
  377.   </body>
  378. </html>
  379. <!-- ---------------------------商品列表------------------------ -->
  380. <!-- start------------------------------------ -->
  381. <div class="last-goods">
  382.   <div class="last-goods-one">
  383.     <a href="">
  384.       <img src="./images/goods6.webp" alt="">
  385.       <p>罗西尼手表罗西尼手表罗尼手表罗西尼手表罗西尼手表罗西</p>
  386.     </a>
  387. </div>
  388. <!-- end----------------------------------------- -->
  389. <!-- start------------------------------------ -->
  390. <div class="last-goods">
  391.   <div class="last-goods-one">
  392.     <a href="">
  393.       <img src="./images/goods6.webp" alt="">
  394.       <p>罗西尼手表罗西尼手表罗尼手表罗西尼手表罗西尼手表罗西</p>
  395.     </a>
  396. </div>
  397. <!-- end----------------------------------------- -->
  398. <!-- start------------------------------------ -->
  399. <div class="last-goods">
  400.   <div class="last-goods-one">
  401.     <a href="">
  402.       <img src="./images/goods6.webp" alt="">
  403.       <p>罗西尼手表罗西尼手表罗尼手表罗西尼手表罗西尼手表罗西</p>
  404.     </a>
  405. </div>
  406. <!-- end----------------------------------------- -->
  407. <!-- start------------------------------------ -->
  408. <div class="last-goods">
  409.   <div class="last-goods-one">
  410.     <a href="">
  411.       <img src="./images/goods6.webp" alt="">
  412.       <p>罗西尼手表罗西尼手表罗尼手表罗西尼手表罗西尼手表罗西</p>
  413.     </a>
  414. </div>
  415. <!-- end----------------------------------------- -->
  416. <!-- start------------------------------------ -->
  417. <div class="last-goods">
  418.   <div class="last-goods-one">
  419.     <a href="">
  420.       <img src="./images/goods6.webp" alt="">
  421.       <p>罗西尼手表罗西尼手表罗尼手表罗西尼手表罗西尼手表罗西</p>
  422.     </a>
  423. </div>
  424. <!-- end----------------------------------------- -->
  425. <!-- -----------------footer---------------------------- -->
  426. <footer>
  427.   <a href="">
  428.     <span class="iconfont hot">&#xe60c;首页</span>
  429.   </a>
  430.   <a href="">      
  431.       <span class="iconfont hot">&#xe64b;分类</span>
  432.   </a>
  433.   <a href="">
  434.     <span class="iconfont hot">&#xe602;购物车</span>
  435.   </a>
  436.   <a href="">
  437.     <span class="iconfont hot">&#xe65b;未登录</span>
  438.   </a>
  439. </footer>
  440. </body>

实际效果

总结

  • 写代码之前想好框架结构很重要
  • 备注信息很重要 代码多了不容易乱,容易让思路清晰
上一条：Chapter6 盒模型与元素位置与大小下一条：php中文网grid布局实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多