Web前端開發(fā)案例教程6制作學院新聞塊

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

元素的定位02

塊元素間的外邊距03任務3制作學院新聞塊任務66.2.1元素的浮動默認情況下，網(wǎng)頁中的塊元素會以標準流的方式豎直排列，即塊元素從上到下一一羅列，這時就需要設置元素的浮動屬性，使塊元素水平排列。元素的浮動是指設置了浮動屬性的元素會脫離標準流的控制，移動到指定位置。在CSS中，通過float屬性設置左浮動或右浮動，格式如下。浮動屬性6.2.1元素的浮動選擇器{float:left|right|none;}example01.html浮動屬性6.2.1元素的浮動浮動屬性6.2.1元素的浮動浮動元素不再占用原文檔流的位置，那么它會影響頁面中其他元素的排版嗎？浮動屬性6.2.1元素的浮動段落文本與塊環(huán)繞的效果不設置浮動時的效果頁面元素設置了浮動，也會影響到后面元素的排版。【結(jié)論】清除浮動6.2.1元素的浮動如果不希望浮動的元素影響到后面元素的排版時，又該如何處理呢？其實，想要解決這個問題也很簡單，只需要對后面的元素設置清除浮動即可!清除浮動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元素的定位浮動布局雖然靈活，但無法對元素的位置進行精確的控制。在CSS中，通過定位屬性可以實現(xiàn)對網(wǎng)頁中元素的精確定位。元素的定位屬性6.2.2元素的定位position屬性用于定義元素的定位方式。格式如下。選擇器{position:static|relative|absolute|fixed;}①static：靜態(tài)定位，默認定位方式。②relative：相對定位，相對于其原標準流的位置進行定位。③absolute：絕對定位，相對于其上一個已經(jīng)定位的父元素進行定位。④fixed：固定定位，相對于瀏覽器窗口進行定位。元素的定位屬性6.2.2元素的定位position屬性僅用于定義元素以哪種方式定位，并不能確定元素的具體位置。在CSS中，通過left、right、top、bottom這4個坐標屬性來精確定位元素的位置。①left：定義元素相對于其父元素左邊緣的距離。②right：定義元素相對于其父元素右邊緣的距離。③top：定義元素相對于其父元素上邊緣的距離。④bottom：定義元素相對于其父元素下邊緣的距離。定位類型6.2.2元素的定位元素的定位方式包括以下四種：靜態(tài)定位相對定位絕對定位固定定位靜態(tài)定位6.2.2元素的定位靜態(tài)定位（static）是元素的默認定位方式，各個元素按照標準流（包括浮動方式）進行定位。在靜態(tài)定位狀態(tài)下，無法通過

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

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