網(wǎng)站設(shè)計(jì)與網(wǎng)頁制作立體化項(xiàng)目教程（第4版） 課件 2-3-4 課件：“英博特智能科技”企業(yè)網(wǎng)站首頁頁面制作-公司優(yōu)勢(shì)制作

任務(wù)3：“英博特智能科技”企業(yè)網(wǎng)站首頁頁面制作第二篇：項(xiàng)目實(shí)戰(zhàn)篇3.4公司優(yōu)勢(shì)制作1-2任務(wù)2：頁面制作-人物介紹內(nèi)容呈現(xiàn)（1）熟練運(yùn)用彈性布局。（2）靈活運(yùn)用CSS偽類。能力要求學(xué)習(xí)導(dǎo)覽任務(wù)概述完成首頁頁面中公司優(yōu)勢(shì)模塊的制作。1-2任務(wù)2：頁面制作-人物介紹內(nèi)容呈現(xiàn)該模塊包含左中右三個(gè)部分，風(fēng)格一致，實(shí)現(xiàn)過程包括搭建模塊結(jié)構(gòu)、三列布局設(shè)計(jì)以及圖文樣式的設(shè)計(jì)。任務(wù)思考1-2任務(wù)2：頁面制作-人物介紹內(nèi)容呈現(xiàn)（1）瀏覽器對(duì)彈性布局的支持情況與兼容問題是怎樣的？

（2）彈性布局在水平方向上的對(duì)齊方式“space-around”和“space-between”有何差別？

（3）如何快速選擇某個(gè)元素的第2個(gè)子元素？

彈性布局1-2任務(wù)2：頁面制作-人物介紹內(nèi)容呈現(xiàn)Flex是FlexibleBox的縮寫，意為“彈性布局”，是一種響應(yīng)式布局，能自動(dòng)伸縮盒模型達(dá)到自適應(yīng)的效果。彈性盒子模型

（1）Flex容器通過display:flex屬性，可將元素聲明塊級(jí)彈性容器；通過dsplay:inline-fex，可將元素聲明為行內(nèi)彈性容器。Flex容器包含6個(gè)屬性，分別為flex-direction、flex-wrap、flex-flow、justify-content、align-items以及align-content。1-4任務(wù)4：圖文混排-人物介紹頁面布局彈性盒子模型

①flex-direction屬性flex-direction指定主軸(maincross)的方向，即元素排列的方向。flex-direction:row|row-reverse|column|column-reverserow:水平方向，從左往右row-reverse:水平方向，從右往左column:垂直方向，從上往下column-reverse:垂直方向，從下往上1-4任務(wù)4：圖文混排-人物介紹頁面布局彈性盒子模型

②flex-wrap屬性flex-wrap屬性，指定彈性項(xiàng)目的換行方式，即彈性項(xiàng)目超過一行時(shí)如何換行。flex-wrap:no-wrap|wrap|wrap-reverseno-wrap:不換行(默認(rèn))wrap:正常換行

wrap-reverse:換行，第一行在下方，從下往上換行1-4任務(wù)4：圖文混排-人物介紹頁面布局彈性盒子模型

③flex-flow屬性flex-flow屬性，為flex-direction和flex-wrap的合并屬性，其中第一個(gè)為flex-direction,第二個(gè)為flex-wrap。flex-fow:<flex-direction><flex-wrap>1-4任務(wù)4：圖文混排-人物介紹頁面布局彈性盒子模型

④justify-content屬性justify-content屬性，指定彈性內(nèi)容在主軸上的排列方式。justify-content:flex-start|flex-center|flex-end|space-between|space-aroundflex-start:從主軸起點(diǎn)(mainstart)到主軸終點(diǎn)(mainend)center:居中

flex-end:從主軸終點(diǎn)(mainend)到主軸起點(diǎn)(mainstart)space-between:均勻分布在行里，第一個(gè)元素邊界與行起始位置邊界對(duì)齊，最后一個(gè)元素邊界與行結(jié)束位置的邊界對(duì)齊

