任務(wù)6制作學(xué)院新聞塊

任

務(wù)

描

述任務(wù)6制作學(xué)院新聞塊網(wǎng)頁是由若干版塊構(gòu)成的，新聞塊是網(wǎng)頁中大量出現(xiàn)的版塊。本任務(wù)制作學(xué)院網(wǎng)站中的學(xué)院新聞塊，使用HTML標(biāo)題標(biāo)記、無序列表標(biāo)記和圖像標(biāo)記等構(gòu)建新聞塊的內(nèi)容，使用CSS定義新聞塊的樣式。通過本任務(wù)的實現(xiàn)，掌握新聞塊的實現(xiàn)方法，能輕松制作網(wǎng)頁中其他類似的版塊。任務(wù)效果制作學(xué)院新聞塊，瀏覽效果如下所示。知識點元素的浮動01

塊元素間的外邊距02

制作學(xué)院新聞塊03知

識

準(zhǔn)

備任務(wù)6制作學(xué)院新聞塊6.2.1元素的浮動默認(rèn)情況下，網(wǎng)頁中的塊元素會以標(biāo)準(zhǔn)流的方式豎直排列，即塊元素從上到下一一羅列，這時就需要設(shè)置元素的浮動屬性，使塊元素水平排列。元素的浮動是指設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)流的控制，移動到指定位置。在CSS中，通過float屬性設(shè)置左浮動或右浮動，格式如下。浮動屬性6.2.1元素的浮動選擇器{float:left|right|none;}example01.html浮動屬性6.2.1元素的浮動浮動屬性6.2.1元素的浮動浮動元素不再占用原文檔流的位置，那么它會影響頁面中其他元素的排版嗎？浮動屬性6.2.1元素的浮動段落文本與塊環(huán)繞的效果不設(shè)置浮動時的效果頁面元素設(shè)置了浮動，也會影響到后面元素的排版?！窘Y(jié)論】清除浮動6.2.1元素的浮動如果不希望浮動的元素影響到后面元素的排版時，又該如何處理呢？其實，想要解決這個問題也很簡單，只需要對后面的元素設(shè)置清除浮動即可!清除浮動6.2.1元素的浮動在CSS中，使用clear屬性清除浮動，格式如下。選擇器{clear:left|right|both;}添加如下樣式代碼。p{clear:both;}/*清除浮動的影響*/

瀏覽網(wǎng)頁，效果如圖所示。清除浮動6.2.1元素的浮動在項目chapter06中再新建一個網(wǎng)頁文件，在網(wǎng)頁中定義一個大盒子，大盒子包含兩個小盒子，文件名為example03.html，代碼如下。

子元素浮動對父元素的影響

使用overflow屬性清除浮動影響6.2.2塊元素間的外邊距網(wǎng)頁中的塊元素水平或豎直排列時，元素之間往往都有一定的間隔，其間隔的距離是由元素的外邊距決定的。塊元素間的垂直外邊距和水平外邊距計算方式是不同的，下面詳細(xì)說明。塊元素間的垂直外邊距當(dāng)上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則它們之間的垂直外邊距不是兩者之和，而是兩者中的較大者。6.2.2塊元素間的外邊距塊元素間的垂直外邊距example04.html6.2.2塊元素間的外邊距塊元素間的垂直外邊距該例中定義了第一個塊的下外邊距為10px，定義了第二個塊的上外邊距為30px，此時兩個塊的垂直間距是30px，即margin-bottom和margin-top中的較大者。提示：6.2.2塊元素間的外邊距塊元素間的水平外邊距當(dāng)兩個相鄰的塊元素水平排列時，如果左邊的元素有右外邊距margin-right，右邊的元素有左外邊距margin-left，則它們之間的水平外邊距是兩者之和。6.2.2塊元素間的外邊距塊元素間的水平外邊距example05.html6.2.2塊元素間的外邊距塊元素間的水平外邊距該例中定義了第一個塊的右外邊距為10px，定義了第二個塊的左外邊距為30px，此時兩個塊的水平外邊距是40px，即margin-right和margin-left之和。提示：6.2.2塊元素間的外邊距學(xué)院網(wǎng)站中的一行example06.html6.2.2塊元素間的外邊距任

務(wù)

實

現(xiàn)任務(wù)6制作學(xué)院新聞塊6.3.1搭建學(xué)院新聞塊頁面結(jié)構(gòu)在項目chapter06中再新建一個網(wǎng)頁文件，制作學(xué)院新聞塊，文件名為news.html，在文件中首先添加新聞塊內(nèi)容，即結(jié)構(gòu)，然后定義塊及塊中元素的樣式。學(xué)院新聞塊6.3.1定義學(xué)院新聞塊頁面結(jié)構(gòu)6.3.1定義學(xué)院新聞塊頁面結(jié)構(gòu)瀏覽網(wǎng)頁，效果如下圖所示。學(xué)院新聞塊6.3.2定義學(xué)院新聞塊CSS樣式6.3.2定義學(xué)院新聞塊CSS樣式瀏覽網(wǎng)頁，效果如下圖所示。任

務(wù)

小

結(jié)任務(wù)6制作學(xué)院新聞塊任務(wù)小結(jié)本任務(wù)圍繞