項目五 盒子模型的使用

05盒子模型的使用281任務(wù)1制作注冊網(wǎng)頁任務(wù)2制作登錄網(wǎng)頁282制作注冊網(wǎng)頁任務(wù)1283●1.了解盒子模型的概念。●2.熟練運用盒子模型相關(guān)屬性對網(wǎng)頁進行布局。284本任務(wù)主要通過設(shè)置盒子的內(nèi)外邊距、邊框等屬性，布局繽購樂食電子商務(wù)網(wǎng)站注冊網(wǎng)頁表單模塊，并對盒子進行定位設(shè)置，完成繽購樂食電子商務(wù)網(wǎng)站注冊網(wǎng)頁。該注冊網(wǎng)頁包括login-header、login-banner、login-footer三個盒子。圖所示為繽購樂食電子商務(wù)網(wǎng)站注冊網(wǎng)頁。285286繽購樂食電子商務(wù)網(wǎng)站注冊網(wǎng)頁287步驟一：在body標(biāo)簽中新建網(wǎng)頁頂部的大盒子div，命名為login-header，利用img標(biāo)簽在盒子中加入電商網(wǎng)站logo圖片。代碼如圖所示。288運行上圖中的代碼，效果如圖所示。加入logo圖片效果289步驟二：在body標(biāo)簽的下部新建一個底部盒子并命名為login-footer，盒子包含2行內(nèi)容，上面一行命名為login-ftop，下面一行命名為login-fbottom，代碼如圖所示。加入html內(nèi)容290加入html內(nèi)容291使用CSS代碼為底部盒子中的元素設(shè)置字體顏色和字符間距，如圖所示。設(shè)置文字顏色和文字間距292步驟三：在body標(biāo)簽中，在login-header的下方、login-footer的上方新建一個盒子并命名為login-banner，盒子包含三個子盒子，第一個子盒子命名為login-main，login-main盒子下又包含兩個子盒子，分別命名為login-mleft、login-mright。首先在login-mleft盒子中使用img標(biāo)簽引入背景大圖，然后在login-mright盒子中添加form表單，在form表單中添加多個不同的input表單控件。代碼如圖所示。293加入login-banner盒子中的內(nèi)容294加入login-banner盒子中的內(nèi)容295步驟四：使用CSS代碼設(shè)置login-banner的寬度與瀏覽器同寬，高度為470像素；設(shè)置login-main的寬度為1000像素，居于login-banner的水平中間位置；盛放表單的盒子login-mright的寬度設(shè)置為360像素，高度設(shè)置為430像素。表單中每個input控件左側(cè)的圖標(biāo)都是通過使用background屬性設(shè)置的背景圖片。代碼如圖所示。296設(shè)置中間部分樣式297設(shè)置中間部分樣式298設(shè)置中間部分樣式299設(shè)置中間部分樣式300一、盒子模型什么是CSS的盒子模型呢？為什么稱為盒子？在網(wǎng)頁設(shè)計中常見的屬性名有內(nèi)容（content）、填充（padding）、邊框（border）、邊界（margin），CSS盒子模型具備以上這些屬性，通常又稱填充為內(nèi)邊距、稱邊界為外邊距。盒子模型平面圖如圖所示。301盒子模型平面圖302盒子模型層次3D示意圖303二、盒子模型相關(guān)屬性1.邊框?qū)傩詾榱朔指罹W(wǎng)頁中不同的盒子，常常需要給元素設(shè)置邊框效果。在CSS中邊框?qū)傩园ㄟ吙驑邮綄傩裕╞order-style）、邊框?qū)挾葘傩裕╞order-width）、邊框顏色屬性（border-color）、單側(cè)邊框的屬性、邊框的綜合屬性，CSS邊框類型及屬性見表。304CSS邊框類型及屬性305在上表中列出了所有的邊框?qū)傩?，對于初學(xué)者來說比較難以理解，下面對上表中的邊框?qū)傩赃M行具體講解。（1）設(shè)置邊框樣式邊框樣式用于定義網(wǎng)頁中邊框的風(fēng)格，常用屬性值如下。none：沒有邊框，即忽略所有邊框的寬度（默認值）。solid：邊框為單實線。dashed：邊框為虛線。dotted：邊框為點線。double：邊框為雙實線。306在設(shè)置邊框樣式時，既可以對盒子的單邊進行設(shè)置，又可以綜合設(shè)置四條邊的樣式，具體情況如下。border-top-style：上邊框樣式。border-right-style：右邊框樣式。border-bottom-style：下邊框樣式。border-left-style：左邊框樣式。border-style：上邊框樣式右邊框樣式下邊框樣式左邊框樣式。border-style：上邊框樣式左右邊框樣式下邊框樣式。border-style：上下左右邊框樣式。307使用border-style屬性綜合設(shè)置四條邊樣式時有兩個原則，一是必須按上右下左的順時針順序；二是省略時采用值復(fù)制的原則，即一個值為四條邊，兩個值為上下/左右，三個值為上/左右/下。308（2）設(shè)置邊框?qū)挾萣order-width屬性用于設(shè)置邊框的寬度，其常用取值單位為像素px。同邊框樣式一樣，邊框?qū)挾纫部梢葬槍λ臈l邊分別設(shè)置，或綜合設(shè)置四條邊的寬度，具體情況如下。border-top-width：上邊框?qū)挾?。border-right-width：右邊框?qū)挾取order-bottom-width：下邊框?qū)挾?。border-left-width：左邊框?qū)挾取order-width：上邊框?qū)挾扔疫吙驅(qū)挾认逻吙驅(qū)挾茸筮吙驅(qū)挾取?09（3）設(shè)置邊框顏色border-color屬性用于設(shè)置邊框的顏色，其取值可以為預(yù)定義的顏色值、十六進制#RRGGBB或RGB格式rgb（r,g,b）、rgb（r%,g%,b%），實際工作中最常用的是十六進制#RRGGBB。邊框的默認顏色為元素本身的文本顏色，對于沒有文本的元素，其默認邊框顏色為父元素的文本顏色。邊框顏色的單邊與綜合設(shè)置如下。310border-top-color：上邊框顏色。border-right-color：右邊框顏色。border-bottom-color：下邊框顏色。border-left-color：左邊框顏色。border-color：上邊框顏色右邊框顏色下邊框顏色左邊框顏色。綜合設(shè)置邊框四條邊的顏色時，必須按照上右下左的順時針順序，省略時采用值復(fù)制的原則，即一個值為四條邊，兩個值為上下/左右，三個值為上/左右/下。311（4）綜合設(shè)置邊框使用border-style、border-width、border-color雖然可以實現(xiàn)豐富的邊框效果，但是采用這種方式書寫的代碼比較煩瑣，且不便于閱讀，為此CSS提供了更簡單的邊框設(shè)置方式，其基本格式如下。采用上述設(shè)置方式時，寬度、樣式、顏色的順序不分先后，可以只指定需要設(shè)置的屬性，省略的部分將取默認值（樣式不能省略）。312當(dāng)每一側(cè)的邊框樣式都不相同，或者只需單獨定義某一側(cè)的邊框時，可以使用單側(cè)邊框的綜合屬性border-top、border-bottom、border-left或border-right進行設(shè)置。例如，單獨定義上邊框，代碼如圖所示。當(dāng)四條邊的邊框樣式都相同時，可以使用border屬性進行綜合設(shè)置。單獨定義上邊框代碼313若要將二級標(biāo)題的邊框設(shè)置為雙實線、紅色、3像素寬，操作代碼如圖所示。能夠用一個屬性定義元素的多種樣式，如border、border-top等，在CSS中稱為復(fù)合屬性。常用的復(fù)合屬性有font、border、margin、padding和background等。實際工作中常使用復(fù)合屬性，它可以簡化代碼，提高網(wǎng)頁的運行速度。設(shè)置二級標(biāo)題的邊框代碼3142.內(nèi)邊距屬性在網(wǎng)頁設(shè)計中，為了調(diào)整內(nèi)容在盒子中的顯示位置，常常需要給元素設(shè)置內(nèi)邊距，所謂內(nèi)邊距指的是元素內(nèi)容之間的距離，也常常稱為內(nèi)填充。在CSS中，padding屬性之間的距離也常常被稱為內(nèi)填充。在CSS中，padding屬性用于設(shè)置內(nèi)邊距，同邊框?qū)傩詁order一樣，padding也是復(fù)合屬性，其相關(guān)設(shè)置方法如下。padding-top：上內(nèi)邊距。padding-right：右內(nèi)邊距。padding-bottom：下內(nèi)邊距。315padding-left：左內(nèi)邊距。padding：上內(nèi)邊距右內(nèi)邊距下內(nèi)邊距左內(nèi)邊距。在上面的設(shè)置中，padding相關(guān)屬性的取值可為auto（默認值）、不同單位的數(shù)值、相對于父元素（或瀏覽器）寬度的百分比（%），實際工作中最常用的是像素值（px），不允許使用負值。同邊框相關(guān)屬性一樣，使用復(fù)合屬性padding定義內(nèi)邊距時，必須按照順時針順序，省略時采用值復(fù)制的原則，一個值為四條邊，兩個值為上下/左右，三個值為上/左右/下。3163.外邊距屬性網(wǎng)頁是由多個盒子排列而成的，要想拉開盒子與盒子之間的距離，合理地布局網(wǎng)頁，就要為盒子設(shè)置外邊距。所謂外邊距，指的是元素邊框與相鄰元素之間的距離。在CSS中，margin屬性用于設(shè)置外邊距，它是一個復(fù)合屬性，與內(nèi)邊距padding的用法類似，設(shè)置外邊距的具體方法如下。317margin-top：上外邊距。margin-right：右外邊距。margin-bottom：下外邊距。margin-left：左外邊距。margin：上外邊距右外邊距下外邊距左外邊距。margin相關(guān)屬性的值以及復(fù)合屬性margin取1～4個值的情況與padding相同。但是外邊距可以使用負值，使相鄰元素重疊。3184.背景屬性網(wǎng)頁能通過背景圖像給讀者留下深刻的印象，如節(jié)日主題的網(wǎng)頁一般采用喜慶祥和的圖片來突出效果，所以在網(wǎng)頁設(shè)計中合理控制背景顏色和背景圖像至關(guān)重要。下面將詳細介紹用CSS控制背景樣式的方法。（1）設(shè)置背景顏色設(shè)置背景顏色需要通過background-color屬性來實現(xiàn)，關(guān)于該屬性在前面的項目中已經(jīng)做過詳細講解，這里不再做具體介紹。（2）設(shè)置背景圖像在CSS中，背景不僅可以設(shè)置為某種顏色，還可以將圖像作為網(wǎng)頁元素的背景，通過background-image屬性設(shè)置來實現(xiàn)。319（3）設(shè)置背景圖像平鋪默認情況下，背景圖像會自動向水平和豎直兩個方向平鋪，如果不希望背景圖像平鋪，或者只想沿著一個方向平鋪，可以通過background-repeat屬性來控制，該屬性的取值如下。Repeat：沿水平和豎直兩個方向平鋪（默認值）。no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次）。repeat-x：只沿水平方向平鋪。repeat-y：只沿豎直方向平鋪。320（4）設(shè)置背景圖像的不平鋪如果將背景圖像的平鋪屬性background-repeat定義為no-repeat，圖像將以不平鋪的方式顯示在body標(biāo)簽的左上角，代碼如圖所示。設(shè)置背景圖像不平鋪的代碼321（5）設(shè)置背景圖像的位置如果想改變背景圖像顯示的位置，就需要對另一個CSS屬性background-position進行設(shè)置。background-position屬性的取值有多種，具體如下。1）使用不同單位（最常用的是像素px）的數(shù)值：直接設(shè)置圖像左上角在元素中的坐標(biāo)，例如“background-position:20px20px;”。2）使用預(yù)定義的關(guān)鍵字：指定背景圖像在元素中的對齊方式。3）使用百分比：按背景圖像和元素的指定點對齊。3225.盒子的寬與高網(wǎng)頁是由多個盒子排列而成的，每個盒子都有固定的大小。在CSS中使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。width和height的屬性值可以為不同單位的數(shù)值或相對于父元素的百分比。實際工作中，最常用的是像素值。制作登錄網(wǎng)頁任務(wù)2