space-around:均勻分布在行里，兩端子元素與行邊界有間距1-4任務(wù)4：圖文混排-人物介紹頁面布局彈性盒子模型

⑤align-items屬性align-items屬性，指定彈性項(xiàng)目在縱軸上的對(duì)齊方向。align-items:flex-start|center|flex-end|base-line|stretchflex-start:項(xiàng)目對(duì)齊縱軸的起點(diǎn)(crossstart)center:居中

flex-end:項(xiàng)目對(duì)齊縱軸的終點(diǎn)(crossend)baseline:基于基線對(duì)齊

stretch:拉伸(默認(rèn))，從起點(diǎn)(crossstart)到終點(diǎn)(croosend)1-4任務(wù)4：圖文混排-人物介紹頁面布局彈性盒子模型

⑥align-content屬性align-content屬性，指定當(dāng)主軸(mainaxis)隨項(xiàng)目換行時(shí)，多條主軸線如何對(duì)齊。align-content:flex-start|center|flex-end|space-between|space-around|stretchflex-start:從縱軸起點(diǎn)(crossstart)到終點(diǎn)(crossend)center:居中

flex-end:從縱軸終點(diǎn)(crossend)到縱軸起點(diǎn)(crossstart)space-between:元素均勻分布在列里，第一個(gè)元素邊界與列起始位置邊界對(duì)齊，最后一個(gè)元素邊界與列結(jié)束位置的邊界對(duì)齊

space-around:元素均勻分布在列里，兩端子元素與列邊界有間距

stretch:拉伸(默認(rèn))，拉伸項(xiàng)目以布滿縱軸長度1-4任務(wù)4：圖文混排-人物介紹頁面布局彈性盒子模型

（2）Flex項(xiàng)目盡管彈性容器已經(jīng)有設(shè)置彈性項(xiàng)目的各種布局行為，但總有個(gè)別彈性項(xiàng)目需要自定義布局方式。Flex項(xiàng)目包含6個(gè)屬性，分別為order、flex-grow、flex-shrink、flex-basis、flex以及align-self屬性。①order屬性，指定彈性項(xiàng)目的排列序號(hào)，數(shù)值越小越靠前。order:<integer>②flex-grow屬性，指定彈性項(xiàng)目在有空余空間的放大比例。默認(rèn)為0：表示即使有剩余空間也不放大。flex-grow:<number>③flex-shrink屬性，指定彈性項(xiàng)目在空間不夠時(shí)的縮小比例。默認(rèn)為1：表示空間不夠時(shí)項(xiàng)目將縮小。flex-shrink:<number>④flex-basis屬性，指定彈性項(xiàng)目的基本長度。flex-basis:<length>⑤flex屬性，為flex-grow、flex-shrink和flex-basis的合并屬性。flex:flex-grow,flex-shrink,flex-basis默認(rèn):0,1,autoauto:1,1,autonone:0,0,auto1-4任務(wù)4：圖文混排-人物介紹頁面布局彈性盒子模型

align-self屬性align-self屬性，指定彈性項(xiàng)目在縱軸上的對(duì)齊方式，將覆蓋掉彈性容器的align-items屬性。align-self:autoflex-start|center|flex-end|base-line|stretchauto:自動(dòng)

flex-start:項(xiàng)目對(duì)齊縱軸的起點(diǎn)(crossstart)center:居中

flex-end:項(xiàng)目對(duì)齊縱軸的終點(diǎn)(crossend)baseline:基于基線對(duì)齊

stretch:拉伸(默認(rèn))，從起點(diǎn)(crossstart)到終點(diǎn)(croosend)1-4任務(wù)4：圖文混排-人物介紹頁面布局任務(wù)實(shí)施“公司優(yōu)勢(shì)”模塊CSS樣式設(shè)計(jì)（三列布局）02.“公司優(yōu)勢(shì)”模塊CSS樣式設(shè)計(jì)（圖像和文本樣式）03.01.“公司優(yōu)勢(shì)”模塊HTML結(jié)構(gòu)設(shè)計(jì)1-2任