任務(wù)5 制作學(xué)院網(wǎng)站導(dǎo)航條

任務(wù)5制作學(xué)院網(wǎng)站導(dǎo)航條Web前端開發(fā)案例教程HTML5+CSS3微課版導(dǎo)航條是網(wǎng)頁的重要組成元素，導(dǎo)航條可以將網(wǎng)站的信息分類處理，幫助瀏覽者快速查找所需信息。本任務(wù)使用HTML的無序列表標(biāo)記構(gòu)建導(dǎo)航條的結(jié)構(gòu)，使用CSS

完成導(dǎo)航條樣式設(shè)計(jì)，實(shí)現(xiàn)學(xué)院網(wǎng)站導(dǎo)航條。通過本任務(wù)的實(shí)現(xiàn)，掌握導(dǎo)航條的構(gòu)建及導(dǎo)航條樣式設(shè)置等。任務(wù)3制作學(xué)院網(wǎng)站導(dǎo)航條任務(wù)5任務(wù)效果創(chuàng)建學(xué)院網(wǎng)站導(dǎo)航條，瀏覽效果如圖所示。（1）導(dǎo)航條的寬度為100%，高度為42px。（2）導(dǎo)航條的背景顏色為藍(lán)色RGB(28,75,169)。（3）每個(gè)導(dǎo)航項(xiàng)的寬度為120px，高度為42px，文字水平和垂直方向都居中。（4）每個(gè)導(dǎo)航項(xiàng)為超鏈接，文字采用微軟雅黑體，文字大小為14px，文字顏色為白色，無下劃線。（5）鼠標(biāo)指針懸停到主菜單項(xiàng)上時(shí)，顯示白底藍(lán)字。任務(wù)效果創(chuàng)建學(xué)院網(wǎng)站導(dǎo)航條，要求如下。知識(shí)點(diǎn)無序列表樣式設(shè)置01

超鏈接樣式設(shè)置02

