網(wǎng)頁設(shè)計與制作項目式教程（HTML+CSS）項目四綜合電商類網(wǎng)頁開發(fā)項目——制作“助農(nóng)樂購”網(wǎng)站注冊頁面綜合電商類網(wǎng)頁開發(fā)項目隨著互聯(lián)網(wǎng)的普及和發(fā)展，電商網(wǎng)站已經(jīng)成為人們不可或缺的購物渠道之一。電商網(wǎng)站的使用場景非常廣泛，可以滿足人們不同的購物需求。電商網(wǎng)站是企業(yè)、機構(gòu)或者個人開展電商的基礎(chǔ)設(shè)施和信息平臺，是實施電商的交互窗口，是從事電商的一種手段。最近，小丁實習(xí)的Web前端開發(fā)公司承接了一個“助農(nóng)樂購”電商網(wǎng)站的開發(fā)項目，小丁將在前端工程師的指導(dǎo)下學(xué)習(xí)制作該網(wǎng)站的靜態(tài)頁面。情景導(dǎo)入“助農(nóng)樂購”網(wǎng)站頁面的實現(xiàn)——注冊頁教學(xué)項目項目“助農(nóng)樂購”網(wǎng)站頁面的實現(xiàn)——商品頁、主頁教學(xué)項目項目任務(wù)4.1創(chuàng)建“助農(nóng)樂購”網(wǎng)站項目項目實施任務(wù)分析小丁分配到的任務(wù)是制作“助農(nóng)樂購”網(wǎng)站的主頁、注冊頁和商品頁，在制作網(wǎng)頁之前，小丁需要做一些準(zhǔn)備工作，根據(jù)網(wǎng)站開發(fā)需求以及UI設(shè)計師提供的素材，創(chuàng)建網(wǎng)站項目，項目信息如表4-1所示。表4-1“助農(nóng)樂購”網(wǎng)站項目信息一覽表項目名稱助農(nóng)樂購項目頁面主頁（index.html）、注冊頁（reg.html）、商品頁（goods.html）資源目錄樣式表目錄（css）、圖片目錄（img）任務(wù)4.1創(chuàng)建“助農(nóng)樂購”網(wǎng)站項目項目實施操作實施1.新建網(wǎng)站項目在開發(fā)軟件HBuilderX中新建“助農(nóng)樂購”網(wǎng)站項目，具體步驟如下：（1）打開開發(fā)軟件HBuilderX，選擇“文件”菜單中的“新建”→“項目”命令。任務(wù)4.1創(chuàng)建“助農(nóng)樂購”網(wǎng)站項目項目實施操作實施1.新建網(wǎng)站項目（2）在“選擇模板”界面中選擇“基本HTML項目”，填寫項目名稱“助農(nóng)樂購”，瀏覽選擇目錄存儲的路徑位置。任務(wù)4.1創(chuàng)建“助農(nóng)樂購”網(wǎng)站項目項目實施操作實施2.網(wǎng)站資源管理根據(jù)網(wǎng)站資源需求新建目錄和文件，在模板基礎(chǔ)上，在“助農(nóng)樂購”根目錄上點擊右鍵，選擇“新建”→“html文件”，建立reg.html、goods.html文件，并將素材文件夾中的圖片資源整理拷貝到img目錄內(nèi)。注意：由于本項目是綜合電商類網(wǎng)頁的開發(fā)，網(wǎng)頁的CSS樣式代碼量會比較大，所以本項目的CSS樣式均采用外部引入的方式，后續(xù)新建.css文件時需將其都整理到css目錄內(nèi)。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面項目實施任務(wù)分析“助農(nóng)樂購”網(wǎng)站注冊頁面效果圖任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面項目實施任務(wù)分析分析頁面的框架結(jié)構(gòu)，主要包括頭部區(qū)、主體區(qū)、腳部區(qū)3個部分，其框架結(jié)構(gòu)圖及主要設(shè)置如下：任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面項目實施任務(wù)分析頭部區(qū)包括網(wǎng)站logo圖片、歡迎詞、5個超鏈接，框架結(jié)構(gòu)圖及主要設(shè)置要求如圖所示。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面項目實施任務(wù)分析主體區(qū)包括一個注冊表單。框架結(jié)構(gòu)圖及主要設(shè)置要求如圖所示。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面項目實施任務(wù)分析腳部區(qū)分上下兩個區(qū)域，上面友情鏈接區(qū)域包括2個鏈接圖片和6個鏈接列表，下面版權(quán)信息區(qū)域包括一段版權(quán)聲明文字。框架結(jié)構(gòu)圖及主要設(shè)置要求如圖所示。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備知識導(dǎo)圖根據(jù)任務(wù)分析，在之前掌握知識的基礎(chǔ)上，完成本任務(wù)還需要學(xué)習(xí)的主要知識點有表單、選擇器進階，知識導(dǎo)圖如圖所示。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)1：表單1.表單元素form大家在訪問網(wǎng)站時，經(jīng)常會遇到賬號注冊、賬號登錄、搜索、用戶調(diào)查等功能，這些基本都是使用HTML表單與用戶進行的交互。表單元素允許用戶在表單中輸入內(nèi)容，如文本框、密碼框、單選按鈕、復(fù)選框、按鈕等。當(dāng)用戶信息填寫完畢后，進行提交操作，然后表單就可以將用戶在瀏覽時輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。網(wǎng)頁內(nèi)的表單元素是由<form>標(biāo)簽定義的，其他的表單控件元素必須放在<form>…</form>開始和結(jié)束標(biāo)簽之間，否則用戶提交數(shù)據(jù)時會丟失參數(shù)。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)1：表單form元素的基本語法格式如下：<form>標(biāo)簽的常用屬性有action、method、name。屬性值描述actionURL規(guī)定當(dāng)提交表單時向何處發(fā)送表單數(shù)據(jù)。methodget/post規(guī)定用于發(fā)送表單數(shù)據(jù)的HTTP方法，取值為get或post。nametext規(guī)定表單的名稱。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)1：表單2.表單控件表單元素中可以包含許多表單控件元素來實現(xiàn)頁面交互的功能，如輸入控件、文本域、下拉列表、按鈕等。主要的表單控件如表所示。元素標(biāo)簽描述<input>定義輸入域<label>定義了<input>元素的標(biāo)簽，一般為輸入標(biāo)題<textarea>定義文本域(一個多行的輸入控件)<select>定義了下拉選項列表，其選項用<option>標(biāo)簽定義。<button>定義一個點擊按鈕任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)1：表單（1）輸入元素inputinput元素是最重要的表單控件元素，用來輸入，根據(jù)類型的不同，分為文本框、密碼框、單選按鈕、復(fù)選框、按鈕等，其基本語法如下：<inputtype="控件元素類型"name="控件元素名稱">根據(jù)type屬性值的不同，input元素可以呈現(xiàn)很多形態(tài)，常用屬性值如表所示。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)1：表單（1）輸入元素input任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)1：表單（2）標(biāo)注元素labellabel元素的作用是為input元素定義標(biāo)注。如果在label元素內(nèi)點擊文本，就會觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動聚焦到和標(biāo)簽相關(guān)的表單控件上。label元素由<label>標(biāo)簽定義，<label>標(biāo)簽的for屬性應(yīng)與相關(guān)元素的id屬性相同。例如：任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)1：表單（2）標(biāo)注元素labellabel元素的作用是為input元素定義標(biāo)注。如果在label元素內(nèi)點擊文本，就會觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動聚焦到和標(biāo)簽相關(guān)的表單控件上。label元素由<label>標(biāo)簽定義，<label>標(biāo)簽的for屬性應(yīng)與相關(guān)元素的id屬性相同。例如：代碼運行效果：任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)1：表單當(dāng)鼠標(biāo)點擊控件上的“個人”或“企業(yè)”文字時，瀏覽器會自動聚焦到單選圓圈內(nèi)，形成選中狀態(tài)。如果沒有設(shè)置<label>標(biāo)簽的for屬性，是不能實現(xiàn)這個效果的，只能點擊圓圈才能選中。

