微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 使用flex布局完成pc端的三列布局和移动端的布局
博主信息
博文 48
粉丝 0
评论 0
访问量 45799
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
使用flex布局完成pc端的三列布局和移动端的布局
丶久而旧之丶
原创
1857人浏览过

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.项目的对齐方式要要多练习并熟记

批改老师：GuanhuiGuanhui

批改状态：合格

老师批语：不要直接使用元素选择器，会造成全局污染，要合理使用class；
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录