search

博客列表 >PC 端布局与移动端布局

PC 端布局与移动端布局

司马青衫
司马青衫原创
2020年06月27日 21:20:39592浏览

PC 端布局与移动端布局

PC 端布局

1、示例代码

  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.         padding: 0;
  10.         margin: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       a {
  14.         text-decoration: none;
  15.         color: #ccc;
  16.       }
  17.       body {
  18.         min-width: 800px;
  19.         background-color: #ccc;
  20.         /* flex布局 */
  21.         display: flex;
  22.         /* 主轴为垂直方向 */
  23.         flex-flow: column nowrap;
  24.       }
  25.       header,
  26.       footer {
  27.         height: 50px;
  28.         background-color: #333;
  29.       }
  30.       header {
  31.         /* flex布局 */
  32.         display: flex;
  33.       }
  34.       header > a {
  35.         width: 100px;
  36.         height: 50px;
  37.         /* 使a标签内文本居中 */
  38.         line-height: 50px;
  39.         text-align: center;
  40.       }
  41.       header > a:not(:first-of-type):hover {
  42.         color: white;
  43.         background-color: seagreen;
  44.       }
  45.       header > a:first-of-type {
  46.         margin: 0 50px 0 10px;
  47.       }
  48.       header > a:last-of-type {
  49.         margin: 0 10px 0 auto;
  50.       }
  52.       .container {
  53.         min-height: 600px;
  54.         display: flex;
  55.         margin: 10px auto;
  56.       }
  57.       .container > aside:first-of-type {
  58.         width: 200px;
  59.         border: 1px solid #000;
  60.       }
  61.       .container > main {
  62.         min-width: 600px;
  63.         border: 1px solid #000;
  64.         margin: 0 10px;
  65.       }
  66.       .container > aside:last-of-type {
  67.         width: 200px;
  68.         border: 1px solid #000;
  69.       }
  71.       footer {
  72.         display: flex;
  73.         flex-flow: column nowrap;
  74.         align-items: center;
  75.       }
  76.     </style>
  77.   </head>
  78.   <body>
  79.     <header>
  80.       <a href="">LOGO</a>
  81.       <a href="">项目1</a>
  82.       <a href="">项目2</a>
  83.       <a href="">项目3</a>
  84.       <a href="">项目4</a>
  85.       <a href="">项目5</a>
  86.       <a href="">登录/注册</a>
  87.     </header>
  88.     <div class="container">
  89.       <aside>左边栏</aside>
  90.       <main>主体内容区</main>
  91.       <aside>右边栏</aside>
  92.     </div>
  93.     <footer>
  94.       <p>
  95.         php中文网&copy; 版权所有&nbsp;&nbsp;(2018-2022)|备案号:
  96.         <a href="">皖ICP-18*********</a>
  97.       </p>
  98.       <p>中国.合肥市政务新区xxx号|电话：*********</p>
  99.     </footer>
  100.   </body>
  101. </html>

2、显示效果

移动端布局