323●1.熟悉元素的定位模式和邊偏移模式?！?.掌握靜態(tài)定位的用法。●3.掌握相對定位的用法?！?.掌握絕對定位的用法?！?.掌握固定定位的用法?！?.掌握行元素和塊元素之間的轉(zhuǎn)換方法。324本任務(wù)使用CSS定位對網(wǎng)頁中的“注冊”按鈕和“忘記密碼”超鏈接進行了精確定位，制作完成的繽購樂食電子商務(wù)網(wǎng)站登錄網(wǎng)頁如圖所示。325繽購樂食電子商務(wù)網(wǎng)站登錄網(wǎng)頁326步驟一：由于本任務(wù)所制作的繽購樂食電子商務(wù)網(wǎng)站登錄網(wǎng)頁與任務(wù)1中繽購樂食電子商務(wù)網(wǎng)站注冊網(wǎng)頁的樣式相似，故把任務(wù)1中的代碼移植過來進行修改。首先把“手機號注冊”改為“登錄商城”，并且在后面加上一個“注冊”按鈕。然后把input標(biāo)簽減少到兩個，并修改其中的圖標(biāo)與文字信息。最后把checkbox復(fù)選框后面的內(nèi)容改為“記住密碼”，并在其后加上一個“忘記密碼”超鏈接。修改后的代碼如圖所示。327登錄商城328未加定位相關(guān)CSS代碼的原表單效果如圖所示。未加定位相關(guān)CSS代碼的原表單效果329步驟二：通過圖可以看到，“注冊”按鈕沒有顯示按鈕效果，且位置不對。使用絕對定位后的CSS代碼330設(shè)置好定位相關(guān)代碼之后，運行代碼，定位后的登錄表單效果如圖所示。定位后的登錄表單效果331步驟三：步驟二已完成登錄網(wǎng)頁的內(nèi)容，想要實現(xiàn)注冊網(wǎng)頁與登錄網(wǎng)頁之間的跳轉(zhuǎn)，有兩種很好的跳轉(zhuǎn)方式：一是在表單form標(biāo)簽的屬性action里面設(shè)置跳轉(zhuǎn)目標(biāo)網(wǎng)頁地址；二是在a標(biāo)簽的href屬性里面設(shè)置跳轉(zhuǎn)目標(biāo)網(wǎng)頁地址?，F(xiàn)在要實現(xiàn)在注冊網(wǎng)頁單擊“注冊”按鈕跳轉(zhuǎn)到登錄網(wǎng)頁，采用第一種跳轉(zhuǎn)方式；在登錄網(wǎng)頁單擊“登錄”按鈕跳轉(zhuǎn)到注冊網(wǎng)頁，采用第二種跳轉(zhuǎn)方式，具體操作如下。332注冊網(wǎng)頁333登錄網(wǎng)頁334在注冊網(wǎng)頁上設(shè)置跳轉(zhuǎn)代碼，如圖所示。在登錄網(wǎng)頁上設(shè)置跳轉(zhuǎn)代碼，如圖所示。這樣設(shè)置好后，兩個網(wǎng)頁之間就可以進行跳轉(zhuǎn)了。注冊網(wǎng)頁上的跳轉(zhuǎn)登錄網(wǎng)頁上的跳轉(zhuǎn)335一、元素的定位屬性元素的定位屬性主要包括定位模式和邊偏移兩部分。1.定位模式在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下。336position屬性值及含義其中，position屬性值有static、relative、absolute、?xed，具體見表。337從表中可以看出，元素的定位主要分為四類，下面針對每一種定位方式進行詳細講解。（1）靜態(tài)定位當(dāng)用于定位的元素的position屬性值為static時，稱此定位模式為靜態(tài)定位，元素所在的位置也就是在文檔流中的位置。（2）相對定位當(dāng)用于定位的元素的position屬性值為relative時，稱此定位模式為相對定位。338（3）絕對定位當(dāng)用于定位的元素的position屬性值為absolute時，稱此定位模式為絕對定位。絕對定位是將元素依據(jù)最近的已經(jīng)定位（絕對定位、固定定位或相對定位）的父元素進行定位，若所有元素都沒有定位，則依據(jù)根元素body（瀏覽器窗口）進行定位。339（4）固定定位當(dāng)網(wǎng)頁元素的position屬性值為?xed時，稱此定位模式為固定定位。固定定位的元素特性如下。1）固定定位是相對于“當(dāng)前瀏覽器窗口”來進行的定位。2）固定定位元素不再占空間，層級要高于普通元素，跟“浮動”很像。3）行內(nèi)元素使用?xed定位，將轉(zhuǎn)成“塊元素”。4）如果只指定了?xed定位屬性，并沒有設(shè)置偏移量，則“原地不動”。340邊偏移屬性及描述2.邊偏移定位模式僅用于定義元素以哪種方式定位，并不能確定元素的具體位置。在CSS中，通過邊偏移屬性top、bottom、left或right來精確定義定位元素的位置，具體見表。341二、元素的轉(zhuǎn)換html中的網(wǎng)頁元素被定義成不同的類型，大致分為塊元素和行內(nèi)元素兩大類，也稱塊標(biāo)簽和行內(nèi)標(biāo)簽。通過學(xué)習(xí)它們的特性，可以為使用CSS設(shè)置樣式和布局打下基礎(chǔ)。1.塊元素塊元素在頁面中以區(qū)域塊的形式出現(xiàn)，其特點有：獨自占據(jù)一整行或多行；可對其設(shè)置寬度、高度、對齊等屬性；可以容納行內(nèi)元素和其他塊元素。常見的塊元素有h1～h6、p、div、ul、ol、li等，其中div標(biāo)簽是最典型的塊元素。3422.行內(nèi)元素行內(nèi)元素也稱內(nèi)聯(lián)元素或內(nèi)嵌元素，其特點有：和其他行內(nèi)元素都在同一行上顯示，不會獨自換行；寬度就是它的文字或圖片的寬度，默認不可改變；設(shè)置