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

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198545
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
12月25日作業(yè)：實戰(zhàn)操作（組件）導(dǎo)航案例
李東亞1??3????12?
原創(chuàng)
1080人瀏覽過

作業(yè)一：書寫flex元素上的六個屬性:
1、元素寬度 flex-basis：
屬性值： auto px，% ，min-widht
設(shè)置了元素寬度后，元素就有兩個寬度屬性：原始寬度和顯示寬度（顯示優(yōu)先級：flex-basis>原始寬度）
2、元素擴展 flex-grow:
屬性值：0-1（默認(rèn)值0 不分配主軸上的剩余寬度）
屬性值大于1時，元素值按，各個元素的大于1的值比例等分主軸剩余空間
3、元素收縮：flex-shrink:
屬性值：0-1 (默認(rèn)值1，元素之家1:1比例收縮自動收縮適應(yīng)flex項目的大小)
4、上述flex元素三個屬性簡寫：flex:
0,1,auto 默認(rèn)值 等同于 flex：1；
1，1，auto 等同于 flex:2;
none 取消flex元素的伸縮屬性
5、flex元素在交叉軸上的對其方式 align-item:
屬性值：flex-start flex-end center
6、flex元素在主軸上的排列順序：order:
值越小越靠前，不設(shè)置按照html編寫順序排列

知識點補充：
1、border常用樣式：solid（實線）、dashed(虛線) dotted(點線)、double(雙線)
2、盒子陰影：box-shadow:
水平陰影、垂直陰影(前兩項時必協(xié)參數(shù))、陰影模糊距離、陰影大小、陰影顏色和 內(nèi)外陰影（默認(rèn)外陰影 inset內(nèi)陰影）

作業(yè)二：
頁面組件開發(fā)：
1、整體規(guī)劃非常重要：公共組件、專用組件
2、各個組件之間的關(guān)聯(lián)和利用
3、網(wǎng)站頁面的規(guī)劃

作業(yè)三：
組件開發(fā)：
目錄圖：
公共重置代碼：

  1. * {
  2.     padding: 0;
  3.     margin:0;
  4.     /*outline: 1px dashed red;*/
  5. }
  6. body {
  7.     font-size:13px;
  8.     color: #333333;
  9.     font-family: "Adobe 宋體 Std L";
  12. }
  13. a {
  14.     text-decoration:none;
  15.     font-size:13px;
  16.     color:#666666;
  17. }
  18. li {
  19.     list-style: none;
  20. }

首頁導(dǎo)航代碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="../../../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)站導(dǎo)航</a>
  14.     <a href="">二手商品</a>
  15.     <a href="">討論</a>
  16.     <span>
  17.         <a href=""><<i calss="iconfont icon-huiyuan2"></i>登陸</a>
  18.         <a href=""><i>免費注冊</i></a>
  19.     </span>
  20. </div>
  21. </body>
  22. </html>

首頁導(dǎo)航css：

  1. /*導(dǎo)入公共默認(rèn)*/
  2. @import url(../../public_reset.css);
  3. .public-header {
  4.     height:44px;
  5.     background-color:black;
  6.     padding:0 20px;
  7.     display:flex;
  8.     flex-flow:row nowrap;
  11. }
  12. .public-header > a {
  13.     line-height:44px;
  14.     color: #cccccc;
  15.     margin:0 10px;
  16. }
  17. .public-header > a:hover {
  18.     background-color: #fff;
  19.     color:#222222;
  20. }
  21. .public-header > span {
  22.     margin-left:auto;
  23.     align-self: center;
  24. }
  25. .public-header > span > a{
  26.     margin:0 10px;
  27.     color:#cccccc;
  28. }
  29. .public-header > span  i {
  30.     padding-right:6px;
  31. }

首頁導(dǎo)航效果圖：

首頁頭標(biāo)題代碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>public-headline</title>
  6.     <link rel="stylesheet" href="public-headline.css">
  7. </head>
  8. <body>
  9. <div class="public-headline">
  10.     <span>二手交易</span>
  11. </div>
  12. </body>
  13. </html>

首頁頭標(biāo)題css：

  1. @import url(../../public_reset.css);
  2. .public-headline {
  3.     padding: 40px;
  4.     text-align: center;
  5. }
  6. .public-headline > span {
  7.     font-size:40px;
  8.     font-weight: bolder;
  9.     padding-bottom:7px;
  10.     border-bottom: 2px solid red;
  12. }

首頁頭標(biāo)題效果圖：

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

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

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

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

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