简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > pc端布局通用模板和移动端布局
Blogger Information
Blog 16
fans 2
comment 0
visits 19890
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
pc端布局通用模板和移动端布局
肖傲的博客
Original
1036 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.     <!-- 加载字体 -->
  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的详细属性。

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！