简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >pc端布局通用模板和移动端布局

pc端布局通用模板和移动端布局

肖傲的博客
肖傲的博客原创
2020年06月24日 19:42:081043浏览

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的详细属性。

上一条：09 flex box弹性盒的基本用法下一条：水平与垂直对齐
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多