任務(wù)7

設(shè)計“學(xué)習(xí)動態(tài)”子頁面任務(wù)本任務(wù)通過設(shè)計“學(xué)習(xí)動態(tài)”子頁面，重點學(xué)習(xí)圖像相關(guān)的CSS樣式，CSS邊框與背景的設(shè)置。同時，進一步學(xué)習(xí)貫徹黨的二十大精神知識。網(wǎng)頁效果如圖所示。任務(wù)7設(shè)計“學(xué)習(xí)動態(tài)”子頁面任務(wù)任務(wù)7設(shè)計“學(xué)習(xí)動態(tài)”子頁面知識目標技能目標素質(zhì)目標（1）掌握圖像相關(guān)的CSS樣式。（2）掌握CSS邊框設(shè)置。（3）掌握CSS背景設(shè)置。（1）能夠使用CSS設(shè)置圖像樣式。（2）能夠靈活運用CSS設(shè)置元素的邊框。（3）能夠靈活運用CSS設(shè)置元素的背景。（1）提升邏輯思維能力及動手能力。（2）培養(yǎng)學(xué)生的創(chuàng)新創(chuàng)造能力。（3）培養(yǎng)自主學(xué)習(xí)的能力。任務(wù)7設(shè)計“學(xué)習(xí)動態(tài)”子頁面圖像相關(guān)的CSS樣式

CSS邊框與背景設(shè)置任務(wù)實現(xiàn)任務(wù)7設(shè)計“學(xué)習(xí)動態(tài)”子頁面1.圖像相關(guān)的CSS樣式1.1圖像大小1.2設(shè)置圖像的對齊方式1.3設(shè)置圖文混排效果任務(wù)7設(shè)計“學(xué)習(xí)動態(tài)”子頁面1.1圖片大小使用CSS樣式控制圖像的大小，可以通過width和height兩個屬性來實現(xiàn)。需要注意的是，當width和height兩個屬性的取值使用百分比數(shù)值時，它是相對于父元素而言的。如果將這兩個屬性設(shè)置相對于body的寬度或高度，就可以實現(xiàn)當瀏覽器窗口改變時，圖像大小也發(fā)生相應(yīng)變化的效果。1.圖像相關(guān)的CSS樣式1.2設(shè)置圖像的對齊方式2.設(shè)置圖像的對齊方式1.圖像的水平對齊方式圖像的水平對齊與文本的水平對齊類似，也有左、中、右的效果。只是圖像的水平對齊方式不能直接在圖像上設(shè)置text-align屬性來實現(xiàn)，而是通過圖像的父元素設(shè)置text-align屬性來實現(xiàn)。2.圖像的垂直對齊方式

圖像的垂直對齊方式是指圖片與文本之間的垂直對齊效果，是通過vertical-align屬性設(shè)置來設(shè)置的。語法格式如下：屬性值的含義如表所示：vertical-align:baseline｜sub｜super｜top｜text-top｜middle｜bottom｜text-bottom｜length｜%;1.2設(shè)置圖像的對齊方式2.設(shè)置圖像的對齊方式vertical-align屬性值及含義值含義baseline默認。元素放置在父元素的基線上sub垂直對齊文本的下標super垂直對齊文本的上標top把元素的頂端與行中最高元素的頂端對齊text-top把元素的頂端與父元素字體的頂端對齊middle把此元素放置在父元素的中部bottom使元素及其后代元素的底部與整行的底部對齊text-bottom把元素的底端與父元素字體的底端對齊length將元素升高或降低指定的高度，可以是負數(shù)%使用"line-height"屬性的百分比值來排列此元素，允許使用負值1.3設(shè)置圖文混排效果3.設(shè)置圖文混排效果在網(wǎng)頁頁面中，文本與圖像經(jīng)常會出現(xiàn)混合排版的效果，這種效果可以通過在圖像上設(shè)置float屬性來實現(xiàn)。語法格式如下：

