Web前端技術(shù) 課件 模塊二 任務(wù)3 頭部導(dǎo)航欄目實(shí)現(xiàn)

頭部導(dǎo)航欄目實(shí)現(xiàn)Web前端技術(shù)主講老師：***延時(shí)符CONTENTS目錄01任務(wù)描述03知識點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識05任務(wù)實(shí)施延時(shí)符任務(wù)描述延時(shí)符任務(wù)描述網(wǎng)頁中的導(dǎo)航菜單如字典的檢索條目，也如導(dǎo)航的地圖，指引著用戶快速進(jìn)入不同的功能頁面里，基本上在線的網(wǎng)站都會有導(dǎo)航菜單，大部分是一級導(dǎo)航菜單，也有不少是功能更復(fù)雜的二級或者多級菜單，總的來說，就是根據(jù)網(wǎng)站的內(nèi)容把它們分類，并且以導(dǎo)航菜單的形式展示。因此，設(shè)計(jì)導(dǎo)航菜單是網(wǎng)頁設(shè)計(jì)必須熟練掌握的技能，導(dǎo)航菜單設(shè)計(jì)有多種方案，目前用得最多的是利用列表與浮動布局相結(jié)合的技術(shù)實(shí)現(xiàn)。本小節(jié)將以音樂網(wǎng)站為例設(shè)計(jì)包含LOGO、搜索框等組合的導(dǎo)航菜單。延時(shí)符頁面效果圖延時(shí)符學(xué)習(xí)目標(biāo)延時(shí)符學(xué)習(xí)目標(biāo)掌握輸入標(biāo)簽和行內(nèi)span標(biāo)簽的方法；掌握CSS子代選擇符的方法；掌握CSS后代選擇符的方法。知識目標(biāo)能夠根據(jù)效果圖使用合理標(biāo)簽進(jìn)行頁面結(jié)構(gòu)搭建；能學(xué)會規(guī)劃導(dǎo)航菜單的方法；能夠正確采用子代選擇符和后代選擇符設(shè)置樣式；能利用border-radius、background-position和text-indent設(shè)置搜索框。技能目標(biāo)延時(shí)符培養(yǎng)細(xì)致認(rèn)真的工作態(tài)度；培養(yǎng)與他人合作溝通的能力。素養(yǎng)目標(biāo)知識點(diǎn)導(dǎo)圖延時(shí)符知識點(diǎn)導(dǎo)圖延時(shí)符相關(guān)知識延時(shí)符表單輸入標(biāo)簽結(jié)構(gòu)化偽類選擇器border-radius屬性text-indent屬性子代選擇符/后代選擇符彈性布局之flex屬性float屬性HTML標(biāo)簽：表單延時(shí)符網(wǎng)站所具有的功能不僅僅是展示信息給用戶，同時(shí)還能接收用戶提交的信息。我們常見的登錄注冊、點(diǎn)餐取貨等都是能夠?qū)崿F(xiàn)交互功能的系統(tǒng)，在前端設(shè)計(jì)中，實(shí)現(xiàn)交互功能重要的HTML標(biāo)簽就是表單，掌握表單的相關(guān)內(nèi)容對以后學(xué)習(xí)動態(tài)網(wǎng)站設(shè)計(jì)有很大幫助。表單不是表格，既不用來顯示數(shù)據(jù)，也不用來布局頁面，它提供了一個(gè)交互的容器，在其中放置了多種標(biāo)簽用于與用戶進(jìn)行互動，比如登錄表單中有文本輸入框、密碼框、提交按鈕和復(fù)選框等標(biāo)簽，留言板表單中有多行文本框、文件上傳和提交按鈕等標(biāo)簽，當(dāng)用戶輸入數(shù)據(jù)后，點(diǎn)擊提交按鈕，表單會收集所有填入的數(shù)據(jù)一并通過網(wǎng)絡(luò)提交給后臺系統(tǒng)服務(wù)器端進(jìn)行處理，這就屬于動態(tài)網(wǎng)頁設(shè)計(jì)的范疇了。我們只需要掌握表單的設(shè)計(jì)，至于提交之后數(shù)據(jù)處理過程不在本書的知識范圍內(nèi)。表單的語法：<formname=“表單名稱”action=“表單處理程序”method=“數(shù)據(jù)傳送方式”>……</form>HTML標(biāo)簽：表單延時(shí)符在表單<form>標(biāo)簽中，可以設(shè)置表單的基本屬性，包括表單名稱、處理程序和傳送方式等。一般情況下，表單的處理程序action屬性和傳送方式method屬性是必不可少的參數(shù)，action屬性用于指定表單數(shù)據(jù)提交到哪個(gè)地址進(jìn)行處理，method用于指定數(shù)據(jù)提交到服務(wù)器時(shí)使用哪種HTTP提交方法，有兩個(gè)值：get和post。（1） GET。get方法是通過URL傳遞給程序，數(shù)據(jù)容量小，且數(shù)據(jù)內(nèi)容可在URL中直接查看，非常不安全。（2） POST。post方法將表單中的數(shù)據(jù)放在表單數(shù)據(jù)體中，按照變量和值相對應(yīng)的方式傳遞到處理程序，它能傳輸大容量數(shù)據(jù)，且數(shù)據(jù)內(nèi)容對用戶不可見，非常安全。method的默認(rèn)值是post。網(wǎng)頁除了向用戶傳遞信息外，還可以讓用戶與網(wǎng)頁進(jìn)行互動，HTML5提供了多種輸入標(biāo)簽實(shí)現(xiàn)互動功能，比如輸入框、密碼框、單選按鈕、復(fù)選按鈕、菜單列表和提交按鈕等，一般來說，輸入標(biāo)簽需要放在表單標(biāo)簽<form></form>里，但隨著移動設(shè)備的普及，前端技術(shù)不斷發(fā)展，目前無需表單也可以完成與服務(wù)器端的信息交互功能。<input>是一個(gè)輸入簇標(biāo)簽，通過其type屬性決定不同的表現(xiàn)形式，如<inputtype=”text”>為單行文本框，<inputtype=”password”>為密碼框，<inputtype=”radio”>為單選按鈕等，熟練掌握這些屬性，就能夠得心應(yīng)手地設(shè)計(jì)互動頁面。HTML標(biāo)簽：輸入標(biāo)簽延時(shí)符表單視頻講解本任務(wù)案例使用單行文本框來設(shè)計(jì)搜索框，代碼如下：<inputtype="text"placeholder="音樂/視頻/電臺/用戶">它的表現(xiàn)形式如圖2-4-4所示，placeholder屬性規(guī)定可描述輸入字段預(yù)期值的簡短的提示信息，該提示會在用戶輸入值之前顯示在輸入框中。（本例中是提示可輸入的搜索關(guān)鍵詞類型）。當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，提示信息會自動消失，如圖2-4-5所示。

