search

博客列表 >PC端与移动端的布局案例-web前端第10章6.23

PC端与移动端的布局案例-web前端第10章6.23

希望
希望原创
2020年07月02日 15:22:361006浏览

一.PC端布局解决方案

  1. 头部，主体，脚部，按照垂直排列
  2. 主体三列布局，做水平居中
  3. logo放左边，与其它栏目拉开距离，不给鼠标悬停效果
  4. 登录放右边
  5. 脚部居中
  6. 注意都要转为弹性盒子
  • 如下图：
    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: #666;
    15.       text-decoration: none;
    16.     }
    17.     body {
    18.       min-width: 680;
    19.       display: flex;
    20.       /* 主轴垂直方向，不换行 */
    21.       flex-flow: column nowrap;
    22.     }
    24.     header,
    25.     footer {
    26.       height: 50px;
    27.       border: 1px solid#000;
    28.     }
    29.     /* 把页眉转为弹性盒子 */
    30.     header {
    31.       display: flex;
    32.       /* 所有栏目在交叉轴上居中 */
    33.       align-items: center;
    34.     }
    35.     header > a {
    36.       flex: 0 1 100px;
    37.       /* 文本在当前a标签的栏目上居中 */
    38.       text-align: center;
    39.     }
    40.     /* logo是当前第一个，把它和栏目稍拉开些距离 */
    41.     header > a:first-of-type {
    42.       margin-right: 50px;
    43.     }
    44.     /* 登录要放最右边去，它是最后一个 */
    45.     header > a:last-of-type {
    46.       margin-left: auto;
    47.     }
    48.     /* 鼠标悬停效果,排除logo */
    49.     header > a:hover:not(:first-of-type) {
    50.       color: coral;
    51.     }
    53.     /* 把主体变成水平排列 */
    54.     .container {
    55.       min-height: 800px;
    56.       /* 居中起来，给个边框 */
    57.       margin: 10px auto;
    58.       display: flex;
    59.       justify-content: center;
    60.     }
    61.     .container > aside,
    62.     .container > main {
    63.       border: 1px solid #000;
    64.       padding: 10px;
    65.     }
    66.     .container > aside {
    67.       flex: 0 0 200px;
    68.     }
    69.     .container > main {
    70.       flex: 0 0 600px;
    71.       margin: 0 10px;
    72.     }
    74.     footer {
    75.       display: flex;
    76.       flex-flow: column nowrap;
    77.       text-align: center;
    78.     }
    79.   </style>
    80. </head>
    81. <body>
    82.   <!-- 页眉 -->
    83.   <header>
    84.     <a href="">LOGO</a>
    85.     <a href="">首页</a>
    86.     <a href="">产品</a>
    87.     <a href="">新闻</a>
    88.     <a href="">我们</a>
    89.     <a href="">登录</a>
    90.   </header>
    92.   <!-- 主体 -->
    93.   <div class="container">
    94.     <aside>左边栏</aside>
    95.     <main>主体内容</main>
    96.     <aside>右边栏</aside>
    97.   </div>
    99.   <!-- 页脚 -->
    100.   <footer>
    101.     <p>
    102.       php中文网©版权所有 （2018-2020）| 备案号：
    103.       <a href="">皖ICP123456**</a>
    104.     </p>
    105.     <p>
    106.       合肥市政务新区999号 | 电话：0551-12345***
    107.     </p>
    108.   </footer>
    109. </body>
    110. </html>

    二.移动端小商城

  1. 左上角一般放logo,右上角是下拉导航
  2. 轮播图
  3. 分类导航，小图片+文字，上下排列
  4. 热销商品推荐，图片+商品名称+价格+购物车，上下排列
  5. 商品列表，商品标题及相关描述，左右排列
  6. 脚部：首页，分类，购物车，登录，阿里图标+文字，上下排列
  • 如下图：
    移动端布局方案

  • 代码如下：

    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.       margin: 0;
    11.       padding: 0;
    12.       box-sizing: border-box;
    13.     }
    14.     a {
    15.       /* a链接下划线去掉 */
    16.       text-decoration: none;
    17.       color: #666;
    18.     }
    20.     html {
    21.       /* vw当前可视区宽度 */
    22.       /* vh当前可视区宽度 */
    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.     }
    36.     /* 头部样式 */
    37.     body > header {
    38.       color: white;
    39.       background-color: #333;
    40.       height: 30px;
    41.       display: flex;
    42.       align-items: center;
    43.       justify-content: space-between;
    44.       position: fixed;
    45.       width: 100vw;
    46.       padding: 0 15px;
    47.     }
    49.     /* 轮播图 */
    50.     body > .slider {
    51.       height: 180px;
    52.     }
    53.     body > .slider > img {
    54.       height: 100%;
    55.     }
    57.     /* 导航区 */
    58.     nav {
    59.       height: 200px;
    60.       margin-bottom: 10px;
    61.       display: flex;
    62.       /* 水平排列要换行 */
    63.       flex-flow: row wrap;
    64.       align-content: space-around;
    65.     }
    67.     nav > div {
    68.       width: 25vw;
    69.       display: flex;
    70.       /* 图片加文字垂直排 */
    71.       flex-flow: column nowrap;
    72.       align-items: center;
    73.     }
    75.     /* 导航区图片变小居中处理 */
    76.     nav > div > a:first-of-type {
    77.       text-align: center;
    78.     }
    79.     nav > div img {
    80.       width: 50%;
    81.     }
    83.     /* 每个区域的标题样式 */
    84.     .title {
    85.       margin-top: 10px;
    86.       font-size: 1.2rem;
    87.       font-weight: normal;
    88.       text-align: center;
    89.     }
    90.     /* 热销商品区 */
    91.     .hot-goods {
    92.       border-top: 1px solid #cdcdcd;
    93.       margin-top: 10px;
    95.       font-size: 0.8rem;
    96.       display: flex;
    97.       /* 水平多行容器 */
    98.       flex-flow: row wrap;
    99.     }
    100.     .hot-goods img {
    101.       width: 100%;
    102.     }
    103.     .hot-goods > .goods-img {
    104.       /* 内边距并重置大小 */
    105.       padding: 10px;
    106.       box-sizing: border-box;
    107.       /* 允许放大不允许缩小,否则项目不会换行,多行容器失效 */
    108.       flex: 1 0 30vw;
    110.       /* 再将每个商品描述转为flex */
    111.       display: flex;
    112.       /* 主轴垂直且不允许换行 */
    113.       flex-flow: column nowrap;
    114.       justify-content: center;
    115.     }
    116.     /* 商品描述的最后一个区域转flex,并设置项目在主轴上排列对齐方式 */
    117.     .hot-goods > .goods-img > div {
    118.       display: flex;
    119.       /* 分散对齐 */
    120.       justify-content: space-around;
    121.     }
    123.     /* 热销样式 */
    124.     .hot {
    125.       color: coral;
    126.     }
    128.     /* 商品列表区 */
    129.     .list-goods {
    130.       padding: 10px;
    132.       border-top: 1px solid #cdcdcd;
    133.       margin-top: 10px;
    134.       font-size: 0.8rem;
    136.       display: flex;
    137.       /* 主轴必须是垂直 */
    138.       flex-flow: column nowrap;
    139.     }
    140.     /* 每个项目也转为flex */
    141.     .list-goods > .goods-desc {
    142.       margin: 10px 0;
    143.       display: flex;
    144.     }
    145.     /* 列表中每个项目的样式,加些间距 */
    146.     .list-goods > .goods-desc > a {
    147.       padding: 10px;
    148.       box-sizing: border-box;
    149.     }
    150.     .list-goods > .goods-desc > a:last-of-type:hover {
    151.       color: lightseagreen;
    152.     }
    153.     /* 图片全部适应项目空间 */
    154.     .list-goods img {
    155.       width: 100%;
    156.     }
    158.     body > footer {
    159.       color: #666;
    160.       background-color: #efefef;
    161.       border-top: 1px solid #ccc;
    162.       height: 55px;
    164.       position: fixed;
    165.       bottom: 0;
    166.       width: 100vw;
    168.       display: flex;
    169.       justify-content: space-evenly;
    170.     }
    171.     body > footer a {
    172.       margin-top: 10px;
    173.       font-size: 0.8rem;
    174.       display: flex;
    175.       /* 垂直排列不换行 */
    176.       flex-flow: column nowrap;
    177.       /* 交叉轴项目居中显示 */
    178.       align-items: center;
    179.     }
    180.     body > footer a > span:first-of-type {
    181.       /* 图标字体应该大一些 */
    182.       font-size: 1.6rem;
    183.     }
    185.     /* 使用九宫格来演示: grid布局实现 */
    186.     .container {
    187.       width: 100px;
    188.       height: 100px;
    189.       display: grid;
    190.       grid-template-columns: repeat(3, 1fr);
    191.       gap: 5px;
    192.     }
    193.     .item {
    194.       width: 118px;
    195.       height: 118px;
    196.       display: flex;
    197.       justify-content: center;
    198.       align-items: center;
    199.     }
    200.   </style>
    201. </head>
    202. <body>
    203.   <!-- 页眉 -->
    204.   <header>
    205.     <a href="">LOGO</a>
    206.     <span class="iconfont"></span>
    207.   </header>
    209.   <!-- 轮播图 -->
    210.   <div class="slider">
    211.     <img src="static/images/banner.jpg" alt="" />
    212.   </div>
    214.   <!-- 主导航 -->
    215.   <nav>
    216.     <div>
    217.       <a herf=""><img src="static/images/link1.webp"</a>
    218.       <a href="">京东超市</a>
    219.     </div>
    220.     <div>
    221.       <a herf=""><img src="static/images/link2.webp"</a>
    222.       <a href="">服装百货</a>
    223.     </div>
    224.     <div>
    225.       <a herf=""><img src="static/images/link3.webp"</a>
    226.       <a href="">数码精品</a>
    227.     </div>
    228.     <div>
    229.       <a herf=""><img src="static/images/link4.webp"</a>
    230.       <a href="">优惠劵</a>
    231.     </div>
    232.     <div>
    233.       <a herf=""><img src="static/images/link1.webp"</a>
    234.       <a href="">超市精选</a>
    235.     </div>
    236.     <div>
    237.       <a herf=""><img src="static/images/link2.webp"</a>
    238.       <a href="">服装百货</a>
    239.     </div>
    240.     <div>
    241.       <a herf=""><img src="static/images/link3.webp"</a>
    242.       <a href="">数码精品</a>
    243.     </div>
    244.     <div>
    245.       <a herf=""><img src="static/images/link4.webp"</a>
    246.       <a href="">优惠劵</a>
    247.     </div>
    248.   </nav>
    250.   <!-- 热销商品 -->
    251.   <h2>
    252.       热销商品<span class="iconfont hot" style="color: coral;"
    253.       ></span
    254.     >
    255.   </h2>
    257.   <!-- 商品 -->
    258.   <div class="hot-goods">
    259.     <div class="goods-img">
    260.       <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
    261.       <p>Apple iPhone 11 128G</p>
    262.       <div>
    263.         <span>6299 元</span>
    264.         <span class="iconfont hot"></span>
    265.       </div>
    266.     </div>
    267.     <div class="goods-img">
    268.       <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
    269.       <p>Apple iPhone X 512G</p>
    270.       <div>
    271.         <span>8299 元</span>
    272.         <span class="iconfont hot"></span>
    273.       </div>
    274.     </div>
    276.     <div class="goods-img">
    277.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    278.       <p>华为笔记本电脑</p>
    279.       <div>
    280.         <span>5699 元</span>
    281.         <span class="iconfont hot"></span>
    282.       </div>
    283.     </div>
    284.     <div class="goods-img">
    285.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    286.       <p>小米笔记本电脑</p>
    287.       <div>
    288.         <span>3999 元</span>
    289.         <span class="iconfont hot"></span>
    290.       </div>
    291.     </div>
    292.     <div class="goods-img">
    293.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    294.       <p>联想笔记本电脑</p>
    295.       <div>
    296.         <span>4399 元</span>
    297.         <span class="iconfont hot"></span>
    298.       </div>
    299.     </div>
    300.   </div>
    302.   <!-- 商品列表区 -->
    304.   <h2 class="title">
    305.     商品列表<span class="iconfont hot" style="color: coral;"></span>
    306.   </h2>
    307.   <div class="container">
    308.     <div class="item">
    309.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    310.     </div>
    311.     <div class="item">
    312.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    313.     </div>
    314.     <div class="item">
    315.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    316.     </div>
    317.     <span class="item">
    318.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    319.     </span>
    320.     <span class="item">
    321.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    322.     </span>
    323.     <span class="item">
    324.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    325.     </span>
    326.     <span class="item">
    327.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    328.     </span>
    329.     <span class="item">
    330.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    331.     </span>
    332.     <span class="item">
    333.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    334.     </span>
    335.   </div>
    337.   <!-- 页脚 -->
    338.   <footer>
    339.     <a href="">
    340.       <span class="iconfont hot"></span>
    341.       <span>首页</span>
    342.     </a>
    343.     <a href="">
    344.       <span class="iconfont hot"></span>
    345.       <span>导航</span>
    346.     </a>
    347.     <a href="">
    348.       <span class="iconfont hot"></span>
    349.       <span>购物车</span>
    350.     </a>
    351.     <a href="">
    352.       <span class="iconfont hot"></span>
    353.       <span>登录</span>
    354.     </a>
    355.   </footer>
    356. </body>
    357. </html>
  • 备注：九宫格插入商品的图片，标题，描述，价格等，还不会如何实现，继续学习中
  • 2020.7.2 补上九宫格商品区，demo.html代码如下：
    1.   <h2>
    2.     商品列表
    3.   </h2>
    4.   <div class="container">
    5.     <div class="item">
    6.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    7.       <p>惠普笔记本电脑-256G-16寸</p>
    8.       <span>价格：8000元</span>
    9.     </div>
    10.     <div class="item">
    11.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    12.       <p>惠普笔记本电脑-256G-16寸</p>
    13.       <span>价格：8000元</span>
    14.     </div>
    15.     <div class="item">
    16.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    17.       <p>惠普笔记本电脑-256G-16寸</p>
    18.       <span>价格：8000元</span>
    19.     </div>
    20.     <div class="item">
    21.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    22.       <p>惠普笔记本电脑-256G-16寸</p>
    23.       <span>价格：8000元</span>
    24.     </div>
    25.     <div class="item">
    26.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    27.       <p>惠普笔记本电脑-256G-16寸</p>
    28.       <span>价格：8000元</span>
    29.     </div>
    30.     <div class="item">
    31.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    32.       <p>惠普笔记本电脑-256G-16寸</p>
    33.       <span>价格：8000元</span>
    34.     </div>
    35.     <div class="item">
    36.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    37.       <p>惠普笔记本电脑-256G-16寸</p>
    38.       <span>价格：8000元</span>
    39.     </div>
    40.     <div class="item">
    41.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    42.       <p>惠普笔记本电脑-256G-16寸</p>
    43.       <span>价格：8000元</span>
    44.     </div>
    45.     <div class="item">
    46.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    47.       <p>惠普笔记本电脑-256G-16寸</p>
    48.       <span>价格：8000元</span>
    49.     </div>
    50.   </div>
  • 九宫格demo.css代码如下：
    1.     .container {
    2.       width: 350px;
    3.       height: 350px;
    4.       margin: auto;
    5.       background-color: rgb(241, 238, 238);
    6.       display: grid;
    7.       grid-template-columns: repeat(3, 1fr);
    8.       gap: 2px;
    9.     }
    10.     .item {
    11.       width: 100%;
    12.       height: 100%;
    13.       background-color: rgb(246, 252, 252);
    14.       display: grid;
    15.       justify-content: center;
    16.       align-items: center;
    17.     }
    18.     .container > .item img {
    19.       width: 100%;
    20.       height: 100%;
    21.     }
    22.     .container > .item p {
    23.       font-size: 10px;
    24.       margin-left: 5px;
    25.     }
    26.     .container > .item span {
    27.       font-size: 10px;
    28.       margin-left: 5px;
    29.       margin: auto;
    30.     }
  • 效果图如下：

九客格

上一条：HTML flex弹性布局实战之PC端通用布局和移动端布局解决方案下一条：前端 - jQuery - 事件和Ajax
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多