屬性值的含義如所示：

float:left｜right｜none;值含義left元素向左浮動right元素向右浮動none元素不浮動，是默認值表float屬性值及含義有關(guān)float的深入理解和應(yīng)用將在項目4中詳細講解。圖像相關(guān)的CSS樣式

CSS邊框與背景設(shè)置任務(wù)實現(xiàn)任務(wù)8設(shè)計“在線留言”子頁面2.1CSS邊框2.

CSS邊框與背景設(shè)置

網(wǎng)頁頁面中的元素都可以添加邊框的效果，可以通過CSS邊框?qū)傩詫崿F(xiàn)。每一個元素的邊框都具備三個特征：邊框線粗細、邊框線線型、邊框線顏色，這三個特征決定了邊框所顯示出來的外觀。

在CSS中是通過以下三個屬性來設(shè)定邊框的三個特征：border-style設(shè)置邊框樣式即邊框線線型，例如實線、虛線等；border-width設(shè)置邊框的寬度即邊框線的粗細；border-color設(shè)置邊框的顏色。1.border-style屬性border-style屬性用來設(shè)置元素的所有邊框樣式或者單獨為某個邊框設(shè)置邊框樣式。它是一個復(fù)合屬性，屬性可以設(shè)置一到四個值（用于上邊框、右邊框、下邊框和左邊框），語法格式如下：

border-style:border-top-styleborder-right-styleborder-bottom-styleborder-left-style2.1CSS邊框2.

CSS邊框與背景設(shè)置

網(wǎng)頁頁面中的元素都可以添加邊框的效果，可以通過CSS邊框?qū)傩詫崿F(xiàn)。每一個元素的邊框都具備三個特征：邊框線粗細、邊框線線型、邊框線顏色，這三個特征決定了邊框所顯示出來的外觀。

在CSS中是通過以下三個屬性來設(shè)定邊框的三個特征：border-style設(shè)置邊框樣式即邊框線線型，例如實線、虛線等；border-width設(shè)置邊框的寬度即邊框線的粗細；border-color設(shè)置邊框的顏色。1.border-style屬性border-style屬性用來設(shè)置元素的所有邊框樣式或者單獨為某個邊框設(shè)置邊框樣式。它是一個復(fù)合屬性，屬性可以設(shè)置一到四個值（用于上邊框、右邊框、下邊框和左邊框），語法格式如下：

border-style:border-top-styleborder-right-styleborder-bottom-styleborder-left-style2.1CSS邊框2.

CSS邊框與背景設(shè)置

屬性的可選值如表所示：border-style屬性值及含義值含義none無邊框dotted點虛線邊框dashed短線狀虛線邊框solid實線邊框double雙實線邊框，雙實線邊框的寬度等于border-width的值groove3D凹槽邊框，其效果取決于border-color的值ridge3D脊線邊框，其效果取決于border-color的值inset3D嵌入邊框，其效果取決于border-color的值outset3D凸出邊框，其效果取決于border-color的值2.1CSS邊框2.

CSS邊框與背景設(shè)置

2.border-widthborder-width屬性用來設(shè)置元素所有邊框?qū)挾?，或者單獨設(shè)置某個邊框?qū)挾?。和邊框樣式一樣，屬性可以設(shè)置一到四個值（用于上邊框、右邊框、下邊框和左邊框），語法格式如下：

可以將寬度設(shè)置為特定大?。ㄒ詐x、pt、cm、em計），也可以使用以下三個預(yù)定義值之一：thin、medium或thick。3.border-colorborder-color屬性用來設(shè)置元素所有邊框顏色，或者單獨設(shè)置某個邊框顏色。語法格式如下：顏色的取值與文本顏色的取值相同。

border-width:border-top-widthborder-right-widthborder-bottom-widthborder-left-width

border-color:border-top-colorborder-right-colorborder-bottom-colorborder-left-color;2.1CSS邊框2.

