亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 31
粉絲 2
評論 0
訪問量 34481
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
flex實例：PC端和移動端布局
霏夢
原創(chuàng)
1172人瀏覽過

— 作者：霏夢

pc端通用布局解決方案flex

  • html代碼如下：
    1. <div class="box">
    2.     <div class="header">
    3.       <a href="#">LOGO</a>
    4.       <a href="">產品</a>
    5.       <a href="">定價</a>
    6.       <a href="">解決方案</a>
    7.       <a href="">支持</a>
    8.       <a href="">下載</a>
    9.       <a href="">免費使用</a>
    10.     </div>
    11.     <div class="container">
    12.       <div class="aside">我在左邊</div>
    13.       <div class="main">我是內容區(qū)</div>
    14.       <div class="aside">我在右邊</div>
    15.     </div>
    16.     <div class="footer">
    17.       <p><a href="">使用條款</a> <a href="">隱私政策</&a></p>
    18.       <p>霏夢公司 Copyright ? 2020 京ICP備080000000號</p>
    19.     </div>
    20.   </div>

  • CSS代碼如下：

    1. <style>
    2.     /* 初始化 */
    3.     * {
    4.       margin: 0;
    5.       padding: 0;
    6.       box-sizing: border-box;
    7.     }
    8.     /* body轉為flex */
    9.     body{
    10.         min-width: 800px;
    11.         display: flex;
    12.           /* 垂直不換行 */
    13.         flex-flow: row nowrap;
    14.         justify-content: center;
    15.     }
    16.     /* box轉為flex */
    17.   .box {
    18.       min-width: 800px;
    19.       display: flex;
    20.       /* 垂直不換行 */
    21.       flex-flow: column nowrap;
    22.     }
    23.     .header,
    24.     .footer{
    25.         height: 50px;
    26.         border: 1px solid black;
    27.     }
    28.     .header{
    29.         display: flex;
    30.         /* 交叉軸上垂直居中顯示 */
    31.         align-items: center;
    32.     }
    33.     .header > a {
    34.       color: coral;
    35.       text-decoration: none;
    36.       flex: 0 1 100px;
    37.       /* 文本居中 */
    38.       text-align: center;
    39.     }
    40.     .header > a:first-of-type{
    41.         margin-right: 50px;
    42.     }
    43.     .header > a:last-of-type{
    44.         /* 免費使用 往最右 */
    45.         margin-left: auto;
    46.     }
    47.     /* 鼠標懸停時忽略logo */
    48.     .header >a:hover:not(:first-of-type){
    49.         background-color: chartreuse;
    50.         color:darkblue;
    51.     }
    52.     .container {
    53.       display: flex;
    54.       min-height: 300px;
    55.       margin: 10px auto;
    56.       justify-content: center;
    57.       text-align: center;
    58.     }
    59.     .container > .aside,
    60.     .container>.main{
    61.       border: 1px solid darkorange;
    62.       padding: 10px;
    63.     }
    64.     .container >.aside{
    65.         flex:0 0 200px;
    66.     }
    67.     .container >.main{
    68.         flex: 0 0 380px;
    69.         margin: 0 10px;
    70.     }
    71.     .footer{
    72.         display: flex;
    73.        /* 垂直方向不換行*/
    74.         flex-flow: column nowrap;
    75.         text-align: center;
    76.     }
    77.     .footer > p > a{
    78.         text-decoration: none;
    79.     }
    81.   </style>
  • 如圖所示：
    flex