圖2-3-4placeholder初始效果圖圖2-3-5placeholder單擊文本框后效果圖CSS樣式：結(jié)構(gòu)化偽類選擇器延時(shí)符結(jié)構(gòu)化偽類選擇器是CSS3中新增加的選擇器。作用：根據(jù)元素在HTML中的結(jié)構(gòu)關(guān)系查找元素。優(yōu)勢：減少對于HTML中類的依賴，有利于保持代碼整潔。場景：常用于查找某父級選擇器中的子元素。常用的結(jié)構(gòu)化偽類選擇器如下：（1） :first-child和:last-child:first-child選擇器和:last-child選擇器分別用于為父元素中的第一個(gè)或者最后一個(gè)子元素設(shè)置樣式。例如：ulli:first-child表示為父元素ul的第一個(gè)子元素li設(shè)置樣式。ulli:last-child表示為父元素ul中最后一個(gè)li元素設(shè)置樣式。（2） :nth-child(n)和:nth-last-child(n):nth-child(n)用于選擇作為其父元素的第n個(gè)子元素（n>=1）:nth-last-child(n)用于選擇作為其父元素的倒數(shù)第n個(gè)子元素（n>=1）例如：ulli:nth-child(2)表示為父元素ul的第二個(gè)子元素li設(shè)置樣式。ulli:nth-last-child(2)表示為父元素ul的倒數(shù)第二個(gè)子元素li設(shè)置樣式。CSS樣式：border-radius屬性延時(shí)符border-radius允許設(shè)置元素的外邊框圓角，它有兩個(gè)單位，一個(gè)是絕對單位，比如px、pt、em等，一個(gè)是相對單位，比如%。屬性值設(shè)置與margin、padding一樣，可分別設(shè)置為單值（同時(shí)四個(gè)角）、雙值（上下-左右）、三值（上-左右-下）和四值（上-右-下-左）。有個(gè)常用的設(shè)置方法為border-radius：50%，如果原圖是正方形，則設(shè)置后為正圓形，如果原因是長方形，則設(shè)置后為橢圓形，如下圖2-3-9和2-3-10所示：圖2-3-9使用border-radius將正方形變?yōu)檎龍A圖2-3-10使用border-radius將長方形變?yōu)闄E圓CSS樣式：text-indent屬性延時(shí)符text-indent屬性規(guī)定文本塊中首行文本的縮進(jìn)。在本例中設(shè)置該屬性是為了確保用戶輸入的文本的起始位置在放大鏡后面，而不會覆蓋在放大鏡圖標(biāo)上。當(dāng)頁面中有大量段落時(shí)，使用該屬性可以快速設(shè)置首行文本的縮進(jìn)。搜索框樣式設(shè)置視頻講解CSS樣式：子代選擇符/后代選擇符延時(shí)符網(wǎng)頁中的元素，具有明顯的層級關(guān)系?？梢岳盟麄兊南鄬ξ恢煤碗`屬關(guān)系，來定位元素，以簡化選擇符的設(shè)計(jì)。層級關(guān)系相關(guān)的選擇符有兩種：子代選擇符和后代選擇符。（1） 子代選擇符：格式：選擇符A>選擇符B。作用：訪問選擇符A下的所有選擇符B（只訪問到下一級，只有一級）。（2） 后代選擇符：格式：選擇符A選擇符B。作用：訪問選擇符A下的所有選擇符B（無論嵌套多少級）。子代選擇符/后代選擇符視頻講解CSS樣式：彈性布局之flex屬性延時(shí)符在前面的章節(jié)中已經(jīng)講過flex彈性布局的幾個(gè)基本屬性，如需更加細(xì)致地設(shè)計(jì)頁面，還需要掌握flex屬性，flex屬性是flex-grow、flex-shrink、flex-basis三個(gè)屬性的縮寫，用來設(shè)置flex項(xiàng)目的尺寸。先分別介紹flex-grow、flex-shrink、flex-basis屬性的基本用法。（1） flex-grow。該屬性用來設(shè)置當(dāng)父元素的寬度大于所有子元素的寬度的和時(shí)（即父元素會有剩余空間），子元素如何分配父元素的剩余空間。flex-grow的默認(rèn)值為0，意思是該元素不索取父元素的剩余空間，如果值大于0，表示索取。值越大，索取的越厲害。CSS樣式：彈性布局之flex屬性延時(shí)符（2） flex-shrink。該屬性用來設(shè)置子元素的縮小比例，當(dāng)父元素的寬度小于所有子元素的寬度的和時(shí)（即子元素會超出父元素），子元素如何縮小自己的寬度的。flex-shrink的默認(rèn)值為1，當(dāng)父元素的寬度小于所有子元素的寬度的和時(shí)，子元素的寬度會減小。值越大，減小的越厲害。如果值為0，表示不減小。（3） flex-basis。該屬性用來設(shè)置元素的寬度，通常情況下大家使用width設(shè)置寬度。但是如果元素上同時(shí)設(shè)置了width和flex-basis，那么width的值就會被flex-basis覆蓋掉。flex屬性有幾個(gè)常用縮寫如表2-3-1所示：彈性布局之flex屬性視頻講解CSS樣式：float屬性延時(shí)符塊級元素在頁面中會獨(dú)占一行，可定義寬高，自上而下排列，也就是定位體系中的常規(guī)流。由于塊級元素獨(dú)占一行，即使元素后面有空間，也不會分配給下一個(gè)塊級元素，如何在一行內(nèi)顯示多個(gè)塊級元素是頁面布局必須要解決的問題，常規(guī)流無法解決，那就要用到浮動(float)技術(shù)。浮動可以理解為讓某個(gè)塊級元素脫離常規(guī)流，漂浮在常規(guī)流之上。浮動的屬性值如表2-3-2。font-family:字體。Float屬性視頻講解任務(wù)實(shí)施延時(shí)符結(jié)構(gòu)分析樣式分析設(shè)置頁面樣式頁面結(jié)構(gòu)結(jié)構(gòu)分析延時(shí)符“導(dǎo)航菜單”欄目由上下2個(gè)部分組成。上半部分由LOGO、菜單項(xiàng)、搜索框和注冊登錄鏈接結(jié)成，其中LOGO用<img>標(biāo)簽定義，導(dǎo)航菜單項(xiàng)用無序列表<ul><li>標(biāo)簽定義，熱點(diǎn)