CSS邊框與背景設(shè)置

4.border屬性border屬性是邊框?qū)傩缘暮唽懀且粋€復(fù)合屬性。在使用時指定邊框的樣式、寬度和顏色，其中樣式必不可少，否則不能顯示邊框效果。語法格式如下：

border:border-widthborder-style(必需)border-color;2.1CSS邊框2.

CSS邊框與背景設(shè)置h1{ border-bottom:1pxsolid#f00;}上述例子可以看出p元素四個方向都具有同樣效果的邊框。帶方向的邊框?qū)傩允褂梅椒ㄅcborder相似，在CSS中是通過下面四個屬性來設(shè)設(shè)置：border-top、border-right、border-bottom、border-left，分別對應(yīng)于上、右、上、下、左四個方向的邊框。例如下述代碼表示一號標題設(shè)置了1px、紅顏色、線型是實線的下邊框。2.2CSS背景2.

CSS邊框與背景設(shè)置在網(wǎng)頁設(shè)計中，無論是單一的純色背景，還是加載的背景圖像，都能夠給整個頁面帶來豐富的視覺效果。CSS允許應(yīng)用顏色作為背景，也可以使用圖像作為背景。

1.設(shè)置背景顏色在CSS中，background-color屬性用來設(shè)置元素的背景顏色。一般情況下，元素的背景顏色默認為透明的（transparent）。可以通過background-color屬性來改變元素的背景顏色。background-color屬性給元素設(shè)置一種背景顏色，這種顏色會填充元素的內(nèi)容、內(nèi)邊距和邊框區(qū)域，如果邊框有透明部分，如雙實線邊框，則背景顏色會透過這些透明部分顯示出背景顏色?？梢詾槿魏蜨TML元素設(shè)置背景顏色。語法格式如下：background-color:color|transparent;

其中顏色的取值與文本顏色相同。opacity屬性指定元素的不透明度/透明度。取值范圍為0.0-1.0。值越低，越透明。注意：使用opacity屬性為元素的背景添加透明度時，其所有子元素都繼承相同的透明度。2.2CSS背景2.

CSS邊框與背景設(shè)置

其中顏色的取值與文本顏色相同。opacity屬性指定元素的不透明度/透明度。取值范圍為0.0-1.0。值越低，越透明。

注意：使用opacity屬性為元素的背景添加透明度時，其所有子元素都繼承相同的透明度。這可能會使完全透明的元素內(nèi)的文本難以閱讀。2.2CSS背景2.

CSS邊框與背景設(shè)置background-image:none｜url(url);

2.設(shè)置背景圖像

（1）background-image

屬性在CSS樣式中，可以使用background-image屬性來設(shè)置元素背景圖像。語法格式如下：其中，none表示沒有背景圖像，這是默認值；通過url()表示要設(shè)置的背景圖像的路徑，可以是相對路徑，也可以是絕對路徑。元素的背景是元素的總大小，包括填充和邊界（但不包括邊距）。默認情況下，background-image放置在元素的左上角，并在水平方向和垂直自動重復(fù)平鋪?？梢酝ㄟ^相關(guān)屬性改變初始位置、是否重復(fù)平鋪等效果。

2.2CSS背景2.

CSS邊框與背景設(shè)置從上圖可以看出背景圖像自動沿著水平和豎直兩個方向平鋪，充滿整個div容器，并且覆蓋了div的背景顏色。說明如果網(wǎng)頁中某元素同時具有backgrounde-image屬性和background-color屬性，那么backgrounde-image屬性優(yōu)先于background-color屬性，也就是說背景圖像永遠覆蓋于背景色之上。使用背景圖像時要注意使用不會干擾文本的圖像。

（2）background-repeat屬性默認情況下，當背景圖像的大小小于元素區(qū)域時，背景圖像會自動向水平和豎直兩個方向平鋪。如果不希望圖像平鋪，或者只沿著一個方向平鋪，可以通過background-repeat屬性來控制。background-repeat屬性用來設(shè)置元素的背景圖像是否以及如何重復(fù)鋪排。語法格式如下：background-repeat:repeat｜no-repeat｜repeat-x｜repeat-y;2.2CSS背景2.

CSS邊框與背景設(shè)置屬性值的含義如表7-4所示：表7-4background-repeat屬性值及含義值含義repeat默認值。背景圖在水平方向和垂直自動重復(fù)平鋪no-repeat背景圖在水平方向和垂直方向都不重復(fù)平鋪repeat-x背景圖在水平方向重復(fù)平鋪repeat-y背景圖在垂直方向重復(fù)平鋪2.2CSS背景2.

CSS邊框與背景設(shè)置從上圖可以看出背景圖像只沿著水平方向平鋪，背景圖像覆蓋的區(qū)域就顯示背景圖像，背景圖像沒有覆蓋的區(qū)域按照設(shè)置的背景顏色顯示?？梢姰敱尘皥D像和背景顏色同時存在時，背景圖像優(yōu)先顯示。

（3）background-position屬性background-position屬性用于指定背景圖像的起始位置，背景圖像如果要重復(fù)平鋪，將從設(shè)置的這個位置點開始。語法格式如下：background-position:位置取值;它的屬性值設(shè)置出具體的位置，具體的屬性值如表所示：2.2CSS背景2.

CSS邊框與背景設(shè)置background-position屬性值及含義值含義預(yù)定義的關(guān)鍵字toplefttopcentertoprightcenterleftcentercentercenterrightbottomleftbottomcenterbottomright可以只設(shè)置一個關(guān)鍵詞，此時第二個值自動為“center”長度值（xy）第一個值是水平位置，第二個值是垂直位置百分比(x%y%)第一個值是水平位置，第二個值是垂直位置2.2CSS背景2.

CSS邊框與背景設(shè)置

1）預(yù)定義的關(guān)鍵字

簡單記憶如下：水平方向有l(wèi)eft(左)｜right(右)｜center(中)；垂直方向有top(上)｜bottom(下)｜center(中)。設(shè)置時是水平方向和垂直方向的組合，且水平方向和垂直方向的關(guān)鍵字不分先后順序，搭配使用。水平位置的參考點是網(wǎng)頁頁面的左邊，垂直位置的參考點是網(wǎng)頁頁面的上邊。

2）長度長度參數(shù)可以對背景圖像的位置進行精確的控制，使用確切的數(shù)字表示圖像位置。使用時首先指定橫向位置，接著縱向位置，中間用空格隔開。實際上定位的是圖像左上角相對于元素左上角的定位。單位是像素或任何其他的CSS單位。使用時可以只寫一個值，另一個值自動為居中效果。還可以和關(guān)鍵字混合使用。

2.2CSS背景2.

CSS邊框與背景設(shè)置

3）百分比使用百分比進行背景定位，其實是將背景圖像的百分比指定的位置和元素的百分比位置對齊。也就是說百分比定位改變了背景圖像和元素的對齊基點，不再像使用關(guān)鍵字或長度單位定位時，使用背景圖像和元素的左上角為對齊基點。按背景圖像和元素的指定點對齊，即將圖像本身(x%y%)的點與元素的(x%y%)的點重合，此時左上角是(0%0%)。右下角是(100%100%)。2.2CSS背景2.

CSS邊框與背景設(shè)置

（4）background-attachment屬性background-attachment屬性用來設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動而滾動。語法格式如下：background-attachment:scroll|fixed;屬性值的含義如表所示：background-attachment屬性值及含義值含義scroll默認值。背景圖像會隨著頁面其余部分的滾動而移動fixed當頁面的其余部分滾動時，背景圖像不會移動2.2CSS背景2.

CSS邊框與背景設(shè)置

3.復(fù)合屬性background屬性是背景的復(fù)合