Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex PC端的一个布局方案 一个移动端的布局方案
Blogger Information
Blog 18
fans 3
comment 3
visits 16233
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex PC端的一个布局方案 一个移动端的布局方案
刹那永恒个人博客
Original
922 people have browsed it

一.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>

实际效果

总结

  • 写代码之前想好框架结构很重要
  • 备注信息很重要 代码多了不容易乱,容易让思路清晰
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看上去不错哟
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post