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

搜索
博主信息
博文 11
粉絲 0
評論 0
訪問量 30446
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
前端Flex彈性盒子作業(yè)，彈性盒子元素的六個屬性及其使用
飲雪煮茶
原創(chuàng)
1314人瀏覽過

一、組件化開發(fā)（components）小結：

1.組件化開發(fā)就是把一個頁面拆分成最小的功能塊，在寫網(wǎng)頁是再通過把各個功能塊組裝起來構成頁面。這樣可以減少重復工作。
2.組件化開發(fā)注意點：

對文件夾的管理，文件的命名注意，比較容易記憶，這樣再以后利用是可以快速找到文件；
編程約定，@import語法實現(xiàn)頁面的組裝；
是一個組件必須使用一個獨立無二的類名class。
最大的意義在于他的復用性

二、Flex彈性盒子元素的六個屬性

  • 1.flex-basis屬性定義了分配容器多余空間之前，項目占據(jù)的主軸空間。也就是現(xiàn)在的顯示寬度，它的默認值是auto，即項目的本來大小。

  1. .item{
  2.     flex-basis:<legth>; /*可以是數(shù)值和百分比*/
  3.     flex-basis:auto; /*默認值，原始寬度*/
  4. }

  • 2.flex-grow屬性定義了項目的放大比例，默認值是0，即如果存在剩余空間，也不放大。

  1. .item{
  2.     flex-grow:<number>; /*放大的數(shù)值，默認值是0*/
  3. }

  • 3.flex-shrink屬性定義了項目的縮小比例，默認值為1，即如果空間不足，該項目將縮小。

  1. .item{
  2.     flex-shrink:<mumber>;/*縮小的數(shù)值，默認值是1*/
  3. }

  • 4.flex屬性是flex-frow,flex-shrink,flex-basis的縮寫，默認值為0 1 auto.

  1. flex:0 1 auto;  等價于 flex:initial;
  2. flex:auto; 等價于 flex:1 1 auto; 等價于 flex:2;
  3. flex:none; 等價于 flex:0 0 auto;

  • 5.order屬性定義了項目的排列順序，數(shù)值越小，排列越靠前，默認值為0.

  1. .item{
  2.     order:<integer>; /*排列數(shù)值，默認值為0*/
  3. }

  • 6.align-self屬性定義了單個項目再縱軸上的對齊方式，可以覆蓋align-items定義的屬性，默認值為auto即繼承父元素的align-items屬性，如果沒有父元素，等同于stretch。

  1. .tiem{
  2.     align-self:auto; /*默認值，繼承父元素align-items屬性*/
  3.     align-self:flex-start; /*交叉軸開始對齊*/
  4.     align-self:flex-end; /*交叉軸結束對齊*/
  5.     align-self:center; /*交叉軸中間對齊*/
  6.     align-self:baseline; /*交叉軸第一列基線*/
  7.     align-self:stretch; /*項目的邊距盒的尺寸盡可能接近所在行的尺寸*/
  8. }

三、默寫組件開發(fā)頭部代碼

  • 1.初始代碼重置css樣式。

  1. *{
  2.     margin:0;
  3.     padding:0;
  4.     outline: 1px dashed red;
  5. }
  6. body{
  7.     font-size: 13px;
  8.     color:#555;
  9.     background-color:#efefef;
  10. }
  11. a{
  12.     color:#404040;
  13.     text-decoration:none;
  14.     font-size:13px;
  15. }
  16. li {
  17.     list-style:none;
  18. }

  • 2.頭部專用css文件：

  1. @import url(../../public_reset.css);
  2. .public-header{
  3.     height:44px;
  4.     background-color:000;
  5.     padding:0 20px;
  6.     display:flex;
  7.     flex-flow: row nowrap;
  8. }
  9. .public-header a{
  10.     line-height:44px;
  11.     color:#ccc;
  12.     padding:0 10px;
  13. }
  14. .public-header > a:hover{
  15.     background-color:#fff;
  16.     color:#000;
  17. }
  18. .public-header > span{
  19.     margin-left:auto;
  20. }
  21. .public-header > span > a > i{
  22.     font-size:16px;
  23.     color:#ccc;
  24.     padding-right:10px;
  25. }

  • 3.頭部html代碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <link rel="stylesheet" href="../../static/font/iconfont.css">
  6.         <link rel="stylesheet" href="./public_header.css">
  7.         <title>頭部導航</title>
  8.     </head>
  9.     <body>
  10.         <div class="public-header">
  11.             <a href="">網(wǎng)站首頁</a>
  12.             <a href="">專題</a>
  13.             <a href="">網(wǎng)站導航</a>
  14.             <a href="">二手商品</a>
  15.             <a href="">討論區(qū)</a>
  16.             <span>
  17.                 <a href=""><i class="iconfont icon-huiyuan2"></i>登錄</a>
  18.                 <a href="">網(wǎng)站首頁</a>
  19.             </span>
  20.         </div>
  21.     </body>
  22. </html>
批改老師：天蓬老師天蓬老師

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

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

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

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