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

搜索
博主信息
博文 55
粉絲 3
評(píng)論 0
訪問(wèn)量 69515
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
Flex項(xiàng)目屬性
王佳祥
原創(chuàng)
1448人瀏覽過(guò)

Flex項(xiàng)目屬性

一、Flex父元素屬性

1. display

  1. 用來(lái)定義一個(gè) flex 容器。如果設(shè)置為 flex 則容器呈現(xiàn)為塊狀元素，設(shè)置為inline-    flex 則容器呈現(xiàn)為行內(nèi)元素。

CSS 代碼:

  1.     .container {
  2.       display: flex; /* or inline-flex */
  3.     }

2. flex-direction

  1. flex-direction 屬性確立了主軸，從而定義了 flex 項(xiàng)在 flex 容器中的排布方向。 Flexbox 是單向布局，有些時(shí)候我們也稱作一維布局。 可以將 flex 項(xiàng)視為主要沿著水平行或垂直列排布。

CSS 代碼:

  1.     .container {
  2.       flex-direction: row | row-reverse | column | column-reverse;
  3.     }

3. flex-wrap

  1. 默認(rèn)情況下，flex 項(xiàng)會(huì)盡可能地嘗試排在同一行上（行或列），通過(guò)設(shè)置 flex-wrap 來(lái)決定 flex 項(xiàng)是否允需要換行。

CSS 代碼:

  1.     .container{
  2.       flex-wrap: nowrap | wrap | wrap-reverse;
  3.     }
  1. nowrap (默認(rèn)值) : 不換行
  2. wrap: 換行
  3. wrap-reverse: flex 項(xiàng)將 從下到上 根據(jù)實(shí)際情況排布再多行上折行。

4. flex-flow

  1. 這是 flex-direction 和 flex-wrap 屬性的縮寫形式。同時(shí)定義 flex 容器的主軸和交叉軸。默認(rèn)是 row nowrap

CSS 代碼:

  1. flex-flow: <‘flex-direction’> || <‘flex-wrap’>

5. justify-content

  1. justify-content 屬性定義了flex 項(xiàng)沿主軸方向的對(duì)齊方式。

CSS 代碼:

  1. .container {
  2.   justify-content: flex-start | flex-end | center | space-between | space-around;
  3. }

  1.     flex-start（默認(rèn)值）：左對(duì)齊
  2.     flex-end：右對(duì)齊
  3.     center： 居中
  4.     space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
  5.     space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

6. align-items

  1. align-items 定義了 flex 項(xiàng)如何沿當(dāng)前行在交叉軸上排布的默認(rèn)行為?？梢詫⑵湟暈榻徊孑S（垂直于主軸）上的對(duì)齊方式。

CSS 代碼:

  1. .container {
  2.   align-items: flex-start | flex-end | center | baseline | stretch;
  3. }

  1.     flex-start：交叉軸的起點(diǎn)對(duì)齊。
  2.     flex-end：交叉軸的終點(diǎn)對(duì)齊。
  3.     center：交叉軸的中點(diǎn)對(duì)齊。
  4.     baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
  5.     stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。

7.align-content

  1. 當(dāng)交叉軸上有剩余空間時(shí)，align-content 可以設(shè)置 flex 容器中的 行 在交叉軸上如何分配剩余空間，類似于 justify-content 在主軸上對(duì)齊單個(gè) flex 項(xiàng)的方式。

CSS 代碼:

  1. .container {
  2.   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  3. }

  1.     flex-start：與交叉軸的起點(diǎn)對(duì)齊。
  2.     flex-end：與交叉軸的終點(diǎn)對(duì)齊。
  3.     center：與交叉軸的中點(diǎn)對(duì)齊。
  4.     space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
  5.     space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
  6.     stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。

二、flex 項(xiàng)目屬性

1. order

  1. 默認(rèn)情況下，flex 項(xiàng)按源（HTML結(jié)構(gòu)）順序排布。但是，order 屬性可以控制它們?cè)?/span> flex 容器中的顯示順序。

CSS 代碼:

  1. .item {
  2.   order: <integer>;  /* 默認(rèn)值是 0 */
  3. }

  1. order值越小排列越靠前

