版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
網(wǎng)頁(yè)設(shè)計(jì)與制作HTML5+CSS3任務(wù)12
首頁(yè)其他板塊的設(shè)計(jì)與制作任務(wù)本任務(wù)需要完成“學(xué)習(xí)黨的二十大精神專題網(wǎng)”首頁(yè)的其他板塊,包括學(xué)習(xí)資料、學(xué)習(xí)光影、學(xué)習(xí)研討、學(xué)習(xí)動(dòng)態(tài)、頁(yè)腳幾個(gè)板塊。其中學(xué)習(xí)資料板塊使用的是浮動(dòng)布局，學(xué)習(xí)光影、學(xué)習(xí)研討、學(xué)習(xí)動(dòng)態(tài)板塊使用彈性布局，頁(yè)腳使用最基本標(biāo)準(zhǔn)流布局。這些都是網(wǎng)站開發(fā)的基本技能。
學(xué)習(xí)光影板塊使用了變形、過(guò)渡、動(dòng)畫這三種特效使頁(yè)面更加炫酷，鼠標(biāo)移到圖片上，圖片會(huì)緩慢變大,鼠標(biāo)離開圖片時(shí)，圖片會(huì)縮回原來(lái)的大小。
通過(guò)本任務(wù)的學(xué)習(xí)，將利用前面所學(xué)到的各種網(wǎng)頁(yè)制作技術(shù),完成整個(gè)首頁(yè)的制作。網(wǎng)頁(yè)效果如圖12-1所示：任務(wù)12首頁(yè)其他板塊的設(shè)計(jì)與制作任務(wù)任務(wù)12首頁(yè)其他板塊的設(shè)計(jì)與制作圖12-1首頁(yè)其他板塊效果任務(wù)12首頁(yè)其他板塊的設(shè)計(jì)與制作知識(shí)目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)（1）掌握f(shuō)lex彈性布局的各種屬性及使用方法。（2）熟悉網(wǎng)格模型。（3）掌握CSS變形、過(guò)渡、動(dòng)畫的用法。（1）能夠使用flex技術(shù)布局頁(yè)面。（2）能夠根據(jù)網(wǎng)頁(yè)的實(shí)際需要靈活運(yùn)用各種布局技術(shù)。（3）能利用CSS實(shí)現(xiàn)頁(yè)面中的常用動(dòng)態(tài)效果。（1）掌握并遵循Web開發(fā)標(biāo)準(zhǔn)，培養(yǎng)嚴(yán)謹(jǐn)?shù)墓ぷ髯黠L(fēng)。（2）培養(yǎng)良好的自主學(xué)習(xí)和思考習(xí)慣。（3）加強(qiáng)實(shí)踐教育，提升實(shí)踐能力。彈性布局利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果任務(wù)實(shí)現(xiàn)任務(wù)12首頁(yè)其他板塊的設(shè)計(jì)與制作1.彈性布局1.1彈性布局的基本概念1.2彈性布局的使用1.3彈性布局的屬性任務(wù)12首頁(yè)其他板塊的設(shè)計(jì)與制作1.1彈性布局的基本概念
網(wǎng)頁(yè)常見(jiàn)的布局方案是基于盒模型，依賴display屬性+position屬性+float屬性。它對(duì)于那些特殊布局不方便，比如垂直居中就不容易實(shí)現(xiàn)。
彈性布局，又稱為flex布局，是CSS的一種新的布局模式，是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>
1.彈性布局1.1彈性布局的基本概念
1.彈性布局引入彈性盒模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。彈性布局有以下兩個(gè)重要的概念：
1.容器和項(xiàng)目
容器：需要添加彈性布局的父元素。
項(xiàng)目：彈性布局容器中的每個(gè)子元素，稱為項(xiàng)目。
2.主軸和交叉軸
主軸：在彈性布局中，通過(guò)屬性規(guī)定水平或垂直方向?yàn)橹鬏S。交叉軸：與主軸垂直的另外一方向，稱之為交叉軸。1.2彈性布局的使用
1.彈性布局
position:static|relative|absolute|fixed|sticky;彈性布局使用比較簡(jiǎn)單，但是依然有一些注意事項(xiàng)。在使用時(shí)需要注意以下兩點(diǎn)：
（1）給容器添加display：flex/inline-flex屬性，就可使容器內(nèi)中的項(xiàng)目采用彈性布局顯示，不遵循常規(guī)標(biāo)準(zhǔn)文檔流的顯示方式。而容器本身在文檔流中的定位方式依然遵循常規(guī)標(biāo)準(zhǔn)文檔流的顯示方式。
（2）將容器設(shè)為彈性布局后，項(xiàng)目的float、clear和vertical-align屬性將失效，但position屬性依然生效。
1.2彈性布局的屬性
1.彈性布局<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>flex彈性布局</title><style>.flex-container{display:flex;background-color:#1e90ff;
}【案例12-1】example12-1.html演示了彈性布局的用法，代碼如下：1.2彈性布局的屬性
1.彈性布局flex-container>div{background-color:#f1f1f1;margin:10px;padding:20px;font-size:30px;}</style></head><body><divclass="flex-container"><div>1</div>
<div>2</div><div>3</div></div></body></html>1.2彈性布局的屬性
1.彈性布局flex-container>div{background-color:#f1f1f1;margin:10px;padding:20px;font-size:30px;}</style></head><body><divclass="flex-container"><div>1</div>
<div>2</div><div>3</div></div></body></html>1.2彈性布局的屬性
1.彈性布局代碼中類名為“flex-container”的div元素的display屬性設(shè)置為flex，成為彈性容器，其里面的直接子元素自動(dòng)成為彈性項(xiàng)目?！景咐?-19】在瀏覽器中顯示效果如圖12-2所示：圖12-2彈性布局的應(yīng)用1.3彈性布局的屬性
1.彈性布局彈性布局有12大屬性，按照作用范圍的不同，可以分為容器屬性和項(xiàng)目屬性兩類。1.容器屬性（1）flex-direction屬性flex-direction屬性定義容器要在哪個(gè)方向上堆疊項(xiàng)目，它用來(lái)定義主軸，可以取4個(gè)值，具體含義如表12-1所示：1.3彈性布局的屬性
1.彈性布局表12-1flex-direction屬性定義主軸屬性值描述row默認(rèn)值。設(shè)置橫向從左到右排列（左對(duì)齊）。水平方向?yàn)橹鬏S，垂直方向?yàn)榻徊孑S，彈性項(xiàng)目從左到右水平方向順序排列。主軸的起始線是彈性容器的左邊，終止線是彈性容器的右邊。row-reverse反轉(zhuǎn)橫向排列（右對(duì)齊），從后往前排列，最后一項(xiàng)排在最前面。水平方向?yàn)橹鬏S，垂直方向?yàn)榻徊孑S，彈性項(xiàng)目從右到左水平方向逆序排列。主軸的起始線是彈性容器的右邊，終止線是彈性容器的左邊。column縱向排列。垂直方向?yàn)橹鬏S，水平方向?yàn)榻徊孑S，彈性項(xiàng)目從上到下垂直方向順序排列。主軸的起始線是彈性容器的上邊，終止線是彈性容器的下邊。column-reverse
反轉(zhuǎn)縱向排列，從后往前排，最后一項(xiàng)排在最上面。垂直方向?yàn)橹鬏S，水平方向?yàn)榻徊孑S，彈性項(xiàng)目從下到上垂直方向逆序排列。主軸的起始線是彈性容器的下邊，終止線是彈性容器的上邊。1.3彈性布局的屬性
1.彈性布局【案例12-2】example12-2.html演示了flex-direction屬性的使用，代碼如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>flex-direction屬性</title><style>.flex-container{display:flex;flex-direction:column;background-color:#1e90ff;}1.3彈性布局的屬性
1.彈性布局.flex-container>div{background-color:#f1f1f1;margin:10px;padding:20px;font-size:30px;}</style></head><body><divclass="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>1.3彈性布局的屬性
1.彈性布局【案例12-2】在瀏覽器中顯示效果如圖12-3所示：圖12-3flex-direction設(shè)置彈性項(xiàng)目的順序1.3彈性布局的屬性
1.彈性布局（2）flex-wrap屬性flex-wrap屬性用于指定彈性容器的項(xiàng)目換行方式。常用屬性值及含義如表12-1所示：表12-1flex-wrap屬性值及其含義屬性值描述nowrap默認(rèn)值，彈性容器為單行。該情況下彈性項(xiàng)目可能會(huì)溢出容器wrap彈性容器為多行。該情況下彈性項(xiàng)目溢出的部分會(huì)被放置到新行，項(xiàng)目、內(nèi)部會(huì)發(fā)生斷行。wrap-reverse反轉(zhuǎn)wrap排列。1.3彈性布局的屬性
1.彈性布局【案例12-3】example12-3.html展示了flex-wrap屬性的使用。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>flex-wrap屬性的使用</title><styletype="text/css"media="screen">.flex-container{display:flex;flex-wrap:wrap;background-color:#1e90ff;}1.3彈性布局的屬性
1.彈性布局.flex-container>div{background-color:#f1f1f1;width:100px;margin:10px;text-align:center;line-height:75px;font-size:30px;}</style></head>1.3彈性布局的屬性
1.彈性布局<body><divclass="flex-container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
<div>11</div><div>12</div></div></body></html>1.3彈性布局的屬性
1.彈性布局【案例12-3】瀏覽器中顯示效果如圖12-4所示：圖12-4flex-wrap屬性的應(yīng)用1.3彈性布局的屬性
1.彈性布局（3）flex-flow屬性flex-flow是復(fù)合屬性，是flex-direction和flex-wrap的縮寫形式。（4）justify-content屬性justify-content屬性定義了彈性項(xiàng)目在主軸方向的對(duì)齊方式，屬性值及含義如表12-2所示：表12-2justify-content屬性值及含義屬性值描述flex-start彈性項(xiàng)目緊靠主軸起點(diǎn)。flex-end彈性項(xiàng)目緊靠主軸終點(diǎn)center彈性項(xiàng)目向主軸中點(diǎn)對(duì)齊space-between第一個(gè)彈性項(xiàng)目靠起點(diǎn)，最后一個(gè)彈性項(xiàng)目靠終點(diǎn)，余下彈性項(xiàng)目平均分配間隔空間，彈性項(xiàng)目會(huì)平均地分布在主軸里space-around每個(gè)彈性項(xiàng)目?jī)蓚?cè)的間隔相等。所以，彈性項(xiàng)目之間的間隔比彈性項(xiàng)目與彈性盒子的邊距的間隔大一倍space-evenly元素間距離平均分配1.3彈性布局的屬性
1.彈性布局【案例12-4】example12-4.html展示了justify-content屬性的使用。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>justify-content屬性的使用</title><styletype="text/css">.flex-container{display:flex;justify-content:center;background-color:#1e90ff;}1.3彈性布局的屬性
1.彈性布局.flex-container>div{background-color:#f1f1f1;width:100px;margin:10px;text-align:center;line-height:75px;font-size:30px;}</style></head>1.3彈性布局的屬性
1.彈性布局<body><divclass="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>1.3彈性布局的屬性
1.彈性布局【案例12-4】在瀏覽器中顯示效果如圖12-5所示：圖12-5justify-content屬性的應(yīng)用1.3彈性布局的屬性
1.彈性布局（5）align-items屬性align-items屬性用于設(shè)置彈性項(xiàng)目在交叉軸方向上的排列，屬性值及含義如表12-3所示：表12-3align-items屬性值及其含義屬性值描述flex-start彈性項(xiàng)目緊靠交叉軸的起點(diǎn)對(duì)齊，即彈性項(xiàng)目的側(cè)軸（縱軸）起始位置的邊界緊靠該行的側(cè)軸起始邊界。flex-end彈性項(xiàng)目緊靠交叉軸的終點(diǎn)對(duì)齊，即彈性項(xiàng)目的側(cè)軸（縱軸）起始位置的邊界緊靠該行的側(cè)軸結(jié)束邊界。center彈性項(xiàng)目向交叉軸的中點(diǎn)對(duì)齊，即彈性項(xiàng)目在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。stretch默認(rèn)值，如果彈性項(xiàng)目未設(shè)置高度或設(shè)為auto，彈性項(xiàng)目將被拉伸占滿整個(gè)容器的高度，但同時(shí)會(huì)遵照“min/max-width/height”屬性的限制。1.3彈性布局的屬性
1.彈性布局【案例12-5】example12-5.html演示了align-items屬性的使用。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>align-items屬性的使用</title><styletype="text/css">.flex-container{display:flex;height:200px;align-items:center;background-color:#1e90ff;}1.3彈性布局的屬性
1.彈性布局.flex-container>div{background-color:#f1f1f1;width:100px;margin:10px;text-align:center;line-height:75px;font-size:30px;}</style></head>1.3彈性布局的屬性
1.彈性布局<body><divclass="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>1.3彈性布局的屬性
1.彈性布局【案例12-5】在瀏覽器中顯示效果如圖12-6所示：圖12-6align-items屬性的應(yīng)用1.3彈性布局的屬性
1.彈性布局（6）align-content屬性align-content屬性定義了多根主軸線的對(duì)齊方式。如果項(xiàng)目只有一根主軸線，該屬性不起作用。屬性值及含義如表12-4所示：表12-4align-content屬性的屬性值屬性值描述stretch默認(rèn)值，將項(xiàng)目拉伸以占據(jù)剩余空間。flex-start項(xiàng)目在容器的起點(diǎn)排列。flex-end項(xiàng)目在容器的終點(diǎn)排列。center項(xiàng)目在容器內(nèi)居中排布。space-between多行項(xiàng)目均勻分布在容器中，其中第一行分布在容器的起點(diǎn)，最后一行分布在容器的重點(diǎn)。space-around多行項(xiàng)目均勻分布在容器中，并且每行的間距（包括離容器邊緣的間距）都相等1.3彈性布局的屬性
1.彈性布局【案例12-6】example12-6.html演示了align-content屬性的使用，代碼如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>align-content屬性的用法</title><styletype="text/css"media="screen">.flex-container{display:flex;height:300px;flex-wrap:wrap;align-content:space-between;background-color:#1e90ff;}1.3彈性布局的屬性
1.彈性布局.flex-container>div{background-color:#f1f1f1;width:100px;margin:10px;text-align:center;line-height:75px;font-size:30px;}</style></head>1.3彈性布局的屬性
1.彈性布局<body><divclass="flex-container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div></body></html>1.3彈性布局的屬性
1.彈性布局【案例12-6】在瀏覽器中顯示效果如圖12-7所示：圖12-7align-content屬性的應(yīng)用1.3彈性布局的屬性
1.彈性布局2.項(xiàng)目屬性（1）order屬性
order屬性用于控制彈性項(xiàng)目的排列順序，默認(rèn)為0，數(shù)值越小，排列越靠前，可以負(fù)數(shù)或整數(shù)。【案例12-7】example12-7.html演示了order屬性的使用，代碼如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>order屬性的使用</title><styletype="text/css"media="screen">.flex-container{display:flex;align-items:stretch;background-color:#f1f1f1;}1.3彈性布局的屬性
1.彈性布局.flex-container>div{background-color:#1e90ff;color:white;width:100px;margin:10px;text-align:center;line-height:75px;font-size:30px;}</style></head>1.3彈性布局的屬性
1.彈性布局<body><divclass="flex-container"><divstyle="order:3">1</div><divstyle="order:2">2</div><divstyle="order:4">3</div><divstyle="order:1">4</div></div></body></html>1.3彈性布局的屬性
1.彈性布局【案例12-7】在瀏覽器中顯示效果如圖12-8所示：圖12-8order屬性設(shè)置彈性項(xiàng)目的順序1.3彈性布局的屬性
1.彈性布局（2）flew-grow屬性flew-grow屬性用來(lái)設(shè)置項(xiàng)目相對(duì)于其他項(xiàng)目的增長(zhǎng)量。flew-grow屬性默認(rèn)為0，如果存在剩余空間不夠，也不增長(zhǎng)。【案例12-8】example12-8.html演示flew-grow屬性的使用，代碼如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>flew-grow屬性的用法</title><styletype="text/css"media="screen">.flex-container{display:flex;align-items:stretch;background-color:#f1f1f1;}1.3彈性布局的屬性
1.彈性布局.flex-container>div{background-color:#1e90ff;color:white;margin:10px;text-align:center;line-height:75px;font-size:30px;}</style></head>1.3彈性布局的屬性
1.彈性布局<body><divclass="flex-container"><divstyle="flex-grow:1">1</div><divstyle="flex-grow:1">2</div><divstyle="flex-grow:8">3</div></div></body></html>1.3彈性布局的屬性
1.彈性布局【案例12-8】在瀏覽器中顯示效果如圖12-9所示：圖12-9flex-grow屬性的應(yīng)用1.3彈性布局的屬性
1.彈性布局（3）flew-shrink屬性flew-shrink屬性與flex-grow屬性相反，用來(lái)設(shè)置項(xiàng)目相對(duì)于其他項(xiàng)目的收縮量，默認(rèn)值為1。（4）flex-basis屬性flex-basis屬性屬性規(guī)定彈性項(xiàng)目占據(jù)的主軸空間。如果主軸為水平，設(shè)置這個(gè)屬性相當(dāng)于設(shè)置項(xiàng)目的寬度，原width屬性將會(huì)失效?！景咐?2-9】example12-9.html演示了flex-basis屬性的使用，代碼如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>flex-basis屬性的用法</title>1.3彈性布局的屬性
1.彈性布局<styletype="text/css"media="screen">.flex-container{display:flex;align-items:stretch;background-color:#f1f1f1;}.flex-container>div{background-color:#1e90ff;color:white;width:100px;margin:10px;text-align:center;line-height:75px;font-size:30px;}</style>1.3彈性布局的屬性
1.彈性布局</head><body><divclass="flex-container"><div>1</div><div>2</div> <divstyle="flex-basis:200px">3</div>
<div>4</div></div></body></html>1.3彈性布局的屬性
1.彈性布局【案例12-9】在瀏覽器中顯示效果如圖12-10所示：圖12-10flex-basis屬性的應(yīng)用1.3彈性布局的屬性
1.彈性布局
（5）flex屬性flex屬性是flex-grow、flex-shrink和flex-basis三個(gè)屬性的簡(jiǎn)寫。默認(rèn)值為0，1，auto。后兩個(gè)屬性是可選。
（6）align-self屬性align-self屬性用控制單個(gè)彈性項(xiàng)目在交叉軸上排列方式，而align-items屬性用于控制彈性容器中所有彈性項(xiàng)目的排列。如果設(shè)置了項(xiàng)目的align-self屬性，將會(huì)覆蓋容器的align-items屬性?！景咐?2-10】example12-10.html演示了align-self屬性的使用，代碼如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>align-self屬性的使用</title><styletype="text/css">1.3彈性布局的屬性
1.彈性布局.flex-container{display:flex;height:200px;background-color:#f1f1f1;}.flex-container>div{background-color:#1e90ff;color:white;width:100px;margin:10px;text-align:center;line-height:75px;font-size:30px;}</style></head>1.3彈性布局的屬性
1.彈性布局<body><divclass="flex-container"><div>1</div><div>2</div><divstyle="align-self:center">3</div><div>4</div></div></body></html>1.3彈性布局的屬性
1.彈性布局【案例12-10】在瀏覽器中顯示效果如圖12-11所示：圖12-11align-self屬性的應(yīng)用彈性布局利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果任務(wù)實(shí)現(xiàn)任務(wù)12首頁(yè)其他板塊的設(shè)計(jì)與制作2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果任務(wù)12首頁(yè)其他板塊的設(shè)計(jì)與制作2.1transition過(guò)渡2.2
transform變形2.3animation動(dòng)畫2.1transition過(guò)渡在CSS中，可以使用transition屬性（過(guò)渡屬性）給元素添加從一種樣式轉(zhuǎn)變到另一個(gè)樣式的過(guò)渡動(dòng)畫效果。也就是通過(guò)transition屬性，可以設(shè)置屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡另一個(gè)屬性值的過(guò)渡動(dòng)畫。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫效果改變屬性值。要實(shí)現(xiàn)這種過(guò)渡動(dòng)畫效果，必須規(guī)定以下兩項(xiàng)內(nèi)容：（1）指定要添加效果的CSS屬性；（2）指定效果的持續(xù)時(shí)間。2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果2.1transition過(guò)渡【案例12-11】example12-11.html演示了一個(gè)過(guò)渡動(dòng)畫的實(shí)現(xiàn)，代碼如下：2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>flex彈性布局</title><style>div{width:100px;height:100px;background:#fa0;transition:width2s;/*寬度屬性上有2秒的過(guò)渡動(dòng)畫，從100px過(guò)渡到300px*/}2.1transition過(guò)渡2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果div:hover{width:300px;}</style></head><body><body> <div>鼠標(biāo)移動(dòng)到div元素上，查看過(guò)渡效果。</div></body></body></html>2.1transition過(guò)渡2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果【案例12-11】在瀏覽器中顯示效果如圖12-12和圖12-13所示：圖12-12過(guò)渡動(dòng)畫開始前的狀態(tài)圖12-13過(guò)渡動(dòng)畫完成之后的狀態(tài)2.1transition過(guò)渡2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果實(shí)現(xiàn)過(guò)渡效果的屬性及含義如下表12-5所示：表12-5CSS過(guò)渡屬性transition屬性值描述transition-property規(guī)定應(yīng)用過(guò)渡的CSS屬性的名稱transition-timing-function定義過(guò)渡效果花費(fèi)的時(shí)間，默認(rèn)是0transition-timing-function規(guī)定過(guò)渡效果的時(shí)間曲線，默認(rèn)是"ease"transition-delay規(guī)定過(guò)渡效果何時(shí)開始，默認(rèn)是0transition簡(jiǎn)寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬性2.1transition過(guò)渡2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果（1）transition-property屬性transition-property屬性用來(lái)定義哪些屬性需要進(jìn)行平滑過(guò)渡動(dòng)畫。語(yǔ)法格式如下：其中，none表示沒(méi)有屬性會(huì)獲得過(guò)渡效果；all：默認(rèn)值，所有屬性都將獲得過(guò)渡效果；property表示定義應(yīng)用過(guò)渡效果的CSS屬性名稱，多個(gè)屬性名之間以逗號(hào)分隔，例如：transition-property:background-color,width;（2）transition-duration屬性transition-duration屬性用來(lái)定義過(guò)渡效果所花費(fèi)的時(shí)間，默認(rèn)值為0，常用單位是秒(s)或者毫秒(ms)。語(yǔ)法格式如下：
屬性值數(shù)值的數(shù)值為0時(shí)，沒(méi)有過(guò)渡動(dòng)畫。transition-property:none｜all｜property;transition-duration:數(shù)值s/ms;2.1transition過(guò)渡2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果（3）transition-timing-function屬性transition-timing-function屬性規(guī)定過(guò)渡效果的速度曲線，可以根據(jù)時(shí)間的推進(jìn)去改變屬性值的變換速率，有6個(gè)變換速率值，屬性值及含義如表4-14所示。屬性值描述linear指定以相同速度（勻速）開始至結(jié)束的過(guò)渡效果ease默認(rèn)值，指定以慢速開始，然后變快，最后慢慢結(jié)束的過(guò)渡效果ease-in指定以慢速開始，然后逐漸加快的過(guò)渡效果ease-out指定以慢速結(jié)束的過(guò)渡效果ease-in-out指定以慢速開始和結(jié)束的過(guò)渡效果cubic-bezier(n,n,n,n)定義用于加速或者減速的貝塞爾曲線的形狀，它們的值是0~1表4-14transition-timing-function屬性值2.1transition過(guò)渡2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果（4）transition-delay屬性transition-delay屬性用來(lái)定義過(guò)渡動(dòng)畫的延遲觸發(fā)的時(shí)間，默認(rèn)值為0，屬性值數(shù)值的常用單位是秒（s）或者毫秒（ms）。語(yǔ)法格式如下：
transition-delay的屬性值可以為正整數(shù)、負(fù)整數(shù)和0。當(dāng)設(shè)置為負(fù)數(shù)時(shí)，過(guò)渡動(dòng)作會(huì)從該時(shí)間點(diǎn)開始，之前的動(dòng)作被截?cái)?；設(shè)置為正數(shù)時(shí)，過(guò)渡動(dòng)作會(huì)被延遲觸發(fā)。（5）transition屬性transition屬性是一個(gè)復(fù)合屬性，用于在一個(gè)屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delayg共4個(gè)過(guò)渡屬性。語(yǔ)法格式如下：transition-delay:數(shù)值s/ms;transition:transition-propertytransition-durationtransition-timing-functiontransition-delay;2.1transition過(guò)渡2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果在使用transition屬性設(shè)置過(guò)渡效果時(shí)，它的各個(gè)參數(shù)必須按照順序進(jìn)行定義，不能顛倒。無(wú)論是單個(gè)屬性還是簡(jiǎn)寫屬性，使用時(shí)都可以實(shí)現(xiàn)多個(gè)過(guò)渡效果。例如：
等價(jià)于
也等價(jià)于下面的代碼段：
使用transition屬性在設(shè)置過(guò)渡動(dòng)畫效果時(shí)，可以添加多個(gè)樣式的變換效果，添加的屬性由逗號(hào)分隔。例如以下代碼：
設(shè)置了寬度和高度兩個(gè)屬性上的過(guò)渡動(dòng)畫效果。transition:width2s;transition:width2sease0s;transition-property:width;193transition-duration:2s;transition-timing-function:ease;transition-delay:0s;transition:width2s,height2s;2.2transform變形
在CSS中，可以利用transform屬性來(lái)實(shí)現(xiàn)元素的旋轉(zhuǎn)、縮放、傾斜、移動(dòng)等變形處理。變形處理由變形函數(shù)來(lái)完成，變形函數(shù)用來(lái)操控元素發(fā)生旋轉(zhuǎn)、縮放、傾斜、移動(dòng)等變化。transform屬性的語(yǔ)法格式如下：其屬性值的含義見(jiàn)表12-6所示。2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果transform:none│transform-function;表12-6transform屬性值及其含義屬性值描述none默認(rèn)值，表示不進(jìn)行變形transform-function用于設(shè)置變形函數(shù)，可以是一個(gè)或多個(gè)變形函數(shù)列表2.2transform變形
2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果
1.2D變形2D變形是指某個(gè)元素圍繞其x軸和y軸進(jìn)行變形。常用2D變形函數(shù)如表12-7所示。表12-7常用2D變形函數(shù)變形類型2D變形函數(shù)描述旋轉(zhuǎn)元素rotate(angel)參數(shù)angel是度數(shù)值，代表旋轉(zhuǎn)角度縮放元素scale(x,y)改變?cè)氐母叨群蛯挾取,y的值代表縮放比例，取值包括正數(shù)、負(fù)數(shù)和小數(shù)scaleX(x)改變?cè)氐膶挾萻caleY(y)改變?cè)氐母叨葍A斜元素skew(x-angel,y-angel)參數(shù)angel是度數(shù)值，代表傾斜角度skewX(angel)沿著x軸傾斜元素skewY(angel)沿著y軸傾斜元素移動(dòng)元素translate(x,y)基于x和y坐標(biāo)重新定位元素translatex(x)沿著x軸移動(dòng)元素，即左右方向translateY(y)沿著y軸移動(dòng)元素，即上下方向2.2transform變形
2.3D變形3D變形是指某個(gè)元素圍繞其x軸、y軸、z軸進(jìn)行變形。常用3D變形函數(shù)見(jiàn)表12-8所示。2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果變形類型3D變形函數(shù)描述3D旋轉(zhuǎn)Rotate3d(x,y,z,angel)前三個(gè)參數(shù)用于判斷需要旋轉(zhuǎn)的坐標(biāo)軸，旋轉(zhuǎn)軸的值設(shè)置為1，否則為0，參數(shù)angel代表旋轉(zhuǎn)角度RotateX(angel)沿著x軸3D旋轉(zhuǎn)RotateY(angel)沿著y軸3D旋轉(zhuǎn)RotateZ(angel)沿著z軸3D旋轉(zhuǎn)3D縮放元素Scale3d(x,y,z)參數(shù)x,y,z是縮放比例，取值包括正數(shù)、負(fù)數(shù)和小數(shù)scaleX(x)沿著x軸縮放scaleY(y)沿著y軸縮放scaleZ(z)沿著z軸縮放表12-8常用3D變形函數(shù)2.2transform變形2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果變形類型3D變形函數(shù)描述傾斜元素skew(x-angel,y-angel)參數(shù)angel是度數(shù)值，代表傾斜角度skewX(angel)沿著x軸傾斜元素skewY(angel)沿著y軸傾斜元素移動(dòng)元素Translate3d(x,y,z)(x,y,z)基于x、y和z軸坐標(biāo)重新定位元素translatex(x)沿著x軸移動(dòng)元素，即左右方向translateY(y)沿著y軸移動(dòng)元素，即上下方向translateY(z)沿著z軸移動(dòng)元素3D透視圖Perspective(n)參數(shù)n是透視深度的數(shù)值2.2transform變形2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果3.元素變形基準(zhǔn)點(diǎn)
變形默認(rèn)都是以元素的中心點(diǎn)為基準(zhǔn)點(diǎn)進(jìn)行的，如果需要改變這個(gè)基準(zhǔn)點(diǎn)，可以使用transform-origin屬性，語(yǔ)法格式如下：
xyz分別是x軸、y軸和z軸的偏移量，偏移量的取值可以是具體數(shù)據(jù)、百分比，也可以是方向位置名詞。偏移量的屬性值含義見(jiàn)表12-9所示。transform-origin:xyz;表12-9transform-origin屬性值（偏移量）偏移量取值描述X軸偏移量指定以方向位置名詞有：left、center、right；具體數(shù)值，如：20px百分比：如10%y軸偏移量方向位置名詞有：top、center、bottom；具體數(shù)值，如：20px百分比：如10%z軸偏移量具體數(shù)值，如：20px2.3animation動(dòng)畫2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果。CSS中主要是運(yùn)用@keyframes關(guān)鍵幀和animation相關(guān)屬性來(lái)實(shí)現(xiàn)。@keyframes用來(lái)定義動(dòng)畫，animation將定義好的動(dòng)畫綁定到特定元素，并定義動(dòng)畫時(shí)長(zhǎng)、重復(fù)次數(shù)等相關(guān)屬性。
1.@keyframes定義動(dòng)畫關(guān)鍵幀狀態(tài)
@keyframes屬性用來(lái)定義動(dòng)畫關(guān)鍵幀的狀態(tài)，其語(yǔ)法格式如下：
其中，animationname定義動(dòng)畫的名稱，其值是一個(gè)自定義標(biāo)識(shí)符，例如:colorchange。keyframes-selector是關(guān)鍵幀選擇器，值是通常是一個(gè)百分比，指定當(dāng)前關(guān)鍵幀在整個(gè)動(dòng)畫過(guò)程中的位置，0%表示動(dòng)畫的開始，100%表示動(dòng)畫的結(jié)束。還可以使用from或者to表示，from表示動(dòng)畫的開始，相當(dāng)于0%，to表示動(dòng)畫的結(jié)束相當(dāng)于100%。CSS-styles表示執(zhí)行到當(dāng)前關(guān)鍵幀時(shí)對(duì)應(yīng)的動(dòng)畫狀態(tài)，其值是一個(gè)樣式表。每個(gè)關(guān)鍵幀表示動(dòng)畫過(guò)程中的一個(gè)狀態(tài)，動(dòng)畫有多個(gè)關(guān)鍵幀。@keyframesanimationname{keyframes-selector{CSS-styles;}}2.3animation動(dòng)畫2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果
2.動(dòng)畫的調(diào)用當(dāng)在@keyframes中創(chuàng)建動(dòng)畫時(shí)，需把它捆絆到某個(gè)選擇器，否則不會(huì)產(chǎn)生動(dòng)畫效果。CSS通過(guò)animation屬性調(diào)用動(dòng)畫，animation相關(guān)的屬性如表12-10所示。偏移量取值描述animation-name規(guī)定@keyframes動(dòng)畫的名稱animation-duration規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒，默認(rèn)是0animation-timing-function規(guī)定動(dòng)畫的速度曲線，默認(rèn)是"ease"animation-fill-mode規(guī)定當(dāng)動(dòng)畫不播放時(shí)（當(dāng)動(dòng)畫完成時(shí)，或當(dāng)動(dòng)畫有一個(gè)延遲未開始播放時(shí)），要應(yīng)用到元素的樣式animation-delay規(guī)定動(dòng)畫何時(shí)開始，默認(rèn)是0animation-iteration-count規(guī)定動(dòng)畫被播放的次數(shù)，默認(rèn)是1animation-direction"normal"規(guī)定動(dòng)畫是否在下一周期逆向播放，默認(rèn)是animation-play-state規(guī)定動(dòng)畫是否正在運(yùn)行或暫停，默認(rèn)是"running"animation所有動(dòng)畫屬性的簡(jiǎn)寫屬性表12-10animation屬性2.3animation動(dòng)畫2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果
（1）animation-name屬性animation-name屬性用于定義要應(yīng)用的動(dòng)畫名稱，為@keyframes動(dòng)畫規(guī)定名稱。語(yǔ)法格式如下:animation-name:keyframename|none;其中，Keyframename用于規(guī)定需要綁定到選擇器的@keyframes定義的動(dòng)畫名稱，如果值為none，則表示不應(yīng)用任何動(dòng)畫，通常用于覆蓋或者取消動(dòng)畫。
（2）animation-duration屬性anmnon-duraton屬性用于定義整個(gè)動(dòng)畫效果完成所需要的時(shí)間，語(yǔ)法格式加下:animation-duration:數(shù)值;數(shù)值是以秒(s)或者毫秒(ms)為單位的時(shí)長(zhǎng)，默認(rèn)值為0，表示沒(méi)有任何動(dòng)畫效果。當(dāng)值為負(fù)數(shù)時(shí)，則被視為0。2.3animation動(dòng)畫2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果（3）animation-timing-function屬性animation-timing-function用來(lái)規(guī)定動(dòng)畫的速度曲線，定義使用哪種方式來(lái)執(zhí)行動(dòng)畫效果。語(yǔ)法格式如下:animation-timing-function:屬性值;屬性值及含義如表12-11所示。屬性值速度曲線描述linear動(dòng)畫從頭到尾的速度是相同的ease默認(rèn)值，動(dòng)畫以速度開始，然后加快，在結(jié)束前變慢ease-in動(dòng)畫以低速度開始ease-out動(dòng)畫以低速度結(jié)束ease-in-out動(dòng)畫以低速度開始和結(jié)束表4-20animation-timing-function屬性值及其含義2.3animation動(dòng)畫2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果
（4）animation-fill-mode屬性animation-fill-mode屬性用來(lái)設(shè)置動(dòng)畫播放時(shí)間之外的效果，即動(dòng)畫開始或動(dòng)畫結(jié)束時(shí)的狀態(tài)。語(yǔ)法格式如下：animation-fill-mode:none|backwards|forwards|both;屬性值及含義如表12-12所示。屬性值描述none默認(rèn)開始保持原來(lái)的樣式，結(jié)束保持原來(lái)的樣式backwards開始前處于第一幀的樣式，結(jié)束默認(rèn)保持原來(lái)的樣式forwards開始前默認(rèn)保持原來(lái)的樣式，結(jié)束保持最后一幀的樣式both開始保持第一幀，結(jié)束保持最后一幀的樣式表4-21animation-fill-mode屬性值及其含義2.3animation動(dòng)畫2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果
（4）animation-fill-mode屬性animation-fill-mode屬性用來(lái)設(shè)置動(dòng)畫播放時(shí)間之外的效果，即動(dòng)畫開始或動(dòng)畫結(jié)束時(shí)的狀態(tài)。語(yǔ)法格式如下：animation-fill-mode:none|backwards|forwards|both;屬性值及含義如表12-13所示。屬性值描述none默認(rèn)開始保持原來(lái)的樣式，結(jié)束保持原來(lái)的樣式backwards開始前處于第一幀的樣式，結(jié)束默認(rèn)保持原來(lái)的樣式forwards開始前默認(rèn)保持原來(lái)的樣式，結(jié)束保持最后一幀的樣式both開始保持第一幀，結(jié)束保持最后一幀的樣式表4-21animation-fill-mode屬性值及其含義2.3animation動(dòng)畫2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果（5）animation-delay屬性animation-delay屬性用于定義動(dòng)畫什么時(shí)候開始。其基本語(yǔ)法格式如下:取值說(shuō)明：數(shù)值是動(dòng)畫開始前等待的時(shí)長(zhǎng)，其單位是秒(s)或者毫秒(ms)，默認(rèn)屬性值為0。（6）animation-iteration-count屬性animation-iteration-count屬性用于定義動(dòng)畫的播放次數(shù)。其基本語(yǔ)法格式如下:取值說(shuō)明：數(shù)值是播放動(dòng)畫的次數(shù)，初始值為1；如果值是infinite，則動(dòng)畫循環(huán)播放。animation-delay:數(shù)值;animation-iteration-count:數(shù)值|infinite;2.3animation動(dòng)畫2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果（7）animation-direction屬性animation-direction屬性定義動(dòng)畫播放完成后是否逆向交替循環(huán)。其基本語(yǔ)法格式如下:取值說(shuō)明:normal：默認(rèn)值，表示動(dòng)畫每次都會(huì)正常顯示。alternate：動(dòng)畫播放完成后會(huì)逆向交替循環(huán)，即動(dòng)畫會(huì)在奇數(shù)次數(shù)正常播放,而在偶數(shù)次數(shù)逆向播放。（8）animation-play-state屬性
animation-play-state屬性規(guī)定動(dòng)畫是否正在運(yùn)行或暫停，其語(yǔ)法格式如下：屬性值paused設(shè)置動(dòng)畫已暫停。running是默認(rèn)值，規(guī)定動(dòng)畫正在播放。animation-direction:normal|alternate;animation-play-state:running|paused;2.3animation動(dòng)畫2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果（9）animation屬性
animation屬性是一個(gè)復(fù)合屬性。語(yǔ)法格式如下：
其中，使用animation屬性時(shí)必須指定animation-name和animation-duration屬性，如果持續(xù)的時(shí)間為0，則不會(huì)播放動(dòng)畫。其他屬性如果沒(méi)有設(shè)置，可以省略。除了animation-play-state屬性，所有的動(dòng)畫屬性都可以在使用animation簡(jiǎn)寫屬性。animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction;2.3animation動(dòng)畫2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果【案例12-12】example12-12.html演示了animation動(dòng)畫的實(shí)現(xiàn)，代碼如下：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>animation動(dòng)畫</title><style>div{width:100px;height:100px;background:#f00;position:relative;animation-name:myfirst;animation-duration:5s;animation-timing-function:linear;2.3animation動(dòng)畫2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果animation-delay:2s;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:running;}@keyframesmyfirst{0%{background:red;left:0px;top:0px;
}
25%{background:yellow;left:200px;top:0px;}2.3animation動(dòng)畫2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果50%{background:blue;left:200px;top:200px;}75%{background:green;left:0px;top:200px;}
100%{background:red;</style>
2.3animation動(dòng)畫2.利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果</head>left:0px;top:0px;}}<body>
<div></div></body></html>以上案例的動(dòng)畫在瀏覽器中的效果為：一個(gè)寬和高都是100px的紅色正方形先往移動(dòng)，再往下移動(dòng)，再往左移動(dòng)，再往上移動(dòng)，移動(dòng)的過(guò)程中顏色由紅色漸變成黃色，再漸變成藍(lán)色，再漸變成綠色，再漸變成紅色，移動(dòng)和顏色變化不停地往返播放。彈性布局利用CSS實(shí)現(xiàn)動(dòng)態(tài)效果任務(wù)實(shí)現(xiàn)任務(wù)12首頁(yè)其他板塊的設(shè)計(jì)與制作3.任務(wù)實(shí)現(xiàn)任務(wù)12首頁(yè)其他板塊的設(shè)計(jì)與制作任務(wù)12
首頁(yè)其他板塊的設(shè)計(jì)與制作創(chuàng)建項(xiàng)目構(gòu)建HTML結(jié)構(gòu)構(gòu)建CSS樣式3.1創(chuàng)建項(xiàng)目3.任務(wù)實(shí)現(xiàn)
創(chuàng)建一個(gè)項(xiàng)目文件夾demo7，啟動(dòng)SublimeText，打開項(xiàng)目文件夾，在項(xiàng)目文件夾中建立index.html文件和css.css文件。3.2構(gòu)建HTML結(jié)構(gòu)3.任務(wù)實(shí)現(xiàn)
（1）在SublimeText中打開index.html，創(chuàng)建類名為content和w1200的div元素，把學(xué)習(xí)資料、學(xué)習(xí)光影、學(xué)習(xí)研討、學(xué)習(xí)動(dòng)態(tài)四個(gè)板塊放在其中。代碼如下：<!--內(nèi)容--><divclass="contentw1200">...</div>（2）將學(xué)習(xí)資料、學(xué)習(xí)光影、學(xué)習(xí)研討、學(xué)習(xí)動(dòng)態(tài)四個(gè)板塊內(nèi)容放在上面的div元素中。四個(gè)板塊的代碼如下：
3.2構(gòu)建HTML結(jié)構(gòu)3.任務(wù)實(shí)現(xiàn)
<!--學(xué)習(xí)資料--><divclass="xxzl"><divclass="title"><span>學(xué)習(xí)資料</span><ahref="xxzl.html">更多>></a></div><ul><li><span>2023-02-07</span><ahref="#">學(xué)習(xí)貫徹黨的二十大精神，總書記這樣指導(dǎo)部署</a></li><li><span>2023-01-04</span><ahref="#">習(xí)近平在學(xué)習(xí)貫徹黨的二十大精神研討班開班式上發(fā)表重要講話強(qiáng)調(diào)正確理解和大力推進(jìn)中國(guó)式現(xiàn)代化</a></li><li><span>2022-12-15</span><ahref="#">教育部舉行全國(guó)高校學(xué)習(xí)宣傳黨的二十大精神動(dòng)員部署會(huì)暨師生巡講團(tuán)成立儀式</a></li><li><span>2022-12-06</span><ahref="#">近平同黨外人士座談并共迎新春時(shí)強(qiáng)調(diào)以更加奮發(fā)有為的精神狀態(tài)履職盡責(zé)在凝心聚力服務(wù)大局上發(fā)揮更大作用</a></li>3.2構(gòu)建HTML結(jié)構(gòu)3.任務(wù)實(shí)現(xiàn)
<li><span>2022-11-25</span><ahref="#">習(xí)近平在視察軍委聯(lián)合作戰(zhàn)指揮中心時(shí)強(qiáng)調(diào)貫徹落實(shí)黨的二十大精神全面加強(qiáng)練兵備戰(zhàn)</a></li><li><span>2022-11-17</span><ahref="#">習(xí)近平在第五屆中國(guó)國(guó)際進(jìn)口博覽會(huì)開幕式上發(fā)表致辭</a></li><li><span>2022-11-15</span><ahref="#">胸懷天下者朋友遍天下——各國(guó)政黨政要熱烈祝賀習(xí)近平當(dāng)選中共中央總書記和中共二十大成功舉行</a></li><li><span>2022-11-10</span><ahref="#">中共中央關(guān)于認(rèn)真學(xué)習(xí)宣傳貫徹黨的二十大精神的決定</a></li><li><span>2022-11-09</span><ahref="#">習(xí)近平：新發(fā)展階段貫徹新發(fā)展理念必然要求構(gòu)建新發(fā)展格局</a></li></ul></div>3.2構(gòu)建HTML結(jié)構(gòu)3.任務(wù)實(shí)現(xiàn)
<!--學(xué)習(xí)光影--><divclass="xygy"><divclass="title"><span>學(xué)習(xí)光影</span><ahref="xxzl.html">更多>></a></div><ulclass="light"><li><divclass="pic_box"><imgclass="change_img"src="images/img_5.png"></div><divclass="pic_txt">小馬快跑|沉浸式“道中華”</div></li>3.2構(gòu)建HTML結(jié)構(gòu)3.任務(wù)實(shí)現(xiàn)
<li><divclass="pic_box"><imgclass="change_img"src="images/img_6.png"></div><divclass="pic_txt">三件大事的“歷史性勝利”</div></li><li><divclass="pic_box"><imgclass="change_img"src="images/img_7.png"></div><divclass="pic_txt">二十大時(shí)光《我眼中的今日中國(guó)》馬克·力文：唱響我的中國(guó)故事</div></li>3.2構(gòu)建HTML結(jié)構(gòu)3.任務(wù)實(shí)現(xiàn)
<li><divclass="pic_box"><imgclass="change_img"src="images/img_8.png"></div><divclass="pic_txt">56個(gè)民族同唱一首歌·《領(lǐng)航》主題微視頻</div></li></ul></div>3.2構(gòu)建HTML結(jié)構(gòu)3.任務(wù)實(shí)現(xiàn)
<!--學(xué)習(xí)研討和學(xué)習(xí)動(dòng)態(tài)--><divclass="study"><divclass="xxyt"><divclass="title"><span>學(xué)習(xí)研討</span><ahref="xxzl.html">更多>></a></div><ul><li><span>2023-3-15</span><ahref="#">我院舉辦學(xué)習(xí)宣傳貫徹黨的二十大精神專題宣講</a></li>
<li><span>2023-3-15</span><ahref="#">在“三學(xué)三進(jìn)”中展現(xiàn)新?lián)?dāng)，在“真學(xué)真做”中譜寫新作為</a></li><li><span>2023-3-15</span><ahref="#">關(guān)于學(xué)習(xí)宣傳貫徹黨的二十大精神工作情況報(bào)告</a></li><li><span>2023-3-15</span><ahref="#">學(xué)習(xí)貫徹黨的二十大精神,深入推進(jìn)科學(xué)立法,3.2構(gòu)建HTML結(jié)構(gòu)3.任務(wù)實(shí)現(xiàn)
加快完善中國(guó)特色...</a></li><li><span>2023-3-15</span><ahref="#">黨委理論學(xué)習(xí)中心組召開2022年第18次集體學(xué)習(xí)（擴(kuò)大）會(huì)議</a></li><li><span>2023-3-15</span><ahref="#">體悟思想偉力汲取奮進(jìn)力量——我院開展統(tǒng)戰(zhàn)成員學(xué)習(xí)貫徹黨...</a></li><li><span>2023-3-15</span><ahref="#">促進(jìn)人與自然和諧共生（認(rèn)真學(xué)習(xí)宣傳貫徹黨的二十大精神）</a></li><li><span>2023-3-15</span><ahref="#">我院深入開展學(xué)習(xí)黨的二十大精神主題黨日活動(dòng)</a></li><li><span>2022-11-12</span><ahref="#">習(xí)近平：新發(fā)展階段貫徹建新發(fā)展格局</a></li></ul></div>3.2構(gòu)建HTML結(jié)構(gòu)3.任務(wù)實(shí)現(xiàn)
<divclass="xxdt"><divclass="title"><span>學(xué)習(xí)動(dòng)態(tài)</span><ahref="xxzl.html">更多>></a></div><ul><li><span>2023-3-15</span><ahref="#">信息工程學(xué)院黨總支開展黨的二十大精神宣講暨入黨申請(qǐng)人集體...</
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年企業(yè)財(cái)務(wù)管理制度建立指南
- 2026年化工分析（電化學(xué)分析方法）試題及答案
- 2025年大學(xué)音樂(lè)學(xué)（音樂(lè)美學(xué)）試題及答案
- 2025年大學(xué)臨床醫(yī)學(xué)（臨床診療技巧）試題及答案
- 2026年SEO優(yōu)化（關(guān)鍵詞排名技巧）試題及答案
- 2025年高職機(jī)床操作（機(jī)床操作實(shí)操）試題及答案
- 2025年高職（數(shù)字媒體技術(shù)）動(dòng)畫設(shè)計(jì)試題及答案
- 2025年大學(xué)第三學(xué)年（市場(chǎng)營(yíng)銷策劃）方案設(shè)計(jì)階段測(cè)試題及答案
- 2025年大學(xué)大三（數(shù)控機(jī)床故障診斷）常見(jiàn)故障排除階段測(cè)試題及答案
- 2025年中職數(shù)控技術(shù)應(yīng)用（數(shù)控應(yīng)用技術(shù)）試題及答案
- 路燈勞務(wù)施工方案(3篇)
- 2026屆高考復(fù)習(xí)之鑒賞詩(shī)歌的語(yǔ)言 教學(xué)課件
- 七年級(jí)上冊(cè)文言文虛詞詳解匯編
- 2025年軍事理論知識(shí)考核試題及答案
- 直招軍官筆試題目及答案
- 2026屆云南省昆明市五華區(qū)數(shù)學(xué)高二第一學(xué)期期末考試試題含解析
- 部編版六年級(jí)語(yǔ)文期末復(fù)習(xí)易錯(cuò)題專題練習(xí)
- 2025年深圳非高危安全管理員和企業(yè)負(fù)責(zé)人習(xí)題(有答案版)(1)1
- 飛行汽車課件
- 春節(jié)花草養(yǎng)護(hù)知識(shí)培訓(xùn)
- 消防安全隱患排查清單
評(píng)論
0/150
提交評(píng)論