search

博客列表 >使用flex布局完成pc端的三列布局和移动端的布局

使用flex布局完成pc端的三列布局和移动端的布局

丶久而旧之丶
丶久而旧之丶原创
2020年07月06日 22:56:381518浏览

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.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.         font-size: 16px;
  14.       }
  15.       /* 设置页眉和页脚的高度和背景 */
  16.       header,
  17.       footer {
  18.         height: 60px;
  19.         background-color: lightyellow;
  20.       }
  21.       /* 设置页眉的flex属性 */
  22.       header {
  23.         display: flex;
  24.       }
  25.       /* 设置div的flex属性，宽高，外边距 */
  26.       div {
  27.         display: flex;
  28.         flex-flow: row nowrap;
  29.         width: 960px;
  30.         min-height: 700px;
  31.         margin: 10px auto;
  32.       }
  33.       /* 设置边栏的宽高和背景 */
  34.       div > aside {
  35.         width: 200px;
  36.         height: inherit;
  37.         background-color: lightskyblue;
  38.       }
  39.       /* 设置主体内容区的宽高，背景和外边距 */
  40.       div > main {
  41.         width: 100%;
  42.         height: inherit;
  43.         margin: 0 10px;
  44.         background-color: mediumturquoise;
  45.       }
  46.       /* 设置a标签的样式 */
  47.       header > a {
  48.         text-decoration: none;
  49.         color: black;
  50.         line-height: 60px;
  51.         padding: 0 27px;
  52.       }
  53.       /* 设置LOGO的外边距 */
  54.       header > a:first-of-type {
  55.         padding: 0 55px;
  56.       }
  57.       /* 设置登录/注册使其放在最右边 */
  58.       header > a:last-of-type {
  59.         margin-left: auto;
  60.       }
  61.       /* 设置页眉子元素中除去第一个a标签的鼠标悬停效果 */
  62.       header > a:hover:not(:first-of-type) {
  63.         background-color: lightsalmon;
  64.         color: white;
  65.       }
  66.       /* 设置页脚的flex属性 */
  67.       footer {
  68.         display: flex;
  69.         flex-flow: column nowrap;
  70.         text-align: center;
  71.         justify-content: center;
  72.       }
  73.     </style>
  74.   </head>
  75.   <body>
  76.     <header>
  77.       <a href="">LOGO</a>
  78.       <a href="">首页</a>
  79.       <a href="">视频教程</a>
  80.       <a href="">入门教程</a>
  81.       <a href="">社区问答</a>
  82.       <a href="">技术文章</a>
  83.       <a href="">登录/注册</a>
  84.     </header>
  85.     <div>
  86.       <aside>左边栏</aside>
  87.       <main>内容区</main>
  88.       <aside>右边栏</aside>
  89.     </div>
  90.     <footer>
  91.       <p>php中文网：公益在线php培训，帮助PHP学习者快速成长！</p>
  92.       <p>座机号码：0551-64933227 安徽省合肥市政务新区置地广场D座2101</p>
  93.     </footer>
  94.   </body>
  95. </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>移动端布局</title>
  7.     <link rel="stylesheet" href="icon.css" />
  8.     <style>
  9.       /* 样式初始化 */
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       /* body设置成弹性盒子，垂直方向为主轴，不换行并设置宽度 */
  16.       body {
  17.         display: flex;
  18.         flex-flow: column nowrap;
  19.         width: 100vw;
  20.       }
  21.       /* 设置页眉的弹性盒子，高度和居中 */
  22.       header > div {
  23.         display: flex;
  24.         height: 25px;
  25.         align-items: center;
  26.       }
  27.       /* 设置a标签的字体和下划线 */
  28.       a {
  29.         text-decoration: none;
  30.         color: lightslategray;
  31.       }
  32.       /* 设置LOGO的左右外边距 */
  33.       header > div > a:first-of-type {
  34.         margin: 0 10px;
  35.       }
  36.       /* 使登录注册按钮移到右边 */
  37.       header > div > a:last-of-type {
  38.         margin-left: auto;
  39.         margin-right: 10px;
  40.       }
  41.       /* 设置轮播图的宽度 */
  42.       .slider > a > img {
  43.         width: 98vw;
  44.       }
  45.       /* 设置导航栏的弹性盒子 */
  46.       nav {
  47.         display: flex;
  48.         flex-flow: row wrap;
  49.         width: 98vw;
  50.       }
  51.       /* 设置导航栏内每个项目的宽高 */
  52.       nav > div {
  53.         width: 19.5vw;
  54.         height: 73px;
  55.       }
  56.       /* 设置每个项目为弹性盒子并主轴为垂直方向不换行 */
  57.       nav > div {
  58.         display: flex;
  59.         flex-flow: column nowrap;
  60.       }
  61.       /* 设置每个项目图片的宽度 */
  62.       nav > div > a > img {
  63.         width: 50%;
  64.       }
  65.       /* 设置居中显示 */
  66.       nav > div > a {
  67.         text-align: center;
  68.       }
  69.       /* 设置h2的样式 */
  70.       h2 {
  71.         background-color: lightskyblue;
  72.         height: 27px;
  73.         width: 98vw;
  74.         font-size: 1.3rem;
  75.         padding: 0 8px;
  76.         margin-bottom: 10px;
  77.       }
  78.       /* 设置字体图标的样式 */
  79.       .hot {
  80.         font-size: 1.1rem;
  81.         color: red;
  82.         margin-left: 3px;
  83.       }
  84.       /* 设置热销商品区为弹性盒子 */
  85.       .hot-goods {
  86.         display: flex;
  87.         flex-flow: row wrap;
  88.       }
  89.       /* 设置热销商品区下每个项目都为弹性盒子 */
  90.       .goods-img {
  91.         display: flex;
  92.         flex-flow: column nowrap;
  93.         width: 50vw;
  94.         margin-top: 15px;
  95.       }
  96.       /* 居中显示 */
  97.       .goods-img {
  98.         text-align: center;
  99.       }
  100.       /* 设置价格和字体一栏为弹性盒子 */
  101.       .qian {
  102.         display: flex;
  103.         justify-content: space-between;
  104.         align-items: center;
  105.         margin-top: 3px;
  106.         padding: 0 15%;
  107.       }
  108.       /* 设置商品列表区为弹性盒子 */
  109.       .desc {
  110.         display: flex;
  111.         flex-flow: column nowrap;
  112.       }
  113.       /* 商品列表区下每个项目设为弹性盒子 */
  114.       .goods-desc {
  115.         display: flex;
  116.         height: 70px;
  117.         font-size: 13px;
  118.         text-align: center;
  119.         align-items: center;
  120.         margin: 5px 0;
  121.       }
  122.       /* 设置商品列表区图片所占宽度 */
  123.       .goods-desc > a:first-of-type {
  124.         width: 30vw;
  125.       }
  126.       /* 设置商品列表区商品详情所占宽度  */
  127.       .goods-desc > a:last-of-type {
  128.         width: 60vw;
  129.         margin-left: 3vw;
  130.       }
  131.       /* 设置图片的大小 */
  132.       .goods-desc > a > img {
  133.         width: 55%;
  134.       }
  135.       /* 设置页脚为弹性盒子 */
  136.       footer {
  137.         display: flex;
  138.         justify-content: space-evenly;
  139.       }
  140.       /* 设置页脚下面每个子项目为弹性盒子，主轴为垂直方向，和每个项目的对齐方式 */
  141.       .footer {
  142.         display: flex;
  143.         flex-flow: column nowrap;
  144.         width: 23vw;
  145.         text-align: center;
  146.       }
  147.     </style>
  148.   </head>
  149.   <body>
  150.     <!-- 页眉 -->
  151.     <header>
  152.       <div>
  153.         <a href="">LOGO</a>
  154.         <a href=""><span class="iconfont">&#xe61f;</span></a>
  155.         <a href="">登录/注册</a>
  156.       </div>
  157.     </header>
  158.     <!-- 轮播图 -->
  159.     <div class="slider">
  160.       <a href=""><img src="jd/q70.jpg" alt="" /></a>
  161.     </div>
  162.     <!-- 导航栏 -->
  163.     <nav>
  164.       <div>
  165.         <a href=""><img src="jd/chaoshi.png" alt="" /></a>
  166.         <a href="">京东超市</a>
  167.       </div>
  168.       <div>
  169.         <a href=""><img src="jd/shumadianqi.png" alt="" /></a>
  170.         <a href="">数码电器</a>
  171.       </div>
  172.       <div>
  173.         <a href=""><img src="jd/jingdongfushi.png" alt="" /></a>
  174.         <a href="">京东服饰</a>
  175.       </div>
  176.       <div>
  177.         <a href=""><img src="jd/jingdongshengxian.png" alt="" /></a>
  178.         <a href="">京东生鲜</a>
  179.       </div>
  180.       <div>
  181.         <a href=""><img src="jd/jingdongdaojia.png" alt="" /></a>
  182.         <a href="">京东到家</a>
  183.       </div>
  184.       <div>
  185.         <a href=""><img src="jd/chongzhi.png" alt="" /></a>
  186.         <a href="">充值缴费</a>
  187.       </div>
  188.       <div>
  189.         <a href=""><img src="jd/9.9.png" alt="" /></a>
  190.         <a href="">9.9元拼</a>
  191.       </div>
  192.       <div>
  193.         <a href=""><img src="jd/quan.png" alt="" /></a>
  194.         <a href="">领券</a>
  195.       </div>
  196.       <div>
  197.         <a href=""><img src="jd/jin.png" alt="" /></a>
  198.         <a href="">领金贴</a>
  199.       </div>
  200.       <div>
  201.         <a href=""><img src="jd/PLUS.png" alt="" /></a>
  202.         <a href="">PLUS会员</a>
  203.       </div>
  204.     </nav>
  205.     <h2>热销商品<span class="iconfont hot">&#xe60b;</span></h2>
  206.     <!-- 热销商品内容区 -->
  207.     <div class="hot-goods">
  208.       <div class="goods-img">
  209.         <a href=""><img src="hot/xiaodugui.jpg" alt="" /></a>
  210.         <p>美的(Midea)消毒柜</p>
  211.         <div class="qian">
  212.           <span>379&nbsp;元</span>
  213.           <a href=""
  214.             ><span class="iconfont" style="color: lightcoral;"
  215.               >&#xe602;</span
  216.             ></a
  217.           >
  218.         </div>
  219.       </div>
  220.       <div class="goods-img">
  221.         <a href=""><img src="hot/duanT.jpg" alt="" /></a>
  222.         <p>吉普短T套装</p>
  223.         <div class="qian">
  224.           <span>69&nbsp;元</span>
  225.           <a href=""
  226.             ><span class="iconfont" style="color: lightcoral;"
  227.               >&#xe602;</span
  228.             ></a
  229.           >
  230.         </div>
  231.       </div>
  232.       <div class="goods-img">
  233.         <a href=""><img src="hot/huawei10.jpg" alt="" /></a>
  234.         <p>华为畅享10长续航</p>
  235.         <div class="qian">
  236.           <span>1059&nbsp;元</span>
  237.           <a href=""
  238.             ><span class="iconfont" style="color: lightcoral;"
  239.               >&#xe602;</span
  240.             ></a
  241.           >
  242.         </div>
  243.       </div>
  244.       <div class="goods-img">
  245.         <a href=""><img src="hot/rongyao30s.jpg" alt="" /></a>
  246.         <p>荣耀30s华为5G手机</p>
  247.         <div class="qian">
  248.           <span>2086&nbsp;元</span>
  249.           <a href=""
  250.             ><span class="iconfont" style="color: lightcoral;"
  251.               >&#xe602;</span
  252.             ></a
  253.           >
  254.         </div>
  255.       </div>
  256.       <div class="goods-img">
  257.         <a href=""><img src="hot/zhuji.jpg" alt="" /></a>
  258.         <p>攀升G1设计师台式主机</p>
  259.         <div class="qian">
  260.           <span>3798&nbsp;元</span>
  261.           <a href=""
  262.             ><span class="iconfont" style="color: lightcoral;"
  263.               >&#xe602;</span
  264.             ></a
  265.           >
  266.         </div>
  267.       </div>
  268.       <div class="goods-img">
  269.         <a href=""><img src="hot/hetianyu.jpg" alt="" /></a>
  270.         <p>宋玉坊和田玉吊坠</p>
  271.         <div class="qian">
  272.           <span>236&nbsp;元</span>
  273.           <a href=""
  274.             ><span class="iconfont" style="color: lightcoral;"
  275.               >&#xe602;</span
  276.             ></a
  277.           >
  278.         </div>
  279.       </div>
  280.     </div>
  281.     <h2>商品列表<span class="iconfont">&#xe64b;</span></h2>
  282.     <div class="desc">
  283.       <div class="goods-desc">
  284.         <a href=""><img src="pin/gui.jpg"</a>
  285.         <a href=""
  286.           >南石龟 越南石正宗黄金龟 越南种活体 转运龟
  287.           风水龟金头长寿龟观赏招财水龟宠物黄喉龟苗种 1-2两(7-8厘) 单身一只<span
  288.             class="iconfont"
  289.             >&#xe675;</span
  290.           >
  291.         </a>
  292.       </div>
  293.       <div class="goods-desc">
  294.         <a href=""><img src="pin/chuang.jpg"</a>
  295.         <a href=""
  296.           >摩高空间韩式田园现代卧室床欧式公主家用床地中
  297.           海双人实木床1.8米框架床（不含床头柜）-白色
  298.           <span class="iconfont">&#xe675;</span>
  299.         </a>
  300.       </div>
  301.       <div class="goods-desc">
  302.         <a href=""><img src="pin/shuicao.jpg"</a>
  303.         <a href=""
  304.           >潮洁厨房水槽不锈钢沥水篮洗碗池可伸缩洗菜盆沥水架水池滤水篮
  305.           经典灰色伸缩沥水篮(大号)水槽通用
  306.           <span class="iconfont">&#xe675;</span>
  307.         </a>
  308.       </div>
  309.       <div class="goods-desc">
  310.         <a href=""><img src="pin/biao.jpg"</a>
  311.         <a href=""
  312.           >【明星推荐】冠琴（GUANQIN）瑞士2020新款正品手表男士机械表商务全自动男表夜光防水潮流风腕表
  313.           时尚气质精钢黑面 <span class="iconfont">&#xe675;</span>
  314.         </a>
  315.       </div>
  316.       <div class="goods-desc">
  317.         <a href=""><img src="pin/guo.jpg"</a>
  318.         <a href=""
  319.           >德纳斯 不粘锅炒锅 316L不锈钢炒菜锅 32CM无涂层少油烟平底锅蜂窝煎锅
  320.           煤气灶电磁炉通用不沾锅 晶典316全面屏炒锅（带盖）<span class="iconfont"
  321.             >&#xe675;</span
  322.           >
  323.         </a>
  324.       </div>
  325.       <div class="goods-desc">
  326.         <a href=""><img src="pin/dengzi.jpg"</a>
  327.         <a href=""
  328.           >【品牌直营】实木小凳子
  329.           时尚换鞋凳小圆凳客厅沙发凳矮凳创意小板凳家用小椅子 藏青色 20高
  330.           <span class="iconfont">&#xe675;</span>
  331.         </a>
  332.       </div>
  333.       <div class="goods-desc">
  334.         <a href=""><img src="pin/Txue.jpg"</a>
  335.         <a href=""
  336.           >古黛妃
  337.           短袖t恤女夏装2020新款韩版宽松百搭学生纯棉半袖上衣女士体恤衫套头衫
  338.           062-藕粉色 M（70-100斤<span class="iconfont">&#xe675;</span>
  339.         </a>
  340.       </div>
  341.       <div class="goods-desc">
  342.         <a href=""><img src="pin/gou.jpg" /></a>
  343.         <a href="">
  344.           宁宠
  345.           纯种柯基犬柯基幼犬活体宠物狗宠物狗狗活体犬威尔士柯基犬短腿狗小狗崽活物
  346.           宠物级 公 <span class="iconfont">&#xe675;</span>
  347.         </a>
  348.       </div>
  349.       <div class="goods-desc">
  350.         <a href=""><img src="pin/zuodian.jpg" /></a
  351.         ><a href=""
  352.           >棉麻皮革全包围四季垫通用汽车坐垫汽车座垫套汽车座椅套 标准版黑红色
  353.           <span class="iconfont">&#xe675;</span>
  354.         </a>
  355.       </div>
  356.     </div>
  357.     <!-- 页脚 -->
  358.     <footer>
  359.       <div class="footer">
  360.         <a href=""><span class="iconfont">&#xe60c;</span></a>
  361.         <a href="">首页</a>
  362.       </div>
  363.       <div class="footer">
  364.         <a href=""><span class="iconfont">&#xe64b;</span></a>
  365.         <a href="">分类</a>
  366.       </div>
  367.       <div class="footer">
  368.         <a href=""><span class="iconfont">&#xe602;</span></a>
  369.         <a href="">购物车</a>
  370.       </div>
  371.       <div class="footer">
  372.         <a href=""><span class="iconfont">&#xe600;</span></a>
  373.         <a href="">我的</a>
  374.       </div>
  375.     </footer>
  376.   </body>
  377. </html>

总结

1.要清楚设置弹性盒子时的主轴方向
2.移动端大多时自行完成的但是感觉样式代码冗余了，不知该如何更改
3.项目的对齐方式要要多练习并熟记

上一条：grid 布局一个课程列表下一条：x-admin点击左侧标签不刷新的解决方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多