移動端布局方案

  • html代碼如下：

    1. <body>
    2.   <!-- 頁眉 -->
    3.   <header>
    4.     <a href="">LOGO</a>
    5.     <span class="iconfont">&#xe61f;</span>
    6.   </header>
    8.   <!-- 輪播區(qū)域 -->
    9.   <div class="slider">
    10.     <img src="static/images/banner.jpg" alt="" />
    11.   </div>
    13.   <!-- 主要導航區(qū)域 -->
    14.   <div class="nav">
    15.     <div>
    16.       <a href=""><img src="static/images/link1.webp" alt="" /></a>
    17.       <a href="">天貓超市</a>
    18.     </div>
    19.     <div>
    20.       <a href=""><img src="static/images/link2.webp" alt="" /></a>
    21.       <a href="">服裝百貨</a>
    22.     </div>
    23.     <div>
    24.       <a href=""><img src="static/images/link3.webp" alt="" /></a>
    25.       <a href="">數碼電器</a>
    26.     </div>
    27.     <div>
    28.       <a href=""><img src="static/images/link1.webp" alt="" /></a>
    29.       <a href="">圖書精品</a>
    30.     </div>
    31.     <div>
    32.       <a href=""><img src="static/images/link1.webp" alt="" /></a>
    33.       <a href="">天貓超市</a>
    34.     </div>
    35.     <div>
    36.       <a href=""><img src="static/images/link2.webp" alt="" /></a>
    37.       <a href="">服裝百貨</a>
    38.     </div>
    39.     <div>
    40.       <a href=""><img src="static/images/link3.webp" alt="" /></a>
    41.       <a href="">數碼電器</a>
    42.     </div>
    43.     <div>
    44.       <a href=""><img src="static/images/link1.webp" alt="" /></a>
    45.       <a href="">圖書精品</a>
    46.     </div>
    47.   </div>
    49.   <h2>
    50.     商品熱銷區(qū)
    51.     <span class="iconfont hot" style="color: coral;">&#xe60b;</span>
    52.   </h2>
    53.   <div class="goods-hot">
    54.     <div class="goods-img">
    55.       <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
    56.       <p>Apple iPhone 11 128G</p>
    57.       <div>
    58.         <span>6299&nbsp;元</span>
    59.         <span class="iconfont hot">&#xe602;</span>
    60.       </div>
    61.     </div>
    62.     <div class="goods-img">
    63.       <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
    64.       <p>Apple iPhone X 512G</p>
    65.       <div>
    66.         <span>8299&nbsp;元</span>
    67.         <span class="iconfont hot">&#xe602;</span>
    68.       </div>
    69.     </div>
    70.     <div class="goods-img">
    71.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    72.       <p>華為筆記本電腦</p>
    73.       <div>
    74.         <span>5699&nbsp;元</span>
    75.         <span class="iconfont hot">&#xe602;</span>
    76.       </div>
    77.     </div>
    78.     <div class="goods-img">
    79.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    80.       <p>小米筆記本電腦</p>
    81.       <div>
    82.         <span>3999&nbsp;元</span>
    83.         <span class="iconfont hot">&#xe602;</span>
    84.       </div>
    85.     </div>
    86.     <div class="goods-img">
    87.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    88.       <p>聯想筆記本電腦</p>
    89.       <div>
    90.         <span>4399&nbsp;元</span>
    91.         <span class="iconfont hot">&#xe602;</span>
    92.       </div>
    93.     </div>
    94.   </div>
    95.   <!-- 商品列表 -->
    96.   <h2 class="title">
    97.     商品列表
    98.     <span class="iconfont hot" style="color: tomato;">&#xe64b;</span>
    99.   </h2>
    100.   <div class="goods-list">
    101.     <div class="goods-desc">
    102.       <a href=""><img src="static/images/goods4.jpg" alt="" /></a>
    103.       <a href=""
    104.         >[白條24期免息]Apple蘋果iPhone 11 手機 128G 全網通, 免費領取500元話費,
    105.         今天17:00下單,明晨12:00之前送達,7天無理由退貨,官方提供售后,測試的</a
    106.       >
    107.     </div>
    108.     <div class="goods-desc">
    109.       <a href=""><img src="static/images/goods3.jpg" alt="" /></a>
    110.       <a href=""
    111.         >西門子泳衣機 免費領取500元話費,
    112.         今天17:00下單,明晨12:00之前送達,7天無理由退貨,官方提供售后,測試的</a
    113.       >
    114.     </div>
    115.     <div class="goods-desc">
    116.       <a href=""><img src="static/images/goods5.png" alt="" /></a>
    117.       <a href=""
    118.         >這是一部全屏手機，價格只要1元，顏色很多，免費3年維修更換，快遞免費，上門更換</a
    119.       >
    120.     </div>
    121.     <div class="goods-desc">
    122.       <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
    123.       <a href=""
    124.         >ROG冰銳2 15.6英寸240Hz電競屏高色域輕薄便攜游戲本筆記本電腦（R9-4900HS
    125.         8核7nm 16G 1TSSD RTX2060MaxQ</a
    126.       >
    127.     </div>
    128.   </div>
    130.   <!-- 頁腳 -->
    131.   <footer>
    132.     <a href="">
    133.       <span class="iconfont hot">&#xe60c;</span>
    134.       <span>首頁</span>
    135.     </a>
    136.     <a href="">
    137.       <span class="iconfont hot">&#xe60c;</span>
    138.       <span>分類</span>
    139.     </a>
    140.     <a href="">
    141.       <span class="iconfont hot">&#xe60c;</span>
    142.       <span>購物車</span>
    143.     </a>
    144.     <a href="">
    145.       <span class="iconfont hot">&#xe60c;</span>
    146.       <span>未登錄</span>
    147.     </a>
    148.   </footer>
    149. </body>

  • css代碼如下 ：

    1. <style>
    2.   /* 初始化 */
    3.   * {
    4.     margin: 0;
    5.     padding: 0;
    6.     box-sizing: border-box;
    7.   }
    8.   a {
    9.     text-decoration: none;
    10.     color: grey;
    11.   }
    13.   html {
    14.     /* 可視區(qū)域的寬和高 */
    15.     width: 100vw;
    16.     height: 100vh;
    17.     font-size: 14px;
    18.     /* font-family:Arial, Helvetica, sans-serif; */
    19.     color: grey;
    20.   }
    21.   body {
    22.     min-width: 360px;
    23.     background-color: white;
    24.     display: flex;
    25.     flex-flow: column nowrap;
    26.   }
    28.   header {
    29.     color: white;
    30.     background-color: #333;
    31.     height: 30px;
    33.     display: flex;
    34.     justify-content: space-between;
    35.     align-items: center;
    37.     position: fixed;
    38.     width: 100vw;
    39.     padding: 0 10px;
    40.   }
    42.   .slider {
    43.     height: 180px;
    44.   }
    45.   .slider > img {
    46.     height: 100%;
    47.   }
    48.   .nav {
    49.     height: 200px;
    50.     margin-bottom: 10px;
    52.     display: flex;
    53.     /* 轉為多行容器 */
    54.     flex-flow: row wrap;
    55.     align-content: space-around;
    56.   }
    57.   .nav > div {
    58.     width: 25vw;
    59.     display: flex;
    60.     flex-flow: column nowrap;
    61.     text-align: center;
    62.   }
    63.   .nav > div > a img {
    64.     width: 50%;
    65.   }
    66.   .title {
    67.     text-align: center;
    68.     font-size: 1.6rem;
    69.     font-weight: normal;
    70.   }
    71.   .goods-hot {
    72.     border-top: 1px solid #cdcdcd;
    73.     margin-top: 10px;
    74.     font-size: 0.8rem;
    75.     display: flex;
    76.     /* 水平多行容器 */
    77.     flex-flow: row wrap;
    78.   }
    79.   .goods-hot img {
    80.     width: 100%;
    81.   }
    82.   .goods-hot > .goods-img {
    83.     /* 內邊距并重置大小 */
    84.     padding: 10px;
    85.     box-sizing: border-box;
    86.     /* 允許放大不允許縮小,否則項目不會換行,多行容器失效 */
    87.     flex: 1 0 30vw;
    89.     /* 轉為flex */
    90.     display: flex;
    91.     /* 主軸垂直且不允許換行 */
    92.     flex-flow: column nowrap;
    93.     justify-content: center;
    94.   }
    95.   /* 轉flex,主軸上排列對齊方式 */
    96.   .goods-hot > .goods-img > div {
    97.     display: flex;
    98.     /* 分散對齊 */
    99.     justify-content: space-around;
    100.   }
    102.   .goods-list {
    103.     padding: 10px;
    104.     border: 1px solid #cdcdcd;
    105.     margin-top: 10px;
    106.     font-size: 14px;
    107.     display: flex;
    108.     /* 主軸必須是垂直 */
    109.     flex-flow: column nowrap;
    110.   }
    111.   .goods-list > .goods-desc {
    112.     display: flex;
    113.     margin: 10px 0;
    114.   }
    115.   .goods-list > .goods-desc > a {
    116.     padding: 10px 0;
    117.     box-sizing: border-box;
    118.   }
    119.   /* 圖片全部適應項目空間 */
    120.   .goods-list > .goods-desc > a > img {
    121.     width: 100%;
    122.   }
    124.   .goods-list > .goods-desc > a:last-of-type:hover {
    125.     color: seagreen;
    126.   }
    127.   footer {
    128.     color: #666;
    129.     height: 60px;
    130.     background-color: #efefef;
    131.     border-top: 1px solid #666;
    132.     position: fixed;
    133.     bottom: 0;
    134.     width: 100vw;
    135.     display: flex;
    136.     justify-content: space-around;
    137.   }
    138.   footer > a {
    139.     margin-top: 10px;
    140.     display: flex;
    141.     /* 垂直排列不換行  */
    142.     flex-flow: column nowrap;
    143.     /* 交叉軸項目居中顯示 */
    144.     align-items: center;
    145.   }
    146.   footer a > span:first-of-type {
    147.     font-size: 1.6rem;
    148.   }
    149.   .hot {
    150.     /* 底部圖標的顏色 */
    151.     color: coral;
    152.   }
    153. </style>
  • 圖標樣式和圖片，請自行替換，參考阿里圖標，這里就不寫了
  • 效果圖
    flex移動端

- 總結

  1. 建議用firefox瀏覽器，并寫并看效果，并調試
  2. 要清楚flex的容器和項目，特別要知道主軸和交叉軸的顯示
  3. 要會阿里圖標的應用
  4. 需要注意的是：當時設置 flex 布局之后，子元素的 float、clear、vertical-align 的屬性將會失效
  5. 有下面六種屬性可以設置在容器上，它們分別是：
    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：看來是明白了
本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯系admin@php.cn舉報處理！
全部評論 文明上網理性發(fā)言，請遵守新聞評論服務協議
0條評論
作者最新博文
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網訂閱號
每天精選資源文章推送
PHP中文網APP
隨時隨地碎片化學習
PHP中文網抖音號
發(fā)現有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網，和優(yōu)秀的人一起學習！
    全站2000+教程免費學