任務(wù)6制作學(xué)院新聞塊Web前端開發(fā)案例教程HTML5+CSS3微課版網(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ù)的實(shí)現(xiàn)，掌握新聞塊的實(shí)現(xiàn)方法，能輕松制作網(wǎng)頁中其他類似的版塊。任務(wù)3制作學(xué)院新聞塊任務(wù)6任務(wù)效果制作學(xué)院新聞塊，瀏覽效果如下所示。知識(shí)點(diǎn)元素的浮動(dòng)01

元素的定位02

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

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

子元素浮動(dòng)對(duì)父元素的影響

使用overflow屬性清除浮動(dòng)影響6.2.2元素的定位浮動(dòng)布局雖然靈活，但無法對(duì)元素的位置進(jìn)行精確的控制。在CSS中，通過定位屬性可以實(shí)現(xiàn)對(duì)網(wǎng)頁中元素的精確定位。元素的定位屬性6.2.2元素的定位position屬性用于定義元素的定位方式。格式如下。選擇器{position:static|relative|absolute|fixed;}①static：靜態(tài)定位，默認(rèn)定位方式。②relative：相對(duì)定位，相對(duì)于其原標(biāo)準(zhǔn)流的位置進(jìn)行定位。③absolute：絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位。④fixed：固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的定位屬性6.2.2元素的定位position屬性僅用于定義元素以哪種方式定位，并不能確定元素的具體位置。在CSS中，通過left、right、top、bottom這4個(gè)坐標(biāo)屬性來精確定位元素的位置。①left：定義元素相對(duì)于其父元素左邊緣的距離。②right：定義元素相對(duì)于其父元素右邊緣的距離。③top：定義元素相對(duì)于其父元素上邊緣的距離。④bottom：定義元素相對(duì)于其父元素下邊緣的距離。定位類型6.2.2元素的定位元素的定位方式包括以下四種：靜態(tài)定位相對(duì)定位絕對(duì)定位固定定位靜態(tài)定位6.2.2元素的定位靜態(tài)定位（static）是元素的默認(rèn)定位方式，各個(gè)元素按照標(biāo)準(zhǔn)流（包括浮動(dòng)方式）進(jìn)行定位。在靜態(tài)定位狀態(tài)下，無法通過

left、right、top、bottom這4個(gè)屬性來改變?cè)氐奈恢?。靜態(tài)定位6.2.2元素的定位example04.html未設(shè)置定位靜態(tài)定位6.2.2元素的定位盒子未定位時(shí)，默認(rèn)的定位方式是static。靜態(tài)定位的元素不受top、bottom、left和right屬性的影響，始終根據(jù)頁面的正常流進(jìn)行定位。提示：相對(duì)定位6.2.2元素的定位采用相對(duì)定位（relative）的元素會(huì)相對(duì)于自身原本的位置，通過偏移指定的距離到達(dá)新的位置。其中，水平方向的偏移量由left或right屬性指定；豎直方向的偏移量由top和bottom屬性指定。相對(duì)定位6.2.2元素的定位example05.html設(shè)置相對(duì)定位相對(duì)定位6.2.2元素的定位第二個(gè)子元素采用相對(duì)定位，可以看出該元素相對(duì)于其自身原來的位置，向下和向右分別偏移了30px和50px，它在標(biāo)準(zhǔn)流中原來的位置仍然保留。提示：絕對(duì)定位6.2.2元素的定位采用絕對(duì)定位（absolute）的元素是依據(jù)其最近的已經(jīng)定位（相對(duì)或絕對(duì)定位）的父元素進(jìn)行定位的，若所有父元素都沒有定位，則依據(jù)body元素（瀏覽器窗口）進(jìn)行定位。絕對(duì)定位6.2.2元素的定位example06.html設(shè)置絕對(duì)定位絕對(duì)定位6.2.2元素的定位對(duì)父元素設(shè)置相對(duì)定位，但不對(duì)其設(shè)置偏移量，同時(shí)，對(duì)子元素two設(shè)置絕對(duì)定位，并通過right和bottom屬性設(shè)置其精確位置。這種方法在實(shí)際網(wǎng)頁制作中經(jīng)常使用。若去掉對(duì)box盒子的position:relative屬性的設(shè)置，那么子元素two將依據(jù)瀏覽器窗口進(jìn)行定位。提示：固定定位6.2.2元素的定位固定定位（fixed）是絕對(duì)定位的一種特殊形式，它總是以瀏覽器窗口作為參照物來定位網(wǎng)頁元素。當(dāng)對(duì)元素設(shè)置固定定位后，它將脫離標(biāo)準(zhǔn)流的控制，始終依據(jù)瀏覽器窗口來定位元素，總是顯示在瀏覽器窗口中的固定位置。固定定位6.2.2元素的定位下面的代碼可將二維碼圖片固定定位在瀏覽器窗口中的右側(cè)，位置不變。<imgstyle="position:fixed;right:0;top:200px;z-index:999;width:100px;"src="images/ewm.png"/>index屬性6.2.2元素的定位當(dāng)對(duì)多個(gè)元素設(shè)置定位屬性時(shí)，定位元素有可能發(fā)生重疊。要想調(diào)整定位元素的層疊順序，可以對(duì)定位元素應(yīng)用z-index屬性，其取值可為正整數(shù)、負(fù)整數(shù)和0。z-index的默認(rèn)屬性值為0，取值越大，定位元素在層疊元素中越居上。注意：z-index屬性僅對(duì)定位元素有效。6.2.3塊元素間的外邊距網(wǎng)頁中的塊元素水平或豎直排列時(shí)，元素之間往往都有一定的間隔，其間隔的距離是由元素的外邊距決定的。塊元素間的垂直外邊距和水平外邊距計(jì)算方式是不同的，下面詳細(xì)說明。塊元素間的垂直外邊距當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則它們之間的垂直外邊距不是兩者之和，而是兩者中的較大者。6.2.3塊元素間的外邊距塊元素間的垂直外邊距example07.html6.2.3塊元素間的外邊距塊元素間的垂直外邊距該例中定義了第一個(gè)塊的下外邊距為10px，定義了第二個(gè)塊的上外邊距為30px，此時(shí)兩個(gè)塊的垂直間距是30px，即margin-bottom和margin-top中的較大者。提示：6.2.3塊元素間的外邊距塊元素間的水平外邊距當(dāng)兩個(gè)相鄰的塊元素水平排列時(shí)，如果左邊的元素有右外邊距margin-right，右邊的元素有左外邊距margin-left，則它們之間的水平外邊距是兩者之和。6.2.3塊元素間的外邊距塊元素間的水平外邊距example08.html6.2.3塊元素間的外邊距塊元素間的水平外邊距該例中定義了第一個(gè)塊的右外邊距為10px，定義了第二個(gè)塊的左外邊距為30px，此時(shí)兩個(gè)塊的水平外邊距是40px，即margin-right和margin-left之和。提示：6.2.3塊元素間的外邊距學(xué)院網(wǎng)站中的一行example09.html6.2.3塊元素間的外邊距簡單學(xué)院新聞塊6.2.3塊元素間的外邊距簡單學(xué)院新聞塊6.2.3塊元素間的外邊距任務(wù)

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