任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)1：表單（3）多行文本元素textareatextarea元素用于輸入多行文本。可以通過cols和rows屬性來規(guī)定多行文本框的尺寸大小，cols屬性規(guī)定文本區(qū)域的寬度（以平均字符寬度計），默認值是20；rows規(guī)定文本區(qū)域的高度（以行數(shù)計），默認值是2。textarea元素由<textarea>標(biāo)簽定義，<textarea>…</textarea>內(nèi)可輸入文字作為默認文本，例如：<textareacols="30"rows="5">請?zhí)顚懩愕纳暾埨碛桑?lt;/textarea>代碼運行效果：任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)1：表單（4）下拉列表元素selectselect元素用于創(chuàng)建下拉列表，由<select>標(biāo)簽定義。其中每個列表項用<option>標(biāo)簽定義，在標(biāo)簽中設(shè)置selected屬性可以將該選項作為默認選項。例如：代碼運行效果：任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)1：表單（5）按鈕元素buttonbutton元素用于創(chuàng)建按鈕，由<button>標(biāo)簽定義。在<button>…</button>內(nèi)部，可以放置內(nèi)容，比如文本或圖像。這是該元素與使用input元素創(chuàng)建的按鈕的不同之處。例如：<button>購物車</button>代碼運行效果：任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)2：CSS選擇器進階在上一個項目中，大家已經(jīng)學(xué)習(xí)了CSS選擇器的相關(guān)知識，認識了元素選擇器、ID選擇器、類選擇器、群組選擇器等基本選擇器，這里還將學(xué)習(xí)CSS選擇器的進階知識。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)2：CSS選擇器進階1.屬性選擇器通過元素的屬性來選擇HTML元素，屬性選擇器可以根據(jù)屬性名和屬性值進行選擇，如下代碼，input[type="text"]選擇器將選擇所有type屬性為"text"的input元素。代碼運行效果：任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)2：CSS選擇器進階2.后代選擇器、子選擇器后代選擇器通過指定元素的后代關(guān)系選擇HTML元素，即這個元素的所有后代，不論是子元素還是孫元素還是更下一級的元素都是它的選擇范圍。而子選擇器只選擇指定元素的子元素，其孫元素和更下一級的元素不在選擇范圍內(nèi)。兩者的語法規(guī)則為：后代選擇器語法：父選擇器寫在前，后代選擇器寫在后，兩個選擇器之間使用空格連接。子選擇器語法：父選擇器寫在前，子選擇器寫在后，兩個選擇器之間使用>連接。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)2：CSS選擇器進階代碼運行效果：后代選擇器設(shè)置的css樣式是字體傾斜，對所有后代元素都起作用，所以兩行文字均為斜體。子選擇器設(shè)置的css樣式是字體加粗，只對子元素起作用，所以只有第一行文字是加粗的。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)2：CSS選擇器進階3.兄弟選擇器、相鄰兄弟選擇器兄弟選擇器可選擇指定元素的所有弟元素，它們都具有相同的父元素。相鄰兄弟選擇器只可選擇緊接在指定元素后的相鄰弟元素，二者具有相同的父元素。兩者的語法規(guī)則為：兄弟選擇器語法：兄選擇器寫在前，弟選擇器寫在后，兩個選擇器之間使用~連接。相鄰兄弟選擇器語法：兄選擇器寫在前，相鄰兄弟選擇器寫在后，兩個選擇器之間使用+連接。例如：任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備新知學(xué)習(xí)2：CSS選擇器進階代碼運行效果：兄弟選擇器設(shè)置的css樣式是下劃線，對所有弟元素都起作用，所以第2~4行文字均有下劃線。相鄰兄弟選擇器設(shè)置的css樣式是字體加粗，只對相鄰的那個弟元素起作用，所以只有第二行文字是加粗的。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面操作實踐任務(wù)實踐4.2.1：搭建頁面基礎(chǔ)1.設(shè)置HTML頭部標(biāo)簽信息在“助農(nóng)樂購”網(wǎng)站項目CSS目錄中新建all.css、reg.css文件，打開“助農(nóng)樂購”網(wǎng)站項目列表中的reg.html文件，在頭部標(biāo)簽<head>內(nèi)設(shè)置網(wǎng)頁標(biāo)題，引入CSS文件，具體代碼如下：任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面操作實踐任務(wù)實踐4.2.1：搭建頁面基礎(chǔ)2.設(shè)置網(wǎng)頁通用CSS樣式在網(wǎng)頁中，有些樣式需要做整體設(shè)置，保持統(tǒng)一，則可以寫在CSS文件最前面，如果是網(wǎng)站內(nèi)多個網(wǎng)頁共用的樣式，還可以單獨寫在一個CSS文件里，引入到多個網(wǎng)頁即可。本網(wǎng)站頁面的通用CSS代碼都寫在all.css文件內(nèi)，代碼如下：任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面操作實踐任務(wù)實踐4.2.2：制作頁面頭部區(qū)1.用HTML搭建網(wǎng)頁結(jié)構(gòu)根據(jù)頁面效果以及之前對頭部區(qū)的結(jié)構(gòu)分析，頭部區(qū)用div元素布局，里面有1個網(wǎng)站logo圖片，1行歡迎詞文字，5個導(dǎo)航超鏈接。在<body>…</body>內(nèi)書寫相應(yīng)的HTML代碼。2.用CSS設(shè)置網(wǎng)頁樣式根據(jù)之前對頭部區(qū)的樣式設(shè)置要求分析，在reg.css文件內(nèi)書寫CSS代碼。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面操作實踐任務(wù)實踐4.2.3：制作頁面主體區(qū)根據(jù)效果圖以及之前對主體區(qū)的結(jié)構(gòu)分析，主體區(qū)用div元素布局一個灰色主區(qū)域（.main），里面嵌套1個div白色注冊區(qū)域（.regBox），注冊區(qū)域內(nèi)有1個文本段落，1個注冊表單（表單內(nèi)嵌套8個div元素來布局控件），1個文本超鏈接段落。編寫html和css代碼，實現(xiàn)該模塊。任務(wù)4.2制作“助農(nóng)樂購”網(wǎng)站注冊頁面操作實踐任務(wù)實踐4.2.4：制作頁面腳部區(qū)根據(jù)效果圖以及之前對腳部區(qū)的結(jié)構(gòu)分析，腳部區(qū)用div元素布局（.footer），里面上下嵌套2個div元素，上面的是友情鏈接區(qū)（.linkBox），內(nèi)有2個超鏈接圖