2. flex-grow（放大因子）

  1. flex-grow 定義了 flex 項(xiàng)在有可用剩余空間時(shí)拉伸比例。
  2. 它接受的值作為比例，無(wú)單位。它規(guī)定了 flex 項(xiàng)應(yīng)該占 flex 容器中可用空間的比例。
  3. 如果所有 flex 項(xiàng)的 flex-grow 都設(shè)置為 1 ，則父容器中的剩余空間將平均分配給所有子項(xiàng)。 如果其中一個(gè)子項(xiàng)的值為 2 ，則該子項(xiàng)占用的剩余空間是其他子項(xiàng)的兩倍（或者至少會(huì)盡力獲得）。

CSS 代碼:

  1. .item {
  2.   flex-grow: <number>; /* default 0 */
  3. }

注：負(fù)值對(duì)于 flex-grow 無(wú)效。

比如我們得 flex 容器中有 6 個(gè) flex 項(xiàng)，每個(gè) flex 項(xiàng)的 flex-grow 初始值都是 1。如果我們將每個(gè) flex 項(xiàng)的 flex-grow 相加起來(lái)，總和為 6。因此 flex 容器的總寬度被平均分成了 6 份。每個(gè) flex 項(xiàng)增長(zhǎng)到填充容器可用空間的1/6。

當(dāng)我們將第 3 個(gè) flex 項(xiàng)的 flex-grow 設(shè)置為 2 時(shí)，flex 容器現(xiàn)在被分成了 7 等份，因?yàn)樗?flex-grow 屬性是：1 + 1 + 2 + 1 + 1 + 1。第 3 個(gè) flex 項(xiàng)占了整個(gè)容器空間的 2/7，其他的占了 1/7。

3. flex-shrink（縮小因子）

  1. flex-shrink 定義了 flex 項(xiàng)的收縮的能力。（注：與 flex-grow 拉伸正好相反，flex-shrink 決定 flex 項(xiàng)允許收縮多少比例。）

CSS 代碼:

  1. .item {
  2.   flex-shrink: <number>; /* default 1 */
  3. }

注：負(fù)值對(duì)于 flex-shrink 無(wú)效。

4. flex-basis

  1. flex-basis 定義了在分配剩余空間之前 flex 項(xiàng)默認(rèn)的大小?？梢栽O(shè)置為某個(gè)長(zhǎng)度值（e.g. 20%, 5rem,等）或者關(guān)鍵字。關(guān)鍵字 auto 意味著 flex 項(xiàng)會(huì)按照其本來(lái)的大小顯示

CSS 代碼:

  1. .item {
  2.   flex-basis: <length> | auto; /* default auto */
  3. }

如果設(shè)置為 0 , 則 flex 項(xiàng)內(nèi)容周圍的空隙不會(huì)根據(jù) flex-grow 按比例分配，如果設(shè)置為 auto，則 flex 項(xiàng)周圍額外的空襲會(huì)根據(jù) flex-grow 按照比例分配

5. flex

  1. flex 是 flex-grow、flex-shrink、flex-basis 三個(gè)屬性的縮寫。其中第二個(gè)和第三個(gè)參數(shù)(flex-shrink 和 flex-basis)是可選的。默認(rèn)值為0 1 auto。

CSS 代碼:

  1. .item {
  2.   flex: none | [ < 'flex-grow'> < 'flex-shrink'>? || < 'flex-basis'> ]
  3. }

推薦使用縮寫形式而不是單獨(dú)地設(shè)置每一個(gè)屬性，縮寫形式中會(huì)更加智能地計(jì)算出相關(guān)值。

6. align-self

  1. align-self 屬性允許某個(gè)單獨(dú)的 flex 項(xiàng)覆蓋默認(rèn)的對(duì)齊方式

CSS 代碼:

  1. .item {
  2.   align-self: auto | flex-start | flex-end | center | baseline | stretch;
  3. }