元素的類型與轉(zhuǎn)換03任務(wù)3制作學(xué)院網(wǎng)站導(dǎo)航條任務(wù)55.2.1無序列表樣式設(shè)置列表有無序列表、有序列表和自定義列表等，對(duì)應(yīng)的標(biāo)記分別是<ul>、<ol>和<dl>等。在實(shí)際應(yīng)用中，無序列表是使用最頻繁的列表之一，例如，本任務(wù)中的導(dǎo)航條就是用無序列表來構(gòu)建的。無序列表樣式設(shè)置5.2.1無序列表樣式設(shè)置（1）list-style-type屬性：控制無序或有序列表的項(xiàng)目符號(hào)。例如，無序列表的取值有disc、circle、square。（2）list-style-position屬性：設(shè)置列表項(xiàng)目符號(hào)的位置，其取值有inside和outside兩種。（3）list-style-image屬性：設(shè)置列表項(xiàng)的項(xiàng)目圖像，使列表的樣式更加美觀，其取值為圖像的URL。（4）list-style屬性：綜合設(shè)置列表樣式，可以代替上面3個(gè)屬性。使用list-style屬性綜合設(shè)置列表項(xiàng)的樣式，格式如下。無序列表樣式設(shè)置5.2.1無序列表樣式設(shè)置list-style:列表項(xiàng)目符號(hào)列表項(xiàng)目符號(hào)的位置列表項(xiàng)目圖像;example01.html無序列表樣式設(shè)置5.2.1無序列表樣式設(shè)置5.2.2超鏈接樣式設(shè)置超鏈接默認(rèn)的文字顏色為藍(lán)色且?guī)в邢聞澗€，這種單調(diào)的樣式并不好看。實(shí)際上，為了使超鏈接看起來更加美觀，經(jīng)常需要為超鏈接指定不同的狀態(tài)，使得超鏈接在單擊前、單擊后和鼠標(biāo)指針懸停時(shí)的樣式不同。在CSS中，通過超鏈接偽類可以實(shí)現(xiàn)不同的超鏈接狀態(tài)。超鏈接樣式設(shè)置5.2.2超鏈接樣式設(shè)置超鏈接樣式設(shè)置5.2.2超鏈接樣式設(shè)置通常在實(shí)際應(yīng)用時(shí)，只使用a:link和a:visited來定義未訪問和訪問后的樣式，而且為a:link和a:visited定義相同的樣式；使用a:hover定義鼠標(biāo)指針懸停時(shí)超鏈接的樣式。有時(shí)干脆只定義a和a:hover的樣式。超鏈接樣式設(shè)置5.2.2超鏈接樣式設(shè)置example02.html5.2.3元素的類型與轉(zhuǎn)換HTML提供了豐富的標(biāo)記，用于組織頁面結(jié)構(gòu)。為了使頁面結(jié)構(gòu)的組織更加清晰、合理，HTML標(biāo)記被定義成了不同的類型，一般分為塊標(biāo)記和行內(nèi)標(biāo)記，也稱塊元素和行內(nèi)元素。塊元素和行內(nèi)元素還能根據(jù)實(shí)際需求進(jìn)行類型轉(zhuǎn)換。塊元素5.2.3元素的類型與轉(zhuǎn)換塊元素（BlockElement）在頁面中以區(qū)域塊的形式出現(xiàn)，其特點(diǎn)是：每個(gè)塊元素通常都會(huì)占據(jù)一整行或多行，可以對(duì)其設(shè)置寬度、高度、對(duì)齊方式等屬性，常用于網(wǎng)頁布局和搭建網(wǎng)頁結(jié)構(gòu)。常見的塊元素有h1～h6、p、ul、ol、li、div、header、nav、article、aside、section、footer等行內(nèi)元素行內(nèi)元素（InlineElement）也稱為內(nèi)聯(lián)元素或內(nèi)嵌元素，其特點(diǎn)是：不必在新的一行開始，同時(shí)，也不強(qiáng)迫其他元素在新的一行顯示。一個(gè)行內(nèi)元素通常會(huì)和它前后的其他行內(nèi)元素顯示在同一行中，它們不占據(jù)獨(dú)立的區(qū)域，僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，常用于控制頁面中特殊文本的樣式。常見的行內(nèi)元素有a、span、strong、ins、em、del等，其中a和span元素是典型的行內(nèi)元素。5.2.3元素的類型與轉(zhuǎn)換<span>標(biāo)記<span>標(biāo)記與<div>標(biāo)記都因可作為容器標(biāo)記而被廣泛應(yīng)用在HTML網(wǎng)頁中。在<span>與</span>之間同樣可以容納各種HTML元素，從而形成獨(dú)立的對(duì)象。div元素與span元素的區(qū)別在于，div元素是一個(gè)塊元素，它包圍的元素會(huì)自動(dòng)換行；而span元素是一個(gè)行內(nèi)元素，在它的前后不會(huì)換行。span元素沒有結(jié)構(gòu)上的意義，純粹是用來應(yīng)用樣式的，當(dāng)對(duì)一行內(nèi)容中的某部分內(nèi)容單獨(dú)設(shè)置樣式時(shí)，就可以使用span元素。5.2.3元素的類型與轉(zhuǎn)換元素的轉(zhuǎn)換網(wǎng)頁是由多個(gè)塊元素和行內(nèi)元素構(gòu)成的盒子排列而成的。如果希望行內(nèi)元素具有塊元素的某些特性，如可以設(shè)置寬高，或者需要塊元素具有行內(nèi)元素的某些特性，如不獨(dú)占一行，則可以使用display屬性轉(zhuǎn)換元素的類型。格式如下。display:inline|block|inline-block|none;5.2.3元素的類型與轉(zhuǎn)換元素的轉(zhuǎn)換display屬性常用的屬性值及含義如下。inline：行內(nèi)元素，該值是行內(nèi)元素的默認(rèn)屬性值。block：塊元素，該值是塊元素的默認(rèn)屬性值。inline-block：行內(nèi)塊元素，可以對(duì)其設(shè)置寬度、高度和對(duì)齊方式等屬性，但是該元素不會(huì)獨(dú)占一行。none：元素被隱藏，不顯示。5.2.3元素的類型與轉(zhuǎn)換元素的轉(zhuǎn)換在項(xiàng)目chapter05中再新建一個(gè)網(wǎng)頁文件，制作垂直導(dǎo)航條，文件名為example03.html。5.2.3元素的類型與轉(zhuǎn)換元素的轉(zhuǎn)換瀏覽網(wǎng)頁，效果如下圖所示。5.2.3元素的類型與轉(zhuǎn)換任務(wù)

制作學(xué)院網(wǎng)站導(dǎo)航條任務(wù)55.3.1搭建學(xué)院網(wǎng)站導(dǎo)航條結(jié)構(gòu)該導(dǎo)航條由10個(gè)主菜單項(xiàng)構(gòu)成。主菜單項(xiàng)使用無序列表來構(gòu)造，所有內(nèi)容放入一個(gè)導(dǎo)航塊中，再設(shè)置塊中各元素及超鏈接的CSS樣式。5.3.1搭建學(xué)院網(wǎng)站導(dǎo)航條結(jié)構(gòu)5.3.2