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

323●1.熟悉元素的定位模式和邊偏移模式?！?.掌握靜態(tài)定位的用法?！?.掌握相對定位的用法?！?.掌握絕對定位的用法?！?.掌握固定定位的用法?！?.掌握行元素和塊元素之間的轉(zhuǎn)換方法。324本任務(wù)使用CSS定位對網(wǎng)頁中的“注冊”按鈕和“忘記密碼”超鏈接進(jìn)行了精確定位，制作完成的繽購樂食電子商務(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中的代碼移植過來進(jìn)行修改。首先把“手機(jī)號注冊”改為“登錄商城”，并且在后面加上一個(gè)“注冊”按鈕。然后把input標(biāo)簽減少到兩個(gè)，并修改其中的圖標(biāo)與文字信息。最后把checkbox復(fù)選框后面的內(nèi)容改為“記住密碼”，并在其后加上一個(gè)“忘記密碼”超鏈接。修改后的代碼如圖所示。327登錄商城328未加定位相關(guān)CSS代碼的原表單效果如圖所示。未加定位相關(guān)CSS代碼的原表單效果329步驟二：通過圖可以看到，“注冊”按鈕沒有顯示按鈕效果，且位置不對。使用絕對定位后的CSS代碼330設(shè)置好定位相關(guān)代碼之后，運(yùn)行代碼，定位后的登錄表單效果如圖所示。定位后的登錄表單效果331步驟三：步驟二已完成登錄網(wǎng)頁的內(nèi)容，想要實(shí)現(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)在要實(shí)現(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è)置好后，兩個(gè)網(wǎng)頁之間就可以進(jìn)行跳轉(zhuǎn)了。注冊網(wǎng)頁上的跳轉(zhuǎn)登錄網(wǎng)頁上的跳轉(zhuǎn)335一、元素的定位屬性元素的定位屬性主要包括定位模式和邊偏移兩部分。1.定位模式在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下。336position屬性值及含義其中，position屬性值有static、relative、absolute、?xed，具體見表。337從表中可以看出，元素的定位主要分為四類，下面針對每一種定位方式進(jìn)行詳細(xì)講解。（1）靜態(tài)定位當(dāng)用于定位的元素的position屬性值為static時(shí)，稱此定位模式為靜態(tài)定位，元素所在的位置也就是在文檔流中的位置。（2）相對定位當(dāng)用于定位的元素的position屬性值為relative時(shí)，稱此定位模式為相對定位。338（3）絕對定位當(dāng)用于定位的元素的position屬性值為absolute時(shí)，稱此定位模式為絕對定位。絕對定位是將元素依據(jù)最近的已經(jīng)定位（絕對定位、固定定位或相對定位）的父元素進(jìn)行定位，若所有元素都沒有定位，則依據(jù)根元素body（瀏覽器窗口）進(jìn)行定位。339（4）固定定位當(dāng)網(wǎng)頁元素的position屬性值為?xed時(shí)，稱此定位模式為固定定位。固定定位的元素特性如下。1）固定定位是相對于“當(dāng)前瀏覽器窗口”來進(jìn)行的定位。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)，其特點(diǎn)有：獨(dú)自占據(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)嵌元素，其特點(diǎn)有：和其他行內(nèi)元素都在同一行上顯示，不會獨(dú)自換行；寬度就是它的文字或圖片的寬度，默認(rèn)不可改變；設(shè)置高度height無效，可以通過line-height來設(shè)置；設(shè)置margin只有左右margin有效，上下無效；設(shè)置padding只有左右padding有效，上下無效；只能容納文本或者其他行內(nèi)元素。常見的行內(nèi)元素有strong、b、em、i、del、s、ins、u、a、span等，其中span標(biāo)簽是最典型的行內(nèi)元素。343在具體使用時(shí)，可根據(jù)需要，通過display屬性實(shí)現(xiàn)塊元素與行內(nèi)元素之間的轉(zhuǎn)換。display的屬性值及含義見表。display的屬性值及含義344下面通過一個(gè)案例來進(jìn)一步學(xué)習(xí)塊元素和行內(nèi)元素，代碼如圖所示。未使用元素的轉(zhuǎn)換之前的代碼應(yīng)用345在上圖中，先使用<span>定義文本，然后對它們設(shè)置邊框顏色屬性，設(shè)置高度和寬度屬性值。運(yùn)行上圖中的代碼，效果如圖所示。從圖中可以看出，對id名為span1的span標(biāo)簽設(shè)置的寬度和高度屬性值與id名為span2的span標(biāo)簽未設(shè)置寬度和高度效果是一樣的，那就說明span1設(shè)置的寬度和高度屬性值是無用的，所以需要使用元素的轉(zhuǎn)換。未使用元素的轉(zhuǎn)換之前的效果346接下來將span標(biāo)簽轉(zhuǎn)換為塊元素標(biāo)簽，看一看它的效果會如何變化。代碼如圖所示。使用元素的轉(zhuǎn)換的代碼應(yīng)用347在id名為span1的span標(biāo)簽里面加了“display:block;”，該屬性值使span標(biāo)簽轉(zhuǎn)換成塊元素標(biāo)簽。保存html文件，刷新網(wǎng)頁，效果如圖所示。這時(shí)可以發(fā)現(xiàn)使用了元素轉(zhuǎn)換屬性的span標(biāo)簽的高度和寬度發(fā)生了改變。如果使用的是行內(nèi)元素標(biāo)簽并且相對這個(gè)標(biāo)簽的寬、高屬性進(jìn)行設(shè)置的話，那么就要使用元素的轉(zhuǎn)換屬性，將它轉(zhuǎn)換成塊級元素。使用元素的轉(zhuǎn)換的效果06頁面導(dǎo)航348任務(wù)1制作網(wǎng)站導(dǎo)航列表任務(wù)2制作網(wǎng)站主導(dǎo)航欄349制作網(wǎng)站導(dǎo)航列表任務(wù)1350●熟練掌握超鏈接偽類的使用技巧。351本任務(wù)使用列表標(biāo)簽、超鏈接標(biāo)簽及浮動樣式完成網(wǎng)站導(dǎo)航列表的布局，使用超鏈接偽類實(shí)現(xiàn)光標(biāo)懸停在網(wǎng)站導(dǎo)航項(xiàng)時(shí)的變化效果，實(shí)現(xiàn)網(wǎng)站導(dǎo)航列表效果如圖所示。352網(wǎng)站導(dǎo)航列表效果353步驟一：定義一個(gè)<ul></ul>無序列表，并使其包含四個(gè)<li></li>列表項(xiàng)，同時(shí)每個(gè)列表項(xiàng)中包含一對超鏈接<a></a>。在大多數(shù)網(wǎng)頁中，導(dǎo)航列表的導(dǎo)航項(xiàng)都具有跳轉(zhuǎn)到其他網(wǎng)頁的功能，所以導(dǎo)航列表要使用超鏈接a標(biāo)簽完成，導(dǎo)航列表代碼如圖所示。354導(dǎo)航列表代碼355步驟二：根據(jù)對目標(biāo)效果的分析，去掉列表原有默認(rèn)樣式，同時(shí)把列表項(xiàng)設(shè)置為向左浮動，使其橫向排列，樣式代碼如圖所示。樣式代碼356運(yùn)行效果如圖所示。圖已初步完成導(dǎo)航列表的布局，但是超鏈接a標(biāo)簽所自帶的樣式需要改變。這里需要應(yīng)用超鏈接偽類，在CSS中可以用a選擇器來設(shè)置a標(biāo)簽的常態(tài)樣式。當(dāng)鼠標(biāo)光標(biāo)懸停在a標(biāo)簽上時(shí)使用“a:hover”偽類選擇器來設(shè)置此時(shí)的樣式。浮動后效果357步驟三：將a標(biāo)簽常態(tài)背景色設(shè)置為藍(lán)色，當(dāng)鼠標(biāo)光標(biāo)懸停在其上時(shí)將背景色設(shè)置為紅色。樣式代碼358超鏈接偽類并不是真正意義上的類。它的名稱是由系統(tǒng)定義的，通常由標(biāo)簽名、類名或id名加上冒號“:”構(gòu)成。超鏈接a標(biāo)簽的偽類有四種，具體見表。超鏈接a標(biāo)簽的偽類及含義359上表中列出了超鏈接a標(biāo)簽的四種偽類，分別用于定義訪問前、訪問后、鼠標(biāo)光標(biāo)懸停時(shí)及用鼠標(biāo)單擊不放開時(shí)。在實(shí)際編寫代碼時(shí)，通常只使用“a:link”“a:visited”和“a:hover”定義訪問前、訪問后和鼠標(biāo)光標(biāo)懸停時(shí)的樣式，且通常對“a:link”和“a:visited”應(yīng)用相同的樣式，使得訪問前和訪問后的超鏈接標(biāo)簽樣式保持一致。制作網(wǎng)站主導(dǎo)航欄任務(wù)2