1、示例代码

  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.     <link rel="stylesheet" href="static/css/font-icon.css" />
  7.     <title>移动端布局</title>
  8.     <style>
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       a {
  15.         text-decoration: none;
  16.         color: #000;
  17.       }
  18.       html {
  19.         width: 100vw;
  20.         height: 100vh;
  21.         font-size: 14px;
  22.       }
  23.       body {
  24.         display: flex;
  25.         flex-flow: column nowrap;
  26.       }
  27.       header {
  28.         width: 100vw;
  29.         background-color: #ccc;
  30.         padding: 0 5px;
  31.         /* flex布局 两端对齐 */
  32.         display: flex;
  33.         justify-content: space-between;
  34.         /* 固定位置 */
  35.         position: fixed;
  36.       }
  37.       .slider > img {
  38.         width: 100vw;
  39.       }
  40.       nav {
  41.         margin: 10px 0;
  42.         height: 20vh;
  43.         display: flex;
  44.         /* 转成多行容器 分散对齐 */
  45.         flex-flow: row wrap;
  46.         align-content: space-around;
  47.       }
  48.       nav > div {
  49.         width: 25vw;
  50.         /* 主轴方向转为垂直方向 */
  51.         display: flex;
  52.         flex-flow: column nowrap;
  53.         justify-content: space-around;
  54.       }
  55.       nav > div > a > img {
  56.         width: 60%;
  57.       }
  58.       nav > div > a {
  59.         text-align: center;
  60.       }
  61.       h2 {
  62.         border-bottom: 1px solid #000;
  63.         text-align: center;
  64.       }
  65.       .hot-goods {
  66.         margin: 10px 0;
  67.         display: flex;
  68.         flex-flow: row wrap;
  69.       }
  70.       .hot-goods > .goods-item {
  71.         width: 33vw;
  72.         text-align: center;
  73.       }
  74.       .hot-goods > .goods-item img {
  75.         width: 60%;
  76.       }
  77.       .hot-goods > .goods-item {
  78.         font-size: 0.9rem;
  79.       }
  80.       .goods-list {
  81.         margin: 10px 0;
  82.         display: flex;
  83.         flex-flow: column nowrap;
  84.       }
  85.       .goods-list > .goods-desc {
  86.         display: flex;
  87.         align-items: center;
  88.       }
  89.       .goods-list > .goods-desc img {
  90.         width: 100%;
  91.       }
  92.       .goods-list > .goods-desc a {
  93.         padding-right: 10px;
  94.       }
  95.       footer {
  96.         width: 100vw;
  97.         background-color: #ccc;
  98.         padding: 5px 5px;
  99.         display: flex;
  100.         justify-content: space-around;
  101.       }
  102.       footer > div {
  103.         display: flex;
  104.         flex-flow: column nowrap;
  105.         align-items: center;
  106.       }
  107.     </style>
  108.   </head>
  109.   <body>
  110.     <!-- 页眉 -->
  111.     <header>
  112.       <a href="">LOGO</a>
  113.       <a href=""><span class="iconfont">&#xe61f;</span></a>
  114.     </header>
  115.     <!-- 轮播图 -->
  116.     <div class="slider">
  117.       <img src="static/images/banner.jpg" alt="" />
  118.     </div>
  119.     <!-- 主导航区 -->
  120.     <nav>
  121.       <div>
  122.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  123.         <a href="">京东超市</a>
  124.       </div>
  125.       <div>
  126.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  127.         <a href="">服装百货</a>
  128.       </div>
  129.       <div>
  130.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  131.         <a href="">数码精品</a>
  132.       </div>
  133.       <div>
  134.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  135.         <a href="">优惠券</a>
  136.       </div>
  137.       <div>
  138.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  139.         <a href="">京东超市</a>
  140.       </div>
  141.       <div>
  142.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  143.         <a href="">服装百货</a>
  144.       </div>
  145.       <div>
  146.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  147.         <a href="">数码精品</a>
  148.       </div>
  149.       <div>
  150.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  151.         <a href="">优惠券</a>
  152.       </div>
  153.     </nav>
  154.     <!-- 热销商品区 -->
  155.     <h2>热销商品<span class="iconfont">&#xe60b;</span></h2>
  156.     <div class="hot-goods">
  157.       <div class="goods-item">
  158.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  159.         <p>Apple iphone 11 128G</p>
  160.         <div>
  161.           <span>1111&nbsp;元</span>
  162.           <a href=""><span class="iconfont">&#xe602;</span></a>
  163.         </div>
  164.       </div>
  165.       <div class="goods-item">
  166.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  167.         <p>华为笔记本</p>
  168.         <div>
  169.           <span>1111&nbsp;元</span>
  170.           <a href=""><span class="iconfont">&#xe602;</span></a>
  171.         </div>
  172.       </div>
  173.       <div class="goods-item">
  174.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  175.         <p>海尔洗衣机</p>
  176.         <div>
  177.           <span>1111&nbsp;元</span>
  178.           <a href=""><span class="iconfont">&#xe602;</span></a>
  179.         </div>
  180.       </div>
  181.       <div class="goods-item">
  182.         <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
  183.         <p>Apple iphone X 128G</p>
  184.         <div>
  185.           <span>1111&nbsp;元</span>
  186.           <a href=""><span class="iconfont">&#xe602;</span></a>
  187.         </div>
  188.       </div>
  189.       <div class="goods-item">
  190.         <a href=""><img src="static/images/goods5.png" alt="" /></a>
  191.         <p>荣耀手机 128G</p>
  192.         <div>
  193.           <span>1111&nbsp;元</span>
  194.           <a href=""><span class="iconfont">&#xe602;</span></a>
  195.         </div>
  196.       </div>
  197.       <div class="goods-item">
  198.         <a href=""><img src="static/images/goods5.png" alt="" /></a>
  199.         <p>荣耀手机 128G</p>
  200.         <div>
  201.           <span>1111&nbsp;元</span>
  202.           <a href=""><span class="iconfont">&#xe602;</span></a>
  203.         </div>
  204.       </div>
  205.     </div>
  207.     <!-- 商品列表 -->
  208.     <h2>商品列表<span class="iconfont">&#xe64b;</span></h2>
  209.     <div class="goods-list">
  210.       <div class="goods-desc">
  211.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  212.         <a href="">
  213.           [白条什么什么的]随便买信息时代受到极大激发好的
  214.           <span class="iconfont">&#xe602;</span>
  215.         </a>
  216.       </div>
  217.       <div class="goods-desc">
  218.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  219.         <a href="">
  220.           [白条什么什么的]随便买信息时代受到极大激发好的
  221.           <span class="iconfont">&#xe602;</span>
  222.         </a>
  223.       </div>
  224.       <div class="goods-desc">
  225.         <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
  226.         <a href="">
  227.           [白条什么什么的]随便买信息时代受到极大激发好的
  228.           <span class="iconfont">&#xe602;</span>
  229.         </a>
  230.       </div>
  231.       <div class="goods-desc">
  232.         <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
  233.         <a href="">
  234.           [白条什么什么的]随便买信息时代受到极大激发好的
  235.           <span class="iconfont">&#xe602;</span>
  236.         </a>
  237.       </div>
  238.     </div>
  239.     <!-- 页脚 -->
  240.     <footer>
  241.       <div>
  242.         <a href=""><span class="iconfont">&#xe60c;</span></a>
  243.         <a href="">首页</a>
  244.       </div>
  245.       <div>
  246.         <a href=""><span class="iconfont">&#xe64b;</span></a>
  247.         <a href="">分类</a>
  248.       </div>
  249.       <div>
  250.         <a href=""><span class="iconfont">&#xe602;</span></a>
  251.         <a href="">购物车</a>
  252.       </div>
  253.       <div>
  254.         <a href=""><span class="iconfont">&#xe64d;</span></a>
  255.         <a href="">登录</a>
  256.       </div>
  257.     </footer>
  258.   </body>
  259. </html>

2、显示效果

总结

  • 页面布局先需要设计页面框架
  • 从框架上去找 flex 盒子
  • flex 主要是灵活运用以下属性
    • flex-flow: row/column wrap/nowrap
    • justify-content
    • align-content
    • align-items
上一条：复习定位和浮动的页面布局和了解弹性盒子属性（0622）下一条：前端Flex实现的PC端布局和移动端布局的基本方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多