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

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.     <!-- 加载字体 -->
  7.     <title>pc布局的通用解决方案</title>
  8.   </head>
  9.   <style>
  10.     /* 初始化 */
  11.     * {
  12.       margin: 0;
  13.       padding: 0;
  14.       box-sizing: border-box;
  15.     }
  16.     /* 去除下划线和设置颜色 */
  17.     a {
  18.       color: #ccc;
  19.       text-decoration: none;
  20.     }
  21.     body {
  22.       min-width: 600px;
  23.       /* 设置弹性盒子 */
  24.       display: flex;
  25.       /* 主轴为垂直且不换行显示 */
  26.       flex-flow: column nowrap;
  27.     }
  28.     header,
  29.     footer {
  30.       height: 60px;
  31.       border: 1px solid #000;
  32.     }
  34.     /* 页眉区 */
  36.     header {
  37.       /* 设置弹性盒子 */
  38.       display: flex;
  39.       /* 项目在交叉轴居中显示 */
  40.       align-items: center;
  41.       background-color: #3c3c3c;
  42.     }
  43.     header > a {
  44.      /* 不放大 可以收缩 宽度为100px */
  45.       flex: 0 1 100px;
  46.       text-align: center;
  47.     }
  48.     /* logo区 */
  50.     /* 给第一个A标签设置一个向右的50px外边距 */
  51.     header > a:first-of-type {
  52.       margin-right: 50px;
  53.     }
  54.     /* 设置最后一个A标签靠右居中 */
  55.     header > a:last-of-type {
  56.       margin-left: auto;
  57.     }
  58.     /* 设置除了第一个a标签以外其他a标签鼠标悬停后颜色改变 */
  59.     header > a:hover:not(:first-of-type) {
  60.       color: white;
  61.     }
  63.     /* 主体区 */
  65.     .container {
  66.       /* 设置弹性容器 */
  67.       display: flex;
  68.       /* 居中 上下10px的外边距 */
  69.       margin: 10px auto;
  70.       /* 在没有内容的时候设置最小高度撑开盒子 */
  71.       min-height: 500px;
  72.       /* 可视区居中 */
  73.       justify-content: center;
  74.     }
  75.     .container > aside,
  76.     .container > main {
  77.       border: 1px solid #000;
  78.       /* 给子元素设置10px的内边距 */
  79.       padding: 10px;
  80.     }
  81.     .container > aside {
  82.       /* 设置不放大、不收缩、宽度为200px */
  83.       flex: 0 0 200px;
  84.       background-color: rgb(243, 119, 119);
  85.     }
  86.     .container > main {
  87.       /* 设置不放大、不收缩、宽度为600px */
  88.       flex: 0 0 600px;
  89.       /* 上下外边距为0  左右为10px */
  90.       margin: 0 10px;
  91.       background-color: skyblue;
  92.     }
  93.     /* 页脚区 */
  94.     footer {
  95.       /* 设置弹性盒子 */
  96.       display: flex;
  97.       /* 设置主轴为垂直 不换行 */
  98.       flex-flow: column nowrap;
  99.       /* 文本内容居中显示 */
  100.       text-align: center;
  101.       background-color: #3c3c3c;
  102.     }
  103.   </style>
  104.   <body>
  105.     <!-- 页眉 -->
  106.     <header>
  107.       <a href="">logo</a>
  108.       <a href="">首页</a>
  109.       <a href="">栏目1</a>
  110.       <a href="">栏目2</a>
  111.       <a href="">栏目3</a>
  112.       <a href="">登录</a>
  113.     </header>
  114.     <!-- 主体 -->
  115.     <div class="container">
  116.       <!-- 左边栏 -->
  117.       <aside></aside>
  118.       <!-- 主体区域 -->
  119.       <main></main>
  120.       <!-- 右边栏 -->
  121.       <aside></aside>
  122.     </div>
  123.     <!-- 页脚 -->
  124.     <footer>
  125.       <p>
  126.         <a href="#">xxxxxxx</a>
  127.         <a href="#">xxxxxxx</a>
  128.       </p>
  129.     </footer>
  130.   </body>
  131. </html>

