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

搜索
博主信息
博文 22
粉絲 1
評論 1
訪問量 26583
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
flex布局，子元素（item）的屬性，以及前端組件開發(fā)初嘗試--PHP培訓十期線上班
Miss灬懶蟲
原創(chuàng)
1414人瀏覽過

flex布局，子元素（item）的屬性，以及前端組件開發(fā)初嘗試

子元素（item）的屬性

  • order
  • align-self
  • flex-basis
  • flex-grow
  • flex-shrink
  • flex: flex-grow flex-shrink flex-basis

詳細說明在注釋哦！嘻嘻！

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex item屬性</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         .container{
  13.             width: 400px;
  14.             height: 100px;
  15.             border: 1px dashed;
  16.             background-color: #cccccc;
  17.             display: flex;
  18.         }
  20.         /*flex 彈性盒子的 子元素（item/項目）的屬性*/
  21.         .container >.item{
  22.             width: 100px;
  23.             height: 30px;
  24.             border: 1px dashed red;
  25.             background-color: wheat;
  26.         }
  28.         /* 1- 在容器中使用 order 屬性，控制子元素（item）的排列先后順序；*/
  29.         .container >:first-child{
  30.             order: 3;
  31.         }
  32.         .container >:last-child{
  33.             order: 1;
  34.         }
  36.         /* 2- 在容器中使用，align-self 屬性，單獨自定義某一個子元素，在交叉軸上的對齊方式；*/
  37.         .container >:nth-child(2){
  38.             align-self: flex-end;
  39.             background-color: #9a6e3a;
  40.         }
  41.         /*3- 子元素（item/項目）中，關于剩余空間部分的屬性中。*/
  42.         /*3.1 flex-basis ，子元素（item),在分配主軸剩余空間之前的“基礎寬度”
  43.             默認值：flex-basis：auto,也就是顯示寬度是“原始的寬度值： .container >.item{ width: 100px; }”；
  44.             flex-basis:80px ,重新定義，子元素的顯示寬度；
  45.             flex-basis:20% ,
  46.             min-width:120px ,子元素（item）的最小寬度；
  47.         */
  48.         .container >.item{
  49.             flex-basis: 30%;
  50.             min-width: 120px;
  51.         }
  53.          /*3.2 flex-grow ，表示是否允許子元素（item)沿著主軸方向,以 flex-basis 屬性為基礎進行擴展。
  54.             并且，規(guī)定將主軸剩余空間分配到項目上的比例；
  55.             默認值：flex-grow：0 ，不允許擴展；
  56.             若 flex-grow：1 ，則表示將剩余空間平局分配給各個子元素（item）；
  57.             若 flex-grow:0.2 ,則表示將余空間的20%，分別增加給子元素；
  58.          */
  59.         .container >.item{
  60.             flex-grow: 1;
  61.         }
  63.          /*3.3 flex-shrink ，與flex-grow雷同，只不過是控制子元素沿主軸方向，以flex-basis 屬性為基礎進行收縮。
  64.             需要注意的是，在進行收縮的時候，需要考慮最小寬度，并且只有當子元素的寬度總和超出容器寬度時，才能起效；
  65.             默認值：flex-shrink：1 ，
  66.             flex-shrink 不接受負值；
  67.             flex-shrink :0 ,表示不進行收縮；
  68.          */
  69.         .container >.item{
  70.             flex-shrink: 1;
  71.         }
  73.          /*3.4 簡寫 flex: flex-grow flex-shrink flex-basis，
  74.          默認值：flex:0(不擴展） 1（可收縮） auto（自適應寬度）；
  75.          */
  76.         .container >.item{
  77.             /*flex:auto 等價于 flex:1 1 auto ，表示【可擴展，可收縮，自適應寬度】
  78.                 flex:2 等價于 flex:1 1 auto ，表示【可擴展，可收縮，自適應寬度】
  79.                 flex:none 等價于 flex:0 0 auto ,表示【不可擴展 不可收縮，自適應寬度】
  80.             */
  81.             flex:auto;
  82.         }
  84.     </style>
  85. </head>
  86. <body>
  87. <div class="container">
  88.     <span class="item">1</span>
  89.     <span class="item">2</span>
  90.     <span class="item">3</span>
  91. </div>
  92. </body>
  93. </html>

抄寫

前端組件開發(fā)

效果與目錄結構

  • 效果

  • 目錄結構