360●掌握浮動屬性的相關(guān)設(shè)置。361本任務(wù)使用浮動屬性制作繽購樂食電子商務(wù)網(wǎng)站主導(dǎo)航欄，效果如圖所示。362繽購樂食電子商務(wù)網(wǎng)站主導(dǎo)航欄效果363步驟一：在body標(biāo)簽中創(chuàng)建一個(gè)頂部盒子div，命名為“index-header”。然后在頂端盒子里面創(chuàng)建兩個(gè)子盒子div，一個(gè)命名為“header-left”，另一個(gè)命名為“header-right”。最后分別為它們加入相應(yīng)的文字內(nèi)容，代碼如圖所示。創(chuàng)建頂部盒子代碼364創(chuàng)建頂部盒子代碼365步驟二：使用CSS代碼設(shè)置頂部盒子樣式。要注意的是，要讓某標(biāo)簽中的內(nèi)容水平居中，一般使用“text-align：center;”來實(shí)現(xiàn)。要讓某標(biāo)簽中的內(nèi)容垂直居中，一般通過設(shè)置高度height的值與行高line-height的值相同來實(shí)現(xiàn)，CSS代碼如圖所示。366設(shè)置頂部盒子樣式代碼367設(shè)置頂部盒子樣式代碼368設(shè)置頂部盒子樣式代碼369步驟三：接下來制作搜索框圖片部分。先將整個(gè)懸浮搜索框命名為“index-search”，搜索框左邊放置一張logo圖片，實(shí)現(xiàn)方式為：創(chuàng)建一個(gè)div盒子，命名為“index-logo”，里面包含一個(gè)img標(biāo)簽，把事先準(zhǔn)備好的logo圖片通過src屬性導(dǎo)入。代碼如圖所示。放置logo代碼370步驟四：使用CSS代碼設(shè)置logo樣式，整個(gè)搜索框區(qū)域的寬度仍然是1000像素，高度設(shè)置為90像素，將裝logo圖片的盒子寬度設(shè)置為200像素，高度設(shè)置為90像素，距離左側(cè)外邊距50像素。CSS代碼如圖所示。371設(shè)置logo樣式代碼372設(shè)置logo樣式代碼373運(yùn)行上圖中的代碼，效果如圖所示。設(shè)置logo效果圖374步驟五：在懸浮搜索框“index-search”里創(chuàng)建包含搜索框和按鈕的盒子，命名為“search-bar”，在盒子里面套一個(gè)form表單。form表單中包含兩個(gè)input表單控件，一個(gè)作為文本搜索框，另一個(gè)作為按鈕。input標(biāo)簽里面的placeholder屬性是用來設(shè)置提示語的，可以將提示語設(shè)置為placeholder的屬性值，具體代碼如圖所示。創(chuàng)建包含搜索框和按鈕的盒子代碼375步驟六：接下來制作主導(dǎo)航欄，設(shè)置主導(dǎo)航欄大盒子div的名稱為“index-nav”。它里面包含一個(gè)大盒子