思路：
1.先写出HTML的结构 页眉、主体（内容区）、页脚
2.然后初始化样式通常用margin: 0; padding: 0;box-sizing: border-box;
3.然后考虑去除一些公共样式 去除<li>的序列号 和 <a>标签的下划线
4.将页眉、内容区、页脚设置弹性容器，并为主轴垂直排列。将内容区三部分设置为主轴为水平排列的弹性容器
5.页眉部分 ：将页眉部分的子元素也设置为弹性容器 ，然后再交叉轴上居中排列 。然后让里面的a标签以及内容设置 字体大小、颜色以及文本效果 （文本居中，一般通过text-align: center实现）还可以设置margin值来调整靠左或者靠右距离。设置flex的放大缩小和宽度控制a标签之间的间距。
6.最后还可以通过hover来设置鼠标悬停后的样式
7.主体部分：设置弹性容器后，可以先设置最小高度撑开内容区。然后设置调整上与页眉和页脚的外边距。然后让内容区子元素水平方向居中排列。然后通过flex值来设置内容区三部分的宽度、放大和收缩。
8页脚部分：设置弹性容器后，设置主轴垂直排列 ，然后实现文本居中。

移动端布局

  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.     <!-- 加载字体图标 -->
  7.     <link rel="stylesheet" href="static/css/font-icon.css" />
  8.     <title>移动端的解决方案</title>
  9.     <style>
  10.       * {
  11.         /* 样式初始化 */
  12.         margin: 0;
  13.         padding: 0;
  14.         box-sizing: border-box;
  15.       }
  16.       a {
  17.         /* 去除下划线 */
  18.         text-decoration: none;
  19.         color: #666;
  20.       }
  22.       html {
  23.         /* vw： 可视区宽度*/
  24.         /* vh:可视区的高度*/
  25.         width: 100vw;
  26.         height: 100vh;
  27.         font-size: 14px;
  28.         color: #666;
  29.       }
  31.       body {
  32.         min-width: 360px;
  33.         background-color: #fff;
  34.         /* 设置弹性容器 */
  35.         display: flex;
  36.         /* 主轴为垂直 不换行 */
  37.         flex-flow: column nowrap;
  38.       }
  40.       /* 头部区域 */
  42.       body > header {
  43.         color: white;
  44.         background-color: #333;
  45.         height: 30px;
  46.         /* 设置弹性容器 */
  47.         display: flex;
  48.         /* 辅轴居中排列 */
  49.         align-items: center;
  50.         /* 紧靠父盒子两端，中间留空且均等排列 */
  51.         justify-content: space-between;
  52.         /* 相对于浏览器窗口固定定位 */
  53.         position: fixed;
  54.         width: 100vw;
  55.         /* 设置上下0 ，左右15px内边距 */
  56.         padding: 0 15px;
  57.       }
  59.       body > .slider {
  60.         height: 180px;
  61.       }
  62.       body > .slider > img {
  63.         /* width: 100%; 让图片充满盒子*/
  64.         height: 100%;
  65.       }
  67.       /* 主导航区 */
  68.       nav {
  69.         height: 200px;
  70.         /* 下外边距10px */
  71.         margin-bottom: 10px;
  73.         display: flex;
  74.         /* 转为多行容器 */
  75.         flex-flow: row wrap;
  76.         /* 辅轴方向紧靠父盒子两端中间留空均等 */
  77.         align-content: space-around;
  78.       }
  80.       nav > div {
  81.         width: 25vw;
  82.         /* 设置弹性容器 */
  83.         display: flex;
  84.         /* 设置主轴为垂直方向 不换行 */
  85.         flex-flow: column nowrap;
  86.         /* 辅轴居中排列 */
  87.         align-items: center;
  88.       }
  90.       nav > div > a:first-of-type {
  91.         /* 文本内容居中对齐 */
  92.         text-align: center;
  93.       }
  95.       nav > div img {
  96.         width: 50%;
  97.       }
  99.       /* 每个区域的标题样式 */
  100.       .title {
  101.         /* 上外边距10Px */
  102.         margin-top: 10px;
  103.         /* 1.2倍的正常字体大小 */
  104.         font-size: 1.2rem;
  105.         /* 正常粗细 */
  106.         font-weight: normal;
  107.         /* 文本居中对齐 */
  108.         text-align: center;
  109.       }
  110.       /* 热销商品区 */
  111.       .hot-goods {
  112.         border-top: 1px solid #cdcdcd;
  113.         margin-top: 10px;
  114.         font-size: 0.8rem;
  115.         /* 设置弹性盒子 */
  116.         display: flex;
  117.         /* 主轴为水平方向 换行 */
  118.         flex-flow: row wrap;
  119.       }
  120.       .hot-goods img {
  121.         width: 100%;
  122.       }
  123.       .hot-goods > .goods-img {
  124.         /* 内边距并重置大小 */
  125.         padding: 10px;
  126.         box-sizing: border-box;
  127.         /* 允许放大不允许缩小,否则项目不会换行,多行容器失效 */
  128.         flex: 1 0 30vw;
  130.         /* 再将每个商品描述转为flex */
  131.         display: flex;
  132.         /* 主轴方向垂直且不允许换行 */
  133.         flex-flow: column nowrap;
  134.         /* 居中排列 */
  135.         justify-content: center;
  136.       }
  137.       /* 商品描述的最后一个区域转flex,并设置项目在主轴上排列对齐方式 */
  138.       .hot-goods > .goods-img > div {
  139.         /* 设置弹性盒子 */
  140.         display: flex;
  141.         /* 分散对齐 */
  142.         justify-content: space-around;
  143.       }
  145.       /* 热销样式 */
  146.       .hot {
  147.         color: coral;
  148.       }
  150.       /* 商品列表区 */
  151.       .list-goods {
  152.         /* 设置10px内边距 */
  153.         padding: 10px;
  154.         border-top: 1px solid #cdcdcd;
  155.         margin-top: 10px;
  156.         /* 设置弹性容器 */
  157.         display: flex;
  158.         /* 主轴为水平 换行 */
  159.         flex-flow: row wrap;
  160.         /* 居中排列 */
  161.         justify-content: center;
  162.       }
  163.       /* 每个项目也转为flex */
  164.       .list-goods > .goods-desc {
  165.         display: flex;
  166.         /* 主轴为垂直 换行 */
  167.         flex-flow: column wrap;
  168.         /* 居中排列 */
  169.         align-items: center;
  170.         /* 文本居中 */
  171.         text-align: center;
  172.         padding: 10px;
  173.         font-size: 0.8rem;
  174.         color: lightseagreen;
  175.       }
  176.       /* 设置文字区域的宽度 */
  177.       .list-goods > .goods-desc > a:last-of-type {
  178.         width: 30vw;
  179.       }
  180.       /* 图片缩放为空间的80%*/
  181.       .list-goods img {
  182.         width: 80%;
  183.       }
  185.       body > footer {
  186.         color: #666;
  187.         background-color: #efefef;
  188.         border-top: 1px solid #ccc;
  189.         height: 55px;
  190.         /* 相对于浏览器窗口固定 */
  191.         position: fixed;
  192.         bottom: 0;
  193.         /* 100%视口宽度 */
  194.         width: 100vw;
  195.         /* 设置弹性容器 */
  196.         display: flex;
  197.         /* 间隙均等排列 */
  198.         justify-content: space-evenly;
  199.       }
  200.       body > footer a {
  201.         /* 上外边距10px */
  202.         margin-top: 10px;
  203.         /* 0.8倍字体大小 */
  204.         font-size: 0.8rem;
  205.         /* 设置弹性容器 */
  206.         display: flex;
  207.         /* 垂直排列不换行 */
  208.         flex-flow: column nowrap;
  209.         /* 交叉轴项目居中显示 */
  210.         align-items: center;
  211.       }
  212.       /* 选择第一个span */
  213.       body > footer a > span:first-of-type {
  214.         /* 图标字体应该大一些 */
  215.         font-size: 1.6rem;
  216.       }
  217.     </style>
  218.   </head>
  219.   <body>
  220.     <!-- 页眉 -->
  221.     <header>
  222.       <a href="">LOGO</a>
  223.       <!-- 图标引用 -->
  224.       <span class="iconfont">&#xe61f;</span>
  225.     </header>
  227.     <!-- 轮播图 -->
  228.     <div class="slider">
  229.       <img src="static/images/banner.jpg" alt="" />
  230.     </div>
  232.     <!-- 主导航区 -->
  233.     <nav>
  234.       <div>
  235.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  236.         <a href="">京东超市</a>
  237.       </div>
  238.       <div>
  239.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  240.         <a href="">服装百货</a>
  241.       </div>
  242.       <div>
  243.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  244.         <a href="">数码精品</a>
  245.       </div>
  246.       <div>
  247.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  248.         <a href="">优惠劵</a>
  249.       </div>
  250.       <div>
  251.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  252.         <a href="">超市精选</a>
  253.       </div>
  254.       <div>
  255.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  256.         <a href="">服装百货</a>
  257.       </div>
  258.       <div>
  259.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  260.         <a href="">数码精品</a>
  261.       </div>
  262.       <div>
  263.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  264.         <a href="">优惠劵</a>
  265.       </div>
  266.     </nav>
  268.     <!-- 热销商品 -->
  269.     <h2>
  270.       <!-- 图标引用 -->
  271.       热销商品<span class="iconfont hot" style="color: coral;">&#xe60b;</span>
  272.     </h2>
  274.     <div class="hot-goods">
  275.       <div class="goods-img">
  276.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  277.         <p>Apple iPhone 11 128G</p>
  278.         <div>
  279.           <span>6299&nbsp;元</span>
  280.           <!-- 图标引用 -->
  281.           <span class="iconfont hot">&#xe602;</span>
  282.         </div>
  283.       </div>
  284.       <div class="goods-img">
  285.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  286.         <p>Apple iPhone X 512G</p>
  287.         <div>
  288.           <span>8299&nbsp;元</span>
  289.           <!-- 图标引用 -->
  290.           <span class="iconfont hot">&#xe602;</span>
  291.         </div>
  292.       </div>
  294.       <div class="goods-img">
  295.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  296.         <p>华为笔记本电脑</p>
  297.         <div>
  298.           <span>5699&nbsp;元</span>
  299.           <!-- 图标引用 -->
  300.           <span class="iconfont hot">&#xe602;</span>
  301.         </div>
  302.       </div>
  303.       <div class="goods-img">
  304.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  305.         <p>小米笔记本电脑</p>
  306.         <div>
  307.           <span>3999&nbsp;元</span>
  308.           <!-- 图标引用 -->
  309.           <span class="iconfont hot">&#xe602;</span>
  310.         </div>
  311.       </div>
  312.       <div class="goods-img">
  313.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  314.         <p>联想笔记本电脑</p>
  315.         <div>
  316.           <span>4399&nbsp;元</span>
  317.           <!-- 图标引用 -->
  318.           <span class="iconfont hot">&#xe602;</span>
  319.         </div>
  320.       </div>
  321.       <div class="goods-img">
  322.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  323.         <p>宏基笔记本电脑</p>
  324.         <div>
  325.           <span>4399&nbsp;元</span>
  326.           <!-- 图标引用 -->
  327.           <span class="iconfont hot">&#xe602;</span>
  328.         </div>
  329.       </div>
  330.     </div>
  332.     <!-- 商品列表区 -->
  333.     <h2 class="title">
  334.       <!-- 图标引用 -->
  335.       商品列表<span class="iconfont hot" style="color: coral;">&#xe64b;</span>
  336.     </h2>
  337.     <div class="list-goods">
  338.       <div class="goods-desc">
  339.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  340.         <!-- 图像对齐 -->
  341.         <a href=""
  342.           >西门子(SIEMENS) 10公斤 变频滚筒洗衣机 防过敏程序 高温筒清洁 快洗15'
  343.           羽绒服专业洗涤<span
  344.             class="iconfont hot"
  345.             style="vertical-align: middle;"
  346.             >&#xe675;</span
  347.           ></a
  348.         >
  349.       </div>
  350.       <div class="goods-desc">
  351.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  352.         <!-- 图像对齐 -->
  353.         <a href=""
  354.           >西门子(SIEMENS) 10公斤 变频滚筒洗衣机 防过敏程序 高温筒清洁 快洗15'
  355.           羽绒服专业洗涤<span
  356.             class="iconfont hot"
  357.             style="vertical-align: middle;"
  358.             >&#xe675;</span
  359.           ></a
  360.         >
  361.       </div>
  362.       <div class="goods-desc">
  363.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  364.         <!-- 图像对齐 -->
  365.         <a href=""
  366.           >西门子(SIEMENS) 10公斤 变频滚筒洗衣机 防过敏程序 高温筒清洁 快洗15'
  367.           羽绒服专业洗涤<span
  368.             class="iconfont hot"
  369.             style="vertical-align: middle;"
  370.             >&#xe675;</span
  371.           ></a
  372.         >
  373.       </div>
  374.       <div class="goods-desc">
  375.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  376.         <!-- 图像对齐 -->
  377.         <a href=""
  378.           >西门子(SIEMENS) 10公斤 变频滚筒洗衣机 防过敏程序 高温筒清洁 快洗15'
  379.           羽绒服专业洗涤<span
  380.             class="iconfont hot"
  381.             style="vertical-align: middle;"
  382.             >&#xe675;</span
  383.           ></a
  384.         >
  385.       </div>
  386.       <div class="goods-desc">
  387.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  388.         <!-- 图像对齐 -->
  389.         <a href=""
  390.           >西门子(SIEMENS) 10公斤 变频滚筒洗衣机 防过敏程序 高温筒清洁 快洗15'
  391.           羽绒服专业洗涤<span
  392.             class="iconfont hot"
  393.             style="vertical-align: middle;"
  394.             >&#xe675;</span
  395.           ></a
  396.         >
  397.       </div>
  398.       <div class="goods-desc">
  399.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  400.         <!-- 图像对齐 -->
  401.         <a href=""
  402.           >西门子(SIEMENS) 10公斤 变频滚筒洗衣机 防过敏程序 高温筒清洁 快洗15'
  403.           羽绒服专业洗涤<span
  404.             class="iconfont hot"
  405.             style="vertical-align: middle;"
  406.             >&#xe675;</span
  407.           ></a
  408.         >
  409.       </div>
  410.     </div>
  412.     <footer>
  413.       <a href="">
  414.         <!-- 图标引用 -->
  415.         <span class="iconfont hot">&#xe60c;</span>
  416.         <span>首页</span>
  417.       </a>
  418.       <a href="">
  419.         <!-- 图标引用 -->
  420.         <span class="iconfont hot">&#xe64b;</span>
  421.         <span>分类</span>
  422.       </a>
  423.       <a href="">
  424.         <!-- 图标引用 -->
  425.         <span class="iconfont hot">&#xe602;</span>
  426.         <span>购物车</span>
  427.       </a>
  428.       <a href="">
  429.         <!-- 图标引用 -->
  430.         <span class="iconfont hot">&#xe65b;</span>
  431.         <span>未登录</span>
  432.       </a>
  433.     </footer>
  434.   </body>
  435. </html>

总结： flex移动端布局，当调整手机型号时，需要重新调整设置。垂直和水平容易搞混淆。还需要多练多写熟悉flex的详细属性。

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：你把你的页面乱箭射死了.... 写得不错, 继续
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系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+教程免费学
    微信扫码登录