HTML代碼

  • index.html 文件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>組件頁面練習</title>
  6.     <link rel="stylesheet" href="index.css">
  7. </head>
  8. <body>
  9. <!--頁面頭部組件-->
  10. <div class="public-header">
  11.     <a href="">網站首頁</a>
  12.     <a href="">專題</a>
  13.     <a href="">網站導航</a>
  14.     <a href="">二手商品</a>
  15.     <a href="">討論區(qū)</a>
  16.     <span>
  17.         <a href=""><i class="iconfont">&#xe60e;</i>登錄</a>
  18.         <a href="">免費注冊</a>
  19.     </span>
  20. </div>
  21. <!--頁面標題組件-->
  22. <div class="public-headline">
  23.     <span>二手拍賣</span>
  24. </div>
  25. </body>
  26. </html>

CSS代碼

  • 公共樣式初始化文件 public_reset.css
  1. /*引入字體圖標庫*/
  2. @font-face {
  3.     font-family: 'iconfont';
  4.     src: url('../../../1220/css/font/iconfont.eot');
  5.     src: url('../../../1220/css/font/iconfont.eot?#iefix') format('embedded-opentype'),
  6.     url('../../../1220/css/font/iconfont.woff2') format('woff2'),
  7.     url('../../../1220/css/font/iconfont.woff') format('woff'),
  8.     url('../../../1220/css/font/iconfont.ttf') format('truetype'),
  9.     url('../../../1220/css/font/iconfont.svg#iconfont') format('svg');
  10. }
  11. .iconfont {
  12.     font-family: "iconfont", serif !important;
  13.     font-size: 16px;
  14.     font-style: normal;
  15.     -webkit-font-smoothing: antialiased;
  16.     -moz-osx-font-smoothing: grayscale;
  17. }
  19. /*所有頁面初始化樣式設置*/
  20. *{
  21.     margin: 0;
  22.     padding: 0;
  23.     /*調試參考線*/
  24.    /* outline: 1px dashed red;*/
  25. }
  26. body{
  27.     font-size: 13px;
  28.     color: #555555;
  29.     background-color: #efefef;
  30. }
  31. a{
  32.     font-size: 13px;
  33.     color: #404040;
  34.     /*去掉超鏈接下劃線*/
  35.     text-decoration: none;
  36. }
  37. li{
  38.     list-style: none;
  39. }
  • 公共頭部樣式文件 public_header.css
  1. /*引入公共初始化標簽樣式文件*/
  2. @import "public_reset.css";
  4. /*頭部*/
  5. .public-header{
  6.     height: 44px;
  7.     background-color: black;
  8.     padding: 0 20px;
  10.     /*轉化為彈性盒子容器*/
  11.     display: flex;
  12.     flex-flow: row nowrap;
  13. }
  14. /*統(tǒng)一設置容器下的 a 標簽項目*/
  15. .public-header >a{
  16.     line-height: 44px;
  17.     text-align: center;
  18.     padding: 0 10px;
  19.     color: #cccccc;
  20. }
  21. .public-header >a:hover{
  22.     background-color: #fff;
  23.     color: black;
  24. }
  26. /*頭部右側內容 right*/
  27. .public-header >span{
  28.     line-height: 44px;
  29.     text-align: center;
  30.     margin-left: auto;
  31. }
  32. .public-header >span a{
  33.     color: #cccccc;
  34.     padding: 0 10px;
  35. }
  36. /*設置右側登錄圖標*/
  37. .public-header >span a i{
  38.     font-size: 16px;
  39.     color: #cccccc;
  40.     padding-right: 10px;
  41. }
  • 公共頭部樣式文件 public_headline.css
  1. /*引入公共初始化標簽樣式文件*/
  2. @import "public_reset.css";
  4. .public-headline{
  5.     padding: 30px;
  6.     text-align: center;
  7. }
  8. .public-headline >span{
  9.     font-size: 30px;
  11.     /*字體粗體樣式*/
  12.     font-weight: bolder;
  13.     padding-bottom: 7px;
  14.     border-bottom: 3px solid red;
  15. }
  • 頁面專用的樣式文件 index.css
  1. @import "Components/public/public_reset.css";
  3. @import "Components/public/public_header.css";
  5. @import "Components/public/public_headline.css";

組件開發(fā)感受

1、需要較為清晰的將頁面進行合理的拆分，以保障組件的復用性，復用性是組件開發(fā)最大的價值體現(xiàn)；
2、組件的命名要規(guī)范、清晰，并且具備很好的可讀性，只有這樣才能提高代碼的可維護性，從而降低維護成本；
3、css的類名需要層級明確，防止因為意外的樣式覆蓋；

批改老師：天蓬老師天蓬老師

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

老師批語：能理解到這個地步不簡單, 畢竟昨晚咱們才開始進行組件分解... , 今晚更精彩, 不要錯過
本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網訂閱號
每天精選資源文章推送
PHP中文網APP
隨時隨地碎片化學習
PHP中文網抖音號
發(fā)現(xiàn)有趣的

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

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