search

博客列表 >PC端布局的通用解决方案and移动端布局解决方案

PC端布局的通用解决方案and移动端布局解决方案

浪子修罗记录有趣的事
浪子修罗记录有趣的事原创
2020年06月26日 15:30:41810浏览

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.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       a {
  14.         color: #666666;
  15.         text-decoration: none;
  16.       }
  17.       /* 把body转为flex */
  18.       body {
  19.         /* 最小宽度 */
  20.         min-width: 680px;
  21.         /* 转为弹性盒子 */
  22.         display: flex;
  23.         /* 主轴垂直方向，不换行 */
  24.         flex-flow: column nowrap;
  25.       }
  26.       /* 页眉，页脚公共样式 */
  27.       header,
  28.       footer {
  29.         height: 50px;
  30.         background-color: bisque;
  31.       }
  32.       /* 把页眉转为flex */
  33.       header {
  34.         display: flex;
  35.         /* 所有项目在交叉轴方向上居中显示 */
  36.         align-items: center;
  37.       }
  38.       header > a {
  39.         /* 禁止放大  允许收缩  100px宽度 */
  40.         flex: 0 1 100px;
  41.         /* 文本居中 */
  42.         text-align: center;
  43.       }
  44.       /* logo  伪类选择第一个*/
  45.       header > a:first-of-type {
  46.         /* 给第一个A标签右边距80px */
  47.         margin-right: 80px;
  48.       }
  49.       /* 登录  伪类选择最后一个*/
  50.       header > a:last-of-type {
  51.         /* 给最后一个A标签左边距自动铺满 */
  52.         margin-left: auto;
  53.       }
  54.       /* 鼠标悬停时忽略logo */
  55.       header > a:hover:not(:first-of-type) {
  56.         color: lightcoral;
  57.       }
  58.       .container {
  59.         min-height: 600px;
  60.         /* 转为弹性盒子 */
  61.         display: flex;
  62.         /* 主轴横向方向，不换行   默认值，可以不用写 */
  63.         flex-flow: row nowrap;
  64.         margin: 10px auto;
  65.         justify-content: center;
  66.       }
  67.       .container > aside,
  68.       .container > main {
  69.         background-color: lightcyan;
  70.         padding: 10px;
  71.       }
  72.       .container > aside {
  73.         /* 不放大  不收缩  宽200px */
  74.         flex: 0 0 200px;
  75.       }
  76.       .container > main {
  77.         /* 不放大  不收缩  宽600px */
  78.         flex: 0 0 600px;
  79.         /* 左右边距10px */
  80.         margin: 0 10px;
  81.       }
  83.       footer {
  84.         display: flex;
  85.         /* 主轴垂直方向，不换行 */
  86.         flex-flow: column nowrap;
  87.         /* 文本居中 */
  88.         text-align: center;
  89.       }
  90.     </style>
  91.   </head>
  92.   <body>
  93.     <!-- 页眉 -->
  94.     <header>
  95.       <a href="">LOGO</a>
  96.       <a href="">首页</a>
  97.       <a href="">栏目1</a>
  98.       <a href="">栏目2</a>
  99.       <a href="">栏目3</a>
  100.       <a href="">登录</a>
  101.     </header>
  103.     <!-- 主体 -->
  104.     <div class="container">
  105.       <!-- 左边栏 -->
  106.       <aside>左边栏</aside>
  107.       <!-- 主体 -->
  108.       <main>主体内容</main>
  109.       <!-- 右边栏 -->
  110.       <aside>右边栏</aside>
  111.     </div>
  113.     <!-- 页脚 -->
  114.     <footer>
  115.       <p>
  116.         大赤水网 © 版权所有 （2016-2020）|ICP备案号：<a href=""
  117.           >备了就有00000011</a
  118.         >
  119.       </p>
  120.       <p>中国赤水 赤水大道 公安备案号：0000000111</p>
  121.     </footer>
  122.   </body>
  123. </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.     <!-- 加载阿里字体图标 -->
  7.     <link rel="stylesheet" href="css.css" />
  8.     <title>移动端布局解决方案</title>
  9.     <style>
  10.       * {
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       a {
  16.         text-decoration: none;
  17.         color: #666;
  18.       }
  20.       html {
  21.         /* vw： 可视区宽度，100指百分比 */
  22.         /* vh:  可视区高度，100指百分比 */
  23.         width: 100vw;
  24.         height: 100vh;
  25.         font-size: 14px;
  26.         color: #666;
  27.       }
  29.       body {
  30.         min-width: 360px;
  31.         background-color: #fff;
  32.         display: flex;
  33.         /* 主轴垂直方向，不换行 */
  34.         flex-flow: column nowrap;
  35.       }
  37.       body > header {
  38.         color: white;
  39.         background-color: #333;
  40.         height: 30px;
  42.         display: flex;
  43.         align-items: center;
  44.         /* 两端对齐 */
  45.         justify-content: space-between;
  46.         /* 固定定位 */
  47.         position: fixed;
  48.         width: 100vw;
  49.         padding: 0 15px;
  50.       }
  52.       body > .slider {
  53.         height: 180px;
  54.       }
  55.       body > .slider > img {
  56.         /* 宽高100% */
  57.         width: 100%;
  58.         height: 100%;
  59.       }
  60.       h2 {
  61.         text-align: center;
  62.         background-color: lightgray;
  63.         height: 35px;
  64.       }
  66.       /* 主导航区 */
  67.       nav {
  68.         height: 200px;
  69.         margin-bottom: 10px;
  70.         /* 弹性盒子 */
  71.         display: flex;
  72.         /* 转为多行容器 */
  73.         flex-flow: row wrap;
  74.         /* 分散对齐 */
  75.         align-content: space-around;
  76.       }
  78.       nav > div {
  79.         /* 25% 一排四个 */
  80.         width: 25vw;
  82.         display: flex;
  83.         flex-flow: column nowrap;
  85.         align-items: center;
  86.       }
  88.       nav > div > a:first-of-type {
  89.         text-align: center;
  90.       }
  92.       nav > div img {
  93.         width: 50%;
  94.       }
  96.       /* 每个区域的标题样式 */
  97.       .title {
  98.         margin-top: 10px;
  99.         font-size: 1.2rem;
  100.         font-weight: normal;
  101.         text-align: center;
  102.       }
  103.       /* 热销商品区 */
  104.       .hot-goods {
  105.         border-top: 1px solid #cdcdcd;
  106.         margin-top: 10px;
  107.         font-size: 0.8rem;
  108.         display: flex;
  109.         /* 水平多行容器 */
  110.         flex-flow: row wrap;
  111.       }
  112.       .hot-goods img {
  113.         width: 100%;
  114.       }
  115.       .hot-goods > .goods-img {
  116.         /* 内边距并重置大小 */
  117.         padding: 10px;
  118.         box-sizing: border-box;
  119.         /* 允许放大不允许缩小,否则项目不会换行,多行容器失效 */
  120.         flex: 1 0 30vw;
  122.         /* 再将每个商品描述转为flex */
  123.         display: flex;
  124.         /* 主轴垂直且不允许换行 */
  125.         flex-flow: column nowrap;
  126.         justify-content: center;
  127.       }
  128.       /* 商品描述的最后一个区域转flex,并设置项目在主轴上排列对齐方式 */
  129.       .hot-goods > .goods-img > div {
  130.         display: flex;
  131.         /* 分散对齐 */
  132.         justify-content: space-around;
  133.       }
  135.       /* 热销样式 */
  136.       .hot {
  137.         color: coral;
  138.       }
  140.       /* 商品列表区 */
  141.       .list-goods {
  142.         padding: 10px;
  144.         border-top: 1px solid #cdcdcd;
  145.         margin-top: 10px;
  146.         font-size: 0.8rem;
  148.         display: flex;
  149.         /* 主轴必须是垂直 */
  150.         flex-flow: column nowrap;
  151.       }
  152.       /* 每个项目也转为flex */
  153.       .list-goods > .goods-desc {
  154.         margin: 10px 0;
  155.         display: flex;
  156.       }
  157.       /* 列表中每个项目的样式,加些间距 */
  158.       .list-goods > .goods-desc > a {
  159.         padding: 10px;
  160.         box-sizing: border-box;
  161.       }
  162.       .list-goods > .goods-desc > a:last-of-type:hover {
  163.         color: lightseagreen;
  164.       }
  165.       /* 图片全部适应项目空间 */
  166.       .list-goods img {
  167.         width: 100%;
  168.       }
  170.       body > footer {
  171.         color: #666;
  172.         background-color: #efefef;
  173.         border-top: 1px solid #ccc;
  174.         height: 55px;
  176.         position: fixed;
  177.         bottom: 0;
  178.         width: 100vw;
  180.         display: flex;
  181.         /* 平均对齐 */
  182.         justify-content: space-evenly;
  183.       }
  184.       body > footer a {
  185.         margin-top: 10px;
  186.         font-size: 0.8rem;
  187.         display: flex;
  188.         /* 垂直排列不换行 */
  189.         flex-flow: column nowrap;
  190.         /* 交叉轴项目居中显示 */
  191.         align-items: center;
  192.       }
  193.       body > footer a > span:first-of-type {
  194.         /* 图标字体应该大一些 */
  195.         font-size: 1.6rem;
  196.       }
  197.     </style>
  198.   </head>
  199.   <body>
  200.     <!-- 页眉 -->
  201.     <header>
  202.       <a href="">LOGO</a>
  203.       <span class="iconfont"></span>
  204.     </header>
  206.     <!-- 轮播图区 -->
  207.     <div class="slider">
  208.       <img src="images/banner.jpg" alt="" />
  209.     </div>
  211.     <!-- 主导航区 -->
  212.     <nav>
  213.       <div>
  214.         <a href=""><img src="images/link1.webp" alt="" /></a>
  215.         <a href="">京东超市</a>
  216.       </div>
  217.       <div>
  218.         <a href=""><img src="images/link2.webp" alt="" /></a>
  219.         <a href="">服装百货</a>
  220.       </div>
  221.       <div>
  222.         <a href=""><img src="images/link3.webp" alt="" /></a>
  223.         <a href="">数码精品</a>
  224.       </div>
  225.       <div>
  226.         <a href=""><img src="images/link4.webp" alt="" /></a>
  227.         <a href="">优惠劵</a>
  228.       </div>
  229.       <div>
  230.         <a href=""><img src="images/link1.webp" alt="" /></a>
  231.         <a href="">超市精选</a>
  232.       </div>
  233.       <div>
  234.         <a href=""><img src="images/link2.webp" alt="" /></a>
  235.         <a href="">服装百货</a>
  236.       </div>
  237.       <div>
  238.         <a href=""><img src="images/link3.webp" alt="" /></a>
  239.         <a href="">数码精品</a>
  240.       </div>
  241.       <div>
  242.         <a href=""><img src="images/link4.webp" alt="" /></a>
  243.         <a href="">优惠劵</a>
  244.       </div>
  245.     </nav>
  247.     <!-- 热销商品 -->
  248.     <h2>
  249.       热销商品区<span class="iconfont hot" style="color: coral;"></span>
  250.     </h2>
  252.     <div class="hot-goods">
  253.       <div class="goods-img">
  254.         <a href=""><img src="images/goods1.jpg" alt="" /></a>
  255.         <p>Apple iPhone 11 128G</p>
  256.         <div>
  257.           <span>6299 元</span>
  258.           <span class="iconfont hot"></span>
  259.         </div>
  260.       </div>
  261.       <div class="goods-img">
  262.         <a href=""><img src="images/goods1.jpg" alt="" /></a>
  263.         <p>Apple iPhone X 512G</p>
  264.         <div>
  265.           <span>8299 元</span>
  266.           <span class="iconfont hot"></span>
  267.         </div>
  268.       </div>
  270.       <div class="goods-img">
  271.         <a href=""><img src="images/goods2.jpg" alt="" /></a>
  272.         <p>华为笔记本电脑</p>
  273.         <div>
  274.           <span>5699 元</span>
  275.           <span class="iconfont hot"></span>
  276.         </div>
  277.       </div>
  278.       <div class="goods-img">
  279.         <a href=""><img src="images/goods2.jpg" alt="" /></a>
  280.         <p>小米笔记本电脑</p>
  281.         <div>
  282.           <span>3999 元</span>
  283.           <span class="iconfont hot"></span>
  284.         </div>
  285.       </div>
  286.       <div class="goods-img">
  287.         <a href=""><img src="images/goods2.jpg" alt="" /></a>
  288.         <p>联想笔记本电脑</p>
  289.         <div>
  290.           <span>4399 元</span>
  291.           <span class="iconfont hot"></span>
  292.         </div>
  293.       </div>
  294.     </div>
  296.     <!-- 商品列表区 -->
  297.     <h2 class="title">
  298.       商品列表<span class="iconfont hot" style="color: coral;"></span>
  299.     </h2>
  300.     <div class="list-goods">
  301.       <div class="goods-desc">
  302.         <a href=""><img src="images/goods4.jpg" alt="" /></a>
  303.         <a href=""
  304.           >[白条12期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  305.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后
  306.           <span class="iconfont hot" style="vertical-align: middle;"
  307.             ></span
  308.           ></a
  309.         >
  310.       </div>
  311.       <div class="goods-desc">
  312.         <a href=""><img src="images/goods3.jpg" alt="" /></a>
  313.         <a href=""
  314.           >[白条6期免息]Apple洗衣机,专业清洗苹果手机,
  315.           苹果电脑,iPad,洗好保证不能用, 免费领取500元保险费,
  316.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后
  317.           <span class="iconfont hot" style="vertical-align: middle;"
  318.             ></span
  319.           ></a
  320.         >
  321.       </div>
  322.       <div class="goods-desc">
  323.         <a href=""><img src="images/goods5.png" alt="" /></a>
  324.         <a href=""
  325.           >[白条6期免息]Apple苹果iPhone 11 手机 128G 全网通, 免费领取500元话费,
  326.           今天17:00下单,明晨12:00之前送达,7天无理由退货,官方提供售后
  327.           <span class="iconfont hot" style="vertical-align: middle;"
  328.             ></span
  329.           ></a
  330.         >
  331.       </div>
  332.       <div class="goods-desc">
  333.         <a href=""><img src="images/goods2.jpg" alt="" /></a>
  334.         <a href=""
  335.           >华为笔记本MateBook 14 全面屏轻薄性能笔记本电脑 十代酷睿(i5 16G 512G
  336.           MX250 触控屏 多屏协同)灰<span
  337.             class="iconfont hot"
  338.             style="vertical-align: middle;"
  339.             ></span
  340.           ></a
  341.         >
  342.       </div>
  343.     </div>
  345.     <footer>
  346.       <a href="">
  347.         <span class="iconfont hot"></span>
  348.         <span>首页</span>
  349.       </a>
  350.       <a href="">
  351.         <span class="iconfont hot"></span>
  352.         <span>分类</span>
  353.       </a>
  354.       <a href="">
  355.         <span class="iconfont hot"></span>
  356.         <span>购物车</span>
  357.       </a>
  358.       <a href="">
  359.         <span class="iconfont hot"></span>
  360.         <span>未登录</span>
  361.       </a>
  362.     </footer>
  363.   </body>
  364. </html>

上一条：表格实现购物车、表单实现注册页面（前端第五课）下一条：盒模型基础及垂直定位
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多