三、FlexPC端布局

  • 代碼：
  1. title>PC端布局的通用解決方案</title>
  2.     <style>
  3.       /*初始化*/
  4.       * {
  5.         font-size: 16px;
  6.         padding: 0;
  7.         margin: 0;
  8.         box-sizing: border-box; /*不加內(nèi)邊距和邊框的寬度，默認(rèn)是content-box*/
  9.       }
  10.       body {
  11.         display: flex;
  12.         flex-flow: column nowrap; /*從上到下排列，不換行*/
  13.       }
  14.       nav {
  15.         display: flex;
  16.         justify-content: start;
  17.         align-items: center;
  18.         min-width: 80px;
  19.         background: #000;
  20.       }
  21.       nav > a:not(:first-of-type) {
  22.         width: 150px;
  23.         text-align: center;
  24.         color: #fff;
  25.         text-decoration: none;
  26.         height: 50px;
  27.         line-height: 50px;
  28.         margin-left: 40px;
  29.       }
  30.       nav > a:not(:first-of-type):hover {
  31.         background: rgba(87, 87, 87, 0.5);
  32.         color: rgb(241, 79, 79);
  33.       }
  34.       nav > a:last-of-type {
  35.         margin-left: auto;
  36.       }
  37.       nav > a > img {
  38.         height: 50px;
  39.       }
  40.       .container {
  41.         display: flex;
  42.         flex-flow: row nowrap;
  43.         justify-content: center;
  44.         align-items: center;
  45.         margin: 10px auto;
  46.       }
  47.       aside {
  48.         min-width: 200px;
  49.         min-height: 600px;
  50.         background: lightgoldenrodyellow;
  51.       }
  52.       main {
  53.         min-width: 600px;
  54.         min-height: 600px;
  55.         margin: 0 10px;
  56.         background: lightblue;
  57.       }
  58.       footer {
  59.         display: flex;
  60.         height: 80px;
  61.         background: #000;
  62.         justify-content: center;
  63.         align-items: center;
  64.         flex-flow: column nowrap;
  65.       }
  66.       footer > div {
  67.         display: flex;
  68.         justify-content: center;
  69.       }
  70.       footer > div:first-of-type a {
  71.         width: 100px;
  72.         font-size: 14px;
  73.         height: 20px;
  74.       }
  75.       a {
  76.         text-decoration: none;
  77.         color: rgb(184, 184, 184);
  78.       }
  79.       footer > div:last-of-type {
  80.         margin-top: 10px;
  81.         color: rgb(184, 184, 184);
  82.       }
  83.       footer > div:last-of-type span {
  84.         font-size: 14px;
  85.         margin: 0 20px;
  86.       }
  87.     </style>
  88.   </head>
  89.   <body>
  90.     <!-- 頁(yè)眉 -->
  91.     <header>
  92.       <nav>
  93.         <a href=""><img src="logo.png" alt="" /></a>
  94.         <a href="">首頁(yè)</a>
  95.         <a href="">電器城</a>
  96.         <a href="">醫(yī)藥館</a>
  97.         <a href="">營(yíng)業(yè)廳</a>
  98.         <a href="">登錄/注冊(cè)</a>
  99.       </nav>
  100.     </header>
  101.     <!-- 主體 -->
  102.     <div class="container">
  103.       <aside>左邊欄</aside>
  104.       <main>主體內(nèi)容</main>
  105.       <aside>右邊欄</aside>
  106.     </div>
  107.     <!-- 頁(yè)腳 -->
  108.     <footer>
  109.       <div>
  110.         <a href="">關(guān)于天貓</a>
  111.         <a href="">幫助中心</a>
  112.         <a href="">開(kāi)放平臺(tái)</a>
  113.         <a href="">誠(chéng)聘英才</a>
  114.         <a href="">聯(lián)系我們</a>
  115.         <a href="">網(wǎng)站合作</a>
  116.         <a href="">法律聲明</a>
  117.         <a href="">隱私權(quán)政策</a>
  118.         <a href="">知識(shí)產(chǎn)權(quán)</a>
  119.         <a href="">廉正舉報(bào)</a>
  120.         <a href="">規(guī)則意見(jiàn)征集</a>
  121.       </div>
  123.       <div>
  124.         <span>浙江省網(wǎng)絡(luò)食品銷售第三方平臺(tái)提供者備案：浙網(wǎng)食A33010002</span>
  125.         <span> 互聯(lián)網(wǎng)藥品交易服務(wù)資格證書：國(guó)A20150001</span>
  126.       </div>
  127.     </footer>
  128.   </body>
  129. </html>
  • 預(yù)覽：

四、Flex移動(dòng)端布局

  • 代碼：
  1. <title>移動(dòng)端布局</title>
  2.     <style>
  3.       * {
  4.         margin: 0;
  5.         padding: 0;
  6.         box-sizing: border-box;
  7.       }
  8.       a {
  9.         text-decoration: none;
  10.         color: #666;
  11.       }
  12.       html {
  13.         width: 100vw; /*當(dāng)前可視區(qū)的寬度*/
  14.         /* vh:可視區(qū)的高度 */
  15.         height: 100vh;
  16.         font-size: 14px;
  17.         color: #666;
  18.       }
  19.       body {
  20.         min-width: 360px;
  21.         background: #fff;
  22.         display: flex;
  23.         flex-flow: column nowrap;
  24.       }
  25.       body > header {
  26.         color: #fff;
  27.         background: #333;
  28.         height: 30px;
  29.         display: flex;
  30.         align-items: center;
  31.         justify-content: space-between;
  32.         position: fixed;
  33.         width: 100vw;
  34.         padding: 0 15px;
  35.       }
  36.       /*輪播圖*/
  37.       body > .slider {
  38.         height: 180px;
  39.       }
  40.       body > .slider > img {
  41.         width: 100%;
  42.       }
  43.       /*導(dǎo)航區(qū)*/
  44.       nav {
  45.         height: 200px;
  46.         margin-bottom: 10px;
  47.         display: flex;
  48.         /*轉(zhuǎn)為多行容器*/
  49.         flex-flow: row wrap;
  50.       }
  51.       nav div {
  52.         width: 25vw;
  53.         display: flex;
  54.         flex-flow: column nowrap;
  55.         align-items: center;
  56.       }
  57.       nav > div > a:first-of-type {
  58.         text-align: center;
  59.       }
  60.       nav > div img {
  61.         width: 50%;
  62.       }
  63.       /* 熱銷商品 */
  64.       .hot-goods {
  65.         display: flex;
  66.         flex-flow: row wrap;
  67.         justify-content: space-around;
  68.         margin: 10vw 0;
  69.       }
  70.       .hot-goods > .goods-img {
  71.         display: flex;
  72.         flex-flow: column nowrap;
  73.         justify-content: center;
  74.         align-items: center;
  75.       }
  76.       .hot-goods .hot {
  77.         color: coral;
  78.       }
  79.       /* 商品列表 */
  80.       .shop {
  81.         display: flex;
  82.         flex-flow: column nowrap;
  83.         margin-top: 10vw;
  84.         font-size: small;
  85.       }
  86.       .shop > .goods-desc {
  87.         display: flex;
  88.         margin-bottom: 10vw;
  89.       }
  90.       .shop > .goods-desc img {
  91.         width: 20vw;
  92.       }
  93.       .shop > .goods-desc > a:first-of-type {
  94.         margin-left: 5vw;
  95.       }
  96.       .shop > .goods-desc > a:last-of-type {
  97.         margin: 0 10vw;
  98.       }
  99.       .shop > .goods-desc .hot {
  100.         color: coral;
  101.       }
  102.       footer {
  103.         display: flex;
  104.         justify-content: space-around;
  105.         height: 10vw;
  106.         background: rgb(231, 231, 231);
  107.         position: fixed;
  108.         bottom: 0;
  109.         width: 100vw;
  110.       }
  111.       footer > a {
  112.         display: flex;
  113.         flex-flow: column nowrap;
  114.         justify-content: center;
  115.         text-align: center;
  116.       }
  117.       footer > a > span:first-of-type {
  118.         color: coral;
  119.       }
  120.       footer > a > span:last-of-type {
  121.         color: #333;
  122.       }
  123.     </style>
  124.   </head>
  125.   <body>
  126.     <!-- 頁(yè)眉 -->
  127.     <header>
  128.       <a href="">LOGO</a>
  129.       <span class="iconfont">&#xe61f;</span>
  130.     </header>
  132.     <!-- 輪播圖 -->
  133.     <div class="slider">
  134.       <img src="static/images/banner.jpg" alt="" />
  135.     </div>
  137.     <!-- 主導(dǎo)航區(qū) -->
  138.     <nav>
  139.       <div>
  140.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  141.         <a href="">優(yōu)惠劵</a>
  142.       </div>
  143.       <div>
  144.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  145.         <a href="">超市精選</a>
  146.       </div>
  147.       <div>
  148.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  149.         <a href="">服裝百貨</a>
  150.       </div>
  151.       <div>
  152.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  153.         <a href="">數(shù)碼精品</a>
  154.       </div>
  155.       <div>
  156.         <a href=""><img src="static/images/link4.webp" alt="" /></a>
  157.         <a href="">優(yōu)惠劵</a>
  158.       </div>
  159.       <div>
  160.         <a href=""><img src="static/images/link1.webp" alt="" /></a>
  161.         <a href="">超市精選</a>
  162.       </div>
  163.       <div>
  164.         <a href=""><img src="static/images/link2.webp" alt="" /></a>
  165.         <a href="">服裝百貨</a>
  166.       </div>
  167.       <div>
  168.         <a href=""><img src="static/images/link3.webp" alt="" /></a>
  169.         <a href="">數(shù)碼精品</a>
  170.       </div>
  171.     </nav>
  173.     <!-- 熱銷商品 -->
  174.     <h2>
  175.       熱銷商品<span class="iconfont hot" style="color: red;">&#xe60b;</span>
  176.     </h2>
  178.     <div class="hot-goods">
  179.       <div class="goods-img">
  180.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  181.         <p>Apple iPhone 11 128g</p>
  182.         <div>
  183.           <span>6299&nbsp;元</span>
  184.           <span class="iconfont hot">&#xe602;</span>
  185.         </div>
  186.       </div>
  188.       <div class="goods-img">
  189.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  190.         <p>華為筆記本電腦</p>
  191.         <div>
  192.           <span>8999&nbsp;元</span>
  193.           <span class="iconfont hot">&#xe602;</span>
  194.         </div>
  195.       </div>
  197.       <div class="goods-img">
  198.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  199.         <p>Apple iPhone 11 128g</p>
  200.         <div>
  201.           <span>6299&nbsp;元</span>
  202.           <span class="iconfont hot">&#xe602;</span>
  203.         </div>
  204.       </div>
  206.       <div class="goods-img">
  207.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  208.         <p>華為筆記本電腦</p>
  209.         <div>
  210.           <span>8999&nbsp;元</span>
  211.           <span class="iconfont hot">&#xe602;</span>
  212.         </div>
  213.       </div>
  215.       <div class="goods-img">
  216.         <a href=""><img src="static/images/goods1.jpg" alt="" /></a>
  217.         <p>Apple iPhone 11 128g</p>
  218.         <div>
  219.           <span>6299&nbsp;元</span>
  220.           <span class="iconfont hot">&#xe602;</span>
  221.         </div>
  222.       </div>
  224.       <div class="goods-img">
  225.         <a href=""><img src="static/images/goods2.jpg" alt="" /></a>
  226.         <p>華為筆記本電腦</p>
  227.         <div>
  228.           <span>8999&nbsp;元</span>
  229.           <span class="iconfont hot">&#xe602;</span>
  230.         </div>
  231.       </div>
  232.     </div>
  233.     <!-- 商品列表 -->
  234.     <h2>
  235.       商品列表<span class="iconfont hot" style="color: red;">&#xe64b;</span>
  236.     </h2>
  238.     <div class="shop">
  239.       <div class="goods-desc">
  240.         <a href=""><img src="static/images/p40.png" alt="" /></a>
  241.         <a href=""
  242.           >領(lǐng)劵200【12期免息+當(dāng)天發(fā)】HUAWEI/華為P40
  243.           5G手機(jī)官方旗艦店官網(wǎng)正品華為mate30pro/直降nova7se/p40pro+
  244.           <span class="iconfont hot" style="vertical-align: middle;"
  245.             >&#xe675;</span
  246.           ></a
  247.         >
  248.       </div>
  250.       <div class="goods-desc">
  251.         <a href=""><img src="static/images/i7.png" alt="" /></a>
  252.         <a href=""
  253.           >華為/HUAWEI&nbsp;MateBook&nbsp;X&nbsp;Pro2020款英特爾十代i7-10510U+16GB+512GB/1TBSSD獨(dú)顯筆記本
  254.           <span class="iconfont hot" style="vertical-align: middle;"
  255.             >&#xe675;</span
  256.           >
  257.         </a>
  258.       </div>
  259.       <div class="goods-desc">
  260.         <a href=""><img src="static/images/p40.png" alt="" /></a>
  261.         <a href=""
  262.           >領(lǐng)劵200【12期免息+當(dāng)天發(fā)】HUAWEI/華為P40
  263.           5G手機(jī)官方旗艦店官網(wǎng)正品華為mate30pro/直降nova7se/p40pro+
  264.           <span class="iconfont hot" style="vertical-align: middle;"
  265.             >&#xe675;</span
  266.           ></a
  267.         >
  268.       </div>
  270.       <div class="goods-desc">
  271.         <a href=""><img src="static/images/i7.png" alt="" /></a>
  272.         <a href=""
  273.           >華為/HUAWEI&nbsp;MateBook&nbsp;X&nbsp;Pro2020款英特爾十代i7-10510U+16GB+512GB/1TBSSD獨(dú)顯筆記本
  274.           <span class="iconfont hot" style="vertical-align: middle;"
  275.             >&#xe675;</span
  276.           >
  277.         </a>
  278.       </div>
  279.       <div class="goods-desc">
  280.         <a href=""><img src="static/images/p40.png" alt="" /></a>
  281.         <a href=""
  282.           >領(lǐng)劵200【12期免息+當(dāng)天發(fā)】HUAWEI/華為P40
  283.           5G手機(jī)官方旗艦店官網(wǎng)正品華為mate30pro/直降nova7se/p40pro+
  284.           <span class="iconfont hot" style="vertical-align: middle;"
  285.             >&#xe675;</span
  286.           ></a
  287.         >
  288.       </div>
  290.       <div class="goods-desc">
  291.         <a href=""><img src="static/images/i7.png" alt="" /></a>
  292.         <a href=""
  293.           >華為/HUAWEI&nbsp;MateBook&nbsp;X&nbsp;Pro2020款英特爾十代i7-10510U+16GB+512GB/1TBSSD獨(dú)顯筆記本
  294.           <span class="iconfont hot" style="vertical-align: middle;"
  295.             >&#xe675;</span
  296.           >
  297.         </a>
  298.       </div>
  299.       <div class="goods-desc">
  300.         <a href=""><img src="static/images/p40.png" alt="" /></a>
  301.         <a href=""
  302.           >領(lǐng)劵200【12期免息+當(dāng)天發(fā)】HUAWEI/華為P40
  303.           5G手機(jī)官方旗艦店官網(wǎng)正品華為mate30pro/直降nova7se/p40pro+
  304.           <span class="iconfont hot" style="vertical-align: middle;"
  305.             >&#xe675;</span
  306.           ></a
  307.         >
  308.       </div>
  310.       <div class="goods-desc">
  311.         <a href=""><img src="static/images/i7.png" alt="" /></a>
  312.         <a href=""
  313.           >華為/HUAWEI&nbsp;MateBook&nbsp;X&nbsp;Pro2020款英特爾十代i7-10510U+16GB+512GB/1TBSSD獨(dú)顯筆記本
  314.           <span class="iconfont hot" style="vertical-align: middle;"
  315.             >&#xe675;</span
  316.           >
  317.         </a>
  318.       </div>
  319.     </div>
  321.     <footer>
  322.       <a href="">
  323.         <span class="iconfont hot">&#xe60c;</span>
  324.         <span>首頁(yè)</span>
  325.       </a>
  326.       <a href="">
  327.         <span class="iconfont hot">&#xe64b;</span>
  328.         <span>分類</span>
  329.       </a>
  330.       <a href="">
  331.         <span class="iconfont hot">&#xe602;</span>
  332.         <span>購(gòu)物車</span>
  333.       </a>
  334.       <a href="">
  335.         <span class="iconfont hot">&#xe65b;</span>
  336.         <span>未登錄</span>
  337.       </a>
  338.     </footer>
  339.   </body>
  340. </html>
  • 預(yù)覽：

五、學(xué)習(xí)總結(jié)

只有通過(guò)多練習(xí)才能知道自己到底會(huì)不會(huì)，自己掌握了那些內(nèi)容，自己是怎么理解的，還有哪些內(nèi)容是自己不會(huì)的，從而幫助自己更快的學(xué)習(xí)。

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

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

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

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

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