《網(wǎng)站前端技術(shù)》621-7（梁玲）課件 第六章 開(kāi)發(fā)者商務(wù)網(wǎng)站建設(shè)_第1頁(yè)
《網(wǎng)站前端技術(shù)》621-7（梁玲）課件 第六章 開(kāi)發(fā)者商務(wù)網(wǎng)站建設(shè)_第2頁(yè)
《網(wǎng)站前端技術(shù)》621-7（梁玲）課件 第六章 開(kāi)發(fā)者商務(wù)網(wǎng)站建設(shè)_第3頁(yè)
《網(wǎng)站前端技術(shù)》621-7（梁玲）課件 第六章 開(kāi)發(fā)者商務(wù)網(wǎng)站建設(shè)_第4頁(yè)
《網(wǎng)站前端技術(shù)》621-7（梁玲）課件 第六章 開(kāi)發(fā)者商務(wù)網(wǎng)站建設(shè)_第5頁(yè)
已閱讀5頁(yè)，還剩143頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

《網(wǎng)站前端技術(shù)》簽到掃碼下載文旌課堂APP掃碼簽到（2022.3.2515:00至2022.3.2515:10）簽到方式教師通過(guò)“文旌課堂APP”生成簽到二維碼，并設(shè)置簽到時(shí)間，學(xué)生通過(guò)“文旌課堂APP”掃描“簽到二維碼”進(jìn)行簽到。。全課導(dǎo)航第1章網(wǎng)站建設(shè)概述第2章HTML與HTML5第3章CSS與CSS3第4章JavaScript基礎(chǔ)第5章JQuery常用函數(shù)第6章開(kāi)發(fā)者商務(wù)網(wǎng)站建設(shè)06PARTSIX

第6章開(kāi)發(fā)者商務(wù)網(wǎng)站建設(shè)01*12結(jié)合第2章～第5章的知識(shí)點(diǎn)，以本章網(wǎng)站實(shí)現(xiàn)為基礎(chǔ)進(jìn)行網(wǎng)站設(shè)計(jì)，盡量完善網(wǎng)站所需靜態(tài)頁(yè)面，具體包含以下頁(yè)面：首頁(yè)、一級(jí)列表頁(yè)、二級(jí)列表頁(yè)、詳情頁(yè)、訂單頁(yè)/評(píng)價(jià)頁(yè)、登錄頁(yè)、注冊(cè)頁(yè)、后臺(tái)管理頁(yè)。鍛煉從全局視角看問(wèn)題，客觀辯證地思考和處理問(wèn)題的科學(xué)思維方式。。通過(guò)對(duì)案例的不斷完善鍛煉學(xué)生精益求精的態(tài)度。學(xué)習(xí)目標(biāo)素質(zhì)目標(biāo)學(xué)習(xí)目標(biāo)目錄CONTNETS本章導(dǎo)航制作其他頁(yè)面03布局首頁(yè)01實(shí)現(xiàn)首頁(yè)人機(jī)交互效果0201*01布局首頁(yè)01*6.1布局首頁(yè)“開(kāi)發(fā)者電子商務(wù)網(wǎng)站”首頁(yè)從上到下分為頭部、搜索行、一級(jí)導(dǎo)航、banner圖、產(chǎn)品展示區(qū)域、腳部區(qū)域和返回頂部按鈕。因首頁(yè)內(nèi)容較多，為提高初學(xué)者學(xué)習(xí)興趣，有效驅(qū)動(dòng)HTML和CSS知識(shí)點(diǎn)的學(xué)習(xí)，此處分為多個(gè)小節(jié)介紹其實(shí)現(xiàn)過(guò)程。布局首頁(yè)頭部01*6.1.1布局首頁(yè)頭部

【實(shí)現(xiàn)目標(biāo)】首頁(yè)頭部布局效果如圖6-1-1紅線框指示，在布局過(guò)程中需要注意一些問(wèn)題：（1）頭部背景色和下邊框貫穿整行；（2）頭部?jī)?nèi)容居于中間1200px；（3）頭部各子元素向右對(duì)齊；（4）微信圖標(biāo)有子元素二維碼，但默認(rèn)隱藏；（5）除歡迎語(yǔ)和微信圖標(biāo)外，其他均為鏈接元素。圖6-1-1首頁(yè)頁(yè)眉效果【知識(shí)掃描】（1）網(wǎng)站的基本結(jié)構(gòu)。（2）HTML文檔與CSS文檔的關(guān)聯(lián)。（3）HTML相關(guān)知識(shí)點(diǎn)：①HTML文檔結(jié)構(gòu)；②雙標(biāo)簽與單標(biāo)簽的區(qū)別；③塊標(biāo)簽與行標(biāo)簽的區(qū)別；④典型的盒子模型標(biāo)簽<div>（雙標(biāo)簽&行標(biāo)簽）；⑤鏈接標(biāo)簽<a>（雙標(biāo)簽&行標(biāo)簽）；⑥

圖片標(biāo)簽<img>（單標(biāo)簽&行標(biāo)簽）。01*6.1.1布局首頁(yè)頭部（4）CSS相關(guān)知識(shí)點(diǎn)：①選擇器的表達(dá)方式；②ID選擇器、類(lèi)選擇器、偽類(lèi)選擇器、子選擇器等選擇器類(lèi)型與HTML元素屬性定義的匹配性；③盒子模型常用屬性width、height、margin、padding、background；④常用屬性color、font-size、box-sizing、cursor、font-family的應(yīng)用；⑤相對(duì)于父元素水平居中的實(shí)現(xiàn)；⑥文字相對(duì)于父元素垂直居中的實(shí)現(xiàn)；⑦元素的顯示方式屬性display及行元素變?yōu)閴K元素的方法；⑧塊元素浮動(dòng)排列的CSS設(shè)置屬性float；⑨圖片元素相對(duì)于父元素垂直居中的CSS設(shè)置方法。【實(shí)現(xiàn)步驟】1.創(chuàng)建網(wǎng)站目錄developer，以及子目錄css和img。選擇計(jì)算機(jī)合理位置創(chuàng)建目錄developer，作為網(wǎng)站站點(diǎn)根目錄。在目錄developer中創(chuàng)建子目錄css和img，分別用來(lái)存放相關(guān)css樣式表文件和圖片資源。2.創(chuàng)建index.html。使用編輯軟件“SublimeText”在目錄developer中創(chuàng)建文件index.html。在編輯區(qū)輸入“html:5”并按【tab】鍵，生成HTML文檔基本結(jié)構(gòu)，然后將標(biāo)題標(biāo)簽<title>的內(nèi)容修改為“開(kāi)發(fā)者商務(wù)網(wǎng)站首頁(yè)”。代碼如下：01*<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>開(kāi)發(fā)者商務(wù)網(wǎng)站首頁(yè)</title></head><body></body></html>6.1.1捕獲元素3.創(chuàng)建index.css。使用編輯軟件在目錄developer/css中創(chuàng)建文件index.css。編輯全局選擇器設(shè)置頁(yè)面默認(rèn)屬性：鼠標(biāo)形狀為手形；內(nèi)邊距和外邊距均為0；計(jì)算盒子尺寸的方式為包含邊框；文字顏色為#666；文字大小為12px；文字字體為微軟雅黑。代碼如下：01**{cursor:pointer; padding:0; margin:0; box-sizing:border-box; color:#666; font-size:12px; font-family:"微軟雅黑";}6.1.1捕獲元素4.關(guān)聯(lián)index.html和index.css。在HTML文檔<head>標(biāo)簽?zāi)┪蔡砑?lt;link>標(biāo)簽，并設(shè)置關(guān)聯(lián)文件地址，代碼如下：<linkrel="stylesheet"href="css/index.css">小提示注意此處的相對(duì)路徑表達(dá)。01*6.1.1捕獲元素5.布局最外層背景色貫穿整行的盒子，使用id控制HTML元素樣式。HTML文檔編輯操作：①在<body>標(biāo)簽中輸入代碼“div”，按下【tab】鍵，生成<div>標(biāo)簽。②在<div>標(biāo)簽的起始標(biāo)簽中輸入id及其屬性值head-box。代碼如下：<divid="head-box"></div>CSS文檔編輯操作：編輯id選擇器#head-box，設(shè)置標(biāo)簽寬度為100%；高度為32px；背景色為#F7F7F7；下邊框?yàn)?px實(shí)心線，顏色為#CCC。代碼如下：#head-box{ width:100%; height:32px; background:#F7F7F7; border-bottom:1pxsolid#CCC;}01*6.1.1捕獲元素

6.布局居中排列的1200px的子盒子。HTML文檔編輯操作：在id為head-box的標(biāo)簽內(nèi)部嵌套一個(gè)<div>標(biāo)簽，id屬性為head-box-son。CSS文檔編輯操作：編輯id選擇器head-box-son，設(shè)置標(biāo)簽寬度為1200px；高度31px；相對(duì)于父元素水平居中；臨時(shí)性背景顏色為red，方便查看布局效果。代碼如下：#head-box-son{ width:1200px; height:31px; margin:0auto; background:red;}小提示粗斜體部分為實(shí)現(xiàn)相對(duì)于父元素水平居中的相關(guān)代碼。完成效果測(cè)試后會(huì)將紅色背景色去掉。01*6.1.1捕獲元素

7.初步布局顯示的文字元素和圖片元素。HTML文檔編輯操作：在id為head-box-son的<div>標(biāo)簽中輸入代碼“a[class="head"]{$}*9”，并按下【tab】鍵，生成如下代碼：<ahref=""class="head">1</a><ahref=""class="head">2</a><ahref=""class="head">3</a><ahref=""class="head">4</a><ahref=""class="head">5</a><ahref=""class="head">6</a><ahref=""class="head">7</a><ahref=""class="head">8</a><ahref=""class="head">9</a>小提示在代碼簡(jiǎn)易寫(xiě)法“a[class="head"]{$}*9”中，[]中的內(nèi)容表示屬性及屬性值，該案例中表示類(lèi)名為“head”；{}中的內(nèi)容表示標(biāo)簽內(nèi)容，$表示從1開(kāi)始的數(shù)字，此處表示內(nèi)容為1～9；*n表示生成標(biāo)簽的數(shù)量，此處的*9表示生成9個(gè)標(biāo)簽。01*6.1.1捕獲元素CSS文檔編輯操作：①編輯類(lèi)選擇器head，設(shè)置標(biāo)簽為塊元素；寬度自動(dòng)；高度和行高均為31px，實(shí)現(xiàn)文字垂直居中；向右浮動(dòng)；左右外邊距為5px。代碼如下：.head{ display:block; width:auto; height:31px; line-height:31px; float:right; margin:05px;}②編輯a標(biāo)簽選擇器，設(shè)置默認(rèn)文本修飾樣式為無(wú)，即消除鏈接標(biāo)簽自帶的下劃線；鏈接文字的顏色為#666。代碼如下：01*6.1.1捕獲元素a{ text-decoration:none; color:#666;}③編輯a標(biāo)簽偽類(lèi)選擇器，設(shè)置鼠標(biāo)浮于上方時(shí)，文字顏色為#B91720，向用戶表達(dá)相應(yīng)內(nèi)容為鏈接的事實(shí)。a:hover{color:#B91720;}

8.完善文字元素和圖片元素內(nèi)容與樣式。HTML文檔編輯操作：①對(duì)照目標(biāo)效果圖，將其中的數(shù)字1、2、3修改為圖片標(biāo)簽<img>，并設(shè)置src屬性，分別連接微博、微信、公告圖片。將微信圖片父元素修改為<div>標(biāo)簽；微博和公告圖片父元素<a>的鏈接地址分別為weibo.html和notice.html。代碼如下：<ahref="weibo.html"class="head"> <imgsrc="img/weibo.jpg"alt=""></a><divclass="head"> <imgsrc="img/weixin.jpg"alt="">01*6.1.1捕獲元素</div><ahref="notice.html"class="head"> <imgsrc="img/notice.png"alt=""></a>②對(duì)照目標(biāo)效果圖，將其中的4、5、6、7、8、9修改為相應(yīng)的文字，并修改符號(hào)“|”和歡迎語(yǔ)的父元素為<div>標(biāo)簽，網(wǎng)站公告、我的訂單、注冊(cè)、登錄父元素的鏈接地址分別為notice.html、indent.html、reg.html、login.html。代碼如下：<ahref="notice.html"class="head">網(wǎng)站公告</a><ahref="indent.html"class="head">我的訂單</a><ahref="reg.html"class="head">注冊(cè)</a><divclass="head">|</div><ahref="login.html"class="head">登錄</a><divclass="head">歡迎您來(lái)到開(kāi)發(fā)者商務(wù)網(wǎng)站！?。?lt;/div>CSS文檔編輯操作：編輯派生選擇器.head>img，設(shè)置圖片相對(duì)于父元素垂直居中。代碼如下：.head>img{vertical-align:middle;}01*【思考總結(jié)】

（1）寫(xiě)出同時(shí)生成7個(gè)類(lèi)名為head，內(nèi)容為1～7的div標(biāo)簽的簡(jiǎn)易寫(xiě)法。（2）舉例說(shuō)明id選擇器、類(lèi)選擇器、子選擇器名稱(chēng)的書(shū)寫(xiě)方法。（3）寫(xiě)出文字相對(duì)于父元素水平居中的實(shí)現(xiàn)方法。（4）寫(xiě)出文字相對(duì)于父元素垂直居中的實(shí)現(xiàn)方法。（5）寫(xiě)出將塊元素排列在同一行的實(shí)現(xiàn)方法。（6）寫(xiě)出圖片相對(duì)于父元素垂直居中的實(shí)現(xiàn)方法。（7）寫(xiě)出將行元素變?yōu)閴K元素的實(shí)現(xiàn)方法。【實(shí)訓(xùn)作業(yè)】（1）創(chuàng)建個(gè)人網(wǎng)站。（2）創(chuàng)建網(wǎng)站首頁(yè)。（3）完成網(wǎng)站首頁(yè)頭部。6.1.1捕獲元素01*6.1.2

布局搜索行【實(shí)現(xiàn)目標(biāo)】【知識(shí)掃描】（1）HTML相關(guān)知識(shí)點(diǎn)：輸入框input的type屬性決定其表現(xiàn)形式，如text表示文本域，button表示按鈕。（2）CSS相關(guān)知識(shí)點(diǎn)：①父元素被子元素自動(dòng)撐開(kāi)的實(shí)現(xiàn)方法；②背景圖片屬性background-image設(shè)置方法；③背景圖片定位屬性background-position設(shè)置方法；④屬性選擇器。首頁(yè)搜索行見(jiàn)圖6-1-1紅線框所示，在布局過(guò)程中需要注意一些問(wèn)題：（1）搜索行整體向右浮動(dòng)；（2）搜索行包含文本框和兩個(gè)按鈕，按鈕采用背景圖片設(shè)置樣式；（3）購(gòu)物車(chē)在鼠標(biāo)浮于其上方時(shí)有反顯效果；（4）熱門(mén)搜索行中冒號(hào)之后的文字均為鏈接，且均鏈接至二級(jí)列表頁(yè)smallClass.html。布局搜索行【實(shí)現(xiàn)步驟】1.構(gòu)建居中盒子，應(yīng)用于整個(gè)網(wǎng)站中寬度為1200px且水平居中的元素。HTML文檔編輯操作：在id為head-box的<div>標(biāo)簽后插入類(lèi)名為develop-box的<div>標(biāo)簽。01*6.1.2

布局搜索行CSS文檔編輯操作：編輯類(lèi)選擇器develop-box，設(shè)置寬度為1200px；相對(duì)于父元素水平居中，上外邊距為20，下外邊距為0；高度為auto，溢出屬性overflow為hidden，實(shí)現(xiàn)被子元素自動(dòng)撐開(kāi)；臨時(shí)性背景顏色為yellow。代碼如下：.develop-box{ width:1200px; margin:20pxauto0; height:auto; overflow:hidden; background:yellow;}2.插入普通按鈕、提交按鈕和輸入框，并分別設(shè)置其樣式。HTML文檔編輯操作：在居中的盒子中依次插入一個(gè)普通按鈕、一個(gè)提交按鈕（注意設(shè)置value屬性值為空字符串）和一個(gè)輸入框。代碼如下：01*6.1.2

布局搜索行<divclass="develop-box"> <inputtype="button"value="購(gòu)物車(chē)(0)"> <inputtype="submit"value=""> <inputtype="text"value="搜“水洗棉”，體驗(yàn)更多不同"></div>CSS文檔編輯操作：①編輯屬性選擇器input[type="button"]，設(shè)置元素向右浮動(dòng)；寬度為105px、高度和行高為29px；背景圖片為圖片資源包中的bj2.png；背景定位為向左移155px；文字顏色為白色；為使文字在購(gòu)物車(chē)圖標(biāo)右側(cè)，設(shè)置左側(cè)內(nèi)邊距為30px。代碼如下：input[type="button"]{ float:right; width:105px; height:29px;01*6.1.2

布局搜索行

line-height:29px; background-image:url(../img/bj2.png); background-position:-155px0; color:#fff; padding-left:30px;}②編輯屬性選擇器input[type="submit"]，設(shè)置搜索按鈕向右浮動(dòng)；寬度為49px，高度為29px；右側(cè)外邊距為20px；背景圖片為bj2.png；背景定位為向左移動(dòng)100px。代碼如下：input[type="submit"]{ float:right; width:49px; height:29px; margin-right:20px;background-image:url(../img/bj2.png); background-position:-100px0;}01*6.1.2

布局搜索行③編輯屬性選擇器input[type="text"]，設(shè)置文本框向右浮動(dòng)；寬度為200px，高度和行高均為29px；邊框?yàn)?px實(shí)心線，顏色為#CACACA；左側(cè)內(nèi)邊距為10px。input[type="text"]{ float:right; width:200px; height:29px; line-height:29px; border:1pxsolid#CACACA; padding-left:10px;}④編輯偽類(lèi)選擇器input[type="button"]:hover，設(shè)置購(gòu)物車(chē)按鈕在鼠標(biāo)浮于其上方時(shí)顏色反顯。也就是設(shè)置圖片背景定位位置為向左移動(dòng)155px，向上移動(dòng)29px；文字顏色為#B91720（酒紅色）。代碼如下：input[type="button"]:hover{ background-position:-155px-29px; color:#B91720;}01*6.1.2

布局搜索行3.根據(jù)已學(xué)技術(shù)，對(duì)照效果圖實(shí)現(xiàn)熱門(mén)搜索行的布局。HTML文檔編輯操作：在居中的盒子中依次插入一個(gè)普通按鈕、一個(gè)提交按鈕（注意設(shè)置value屬性值為空字符串）和一個(gè)輸入框。代碼如下：【思考總結(jié)】（1）舉例說(shuō)明輸入框input的不同表現(xiàn)形式。（2）寫(xiě)出可以實(shí)現(xiàn)父元素被子元素自動(dòng)撐開(kāi)的CSS聲明。（3）舉例說(shuō)明背景圖片定位屬性的使用方法。【實(shí)訓(xùn)作業(yè)】（1）應(yīng)用<input>標(biāo)簽完善個(gè)人網(wǎng)站首頁(yè)布局。（2）利用背景圖片及其定位完善個(gè)人網(wǎng)站首頁(yè)布局。01*【實(shí)現(xiàn)目標(biāo)】首頁(yè)一級(jí)導(dǎo)航布局效果如圖6-1-1紅線框指示，在布局過(guò)程中需要注意一些問(wèn)題：（1）Logo圖片及一級(jí)導(dǎo)航欄元素向左浮動(dòng)；（2）除Logo圖片外，文字元素均為鏈接，且首頁(yè)鏈接index.html，其他文字鏈接一級(jí)列表頁(yè)bigClass.html；（3）除“首頁(yè)”外，其余文字元素的父元素左側(cè)均有邊框；（4）前面的兩個(gè)一級(jí)導(dǎo)航有絕對(duì)定位子元素，分別是NEW字樣圖片和HOT字樣圖片?！局R(shí)掃描】CSS相關(guān)知識(shí)點(diǎn)：相對(duì)定位和絕對(duì)定位。6.1.3

布局一級(jí)導(dǎo)航【實(shí)現(xiàn)步驟】使用develop-box類(lèi)布局一級(jí)導(dǎo)航。HTML文檔編輯操作：①在搜索行后面輸入develop-box類(lèi)盒子<div>；②在盒子內(nèi)部輸入圖片標(biāo)簽<img>，設(shè)置其id屬性為logo，圖片地址為img/logo.png；③繼續(xù)在盒子內(nèi)部輸入10個(gè)<div>標(biāo)簽，類(lèi)名皆為nav，然后在每個(gè)<div>中輸入一個(gè)<a>標(biāo)簽，并對(duì)照目標(biāo)效果修改其中文字，其中首頁(yè)鏈接地址為index.html，且所在div元素多加一個(gè)類(lèi)名navI，其他文字鏈接地址為布局一級(jí)導(dǎo)航01*bigClass.html。<divclass="develop-box"> <imgsrc="img/logo.png"alt=""id="logo"> <divclass="navnavI"><ahref="index.html">首頁(yè)</a></div> <divclass="nav"><ahref="bigClass.html">T恤</a></div> <divclass="nav"><ahref="bigClass.html">襯衫</a></div> <divclass="nav"><ahref="bigClass.html">襯衫</a></div> <divclass="nav"><ahref="bigClass.html">鞋</a></div> <divclass="nav"><ahref="bigClass.html">麻</a></div> <divclass="nav"><ahref="bigClass.html">水柔棉</a></div> <divclass="nav"><ahref="bigClass.html">褲裝</a></div> <divclass="nav"><ahref="bigClass.html">家具裝飾</a></div> <divclass="nav"><ahref="bigClass.html">私人定制</a></div></div>6.1.3

布局一級(jí)導(dǎo)航01*10個(gè)nav盒子可以通過(guò)在編輯區(qū)輸入以下代碼，并按【tab】鍵生成。小提示div[class="nav"]*10>a[href="bigClass.html"]{$}CSS文檔編輯操作：①編輯id選擇器logo，設(shè)置Logo圖片向左浮動(dòng)。②編輯類(lèi)選擇器nav，設(shè)置所有一級(jí)導(dǎo)航向左浮動(dòng)；寬度為101px，高度和行高均為24px；文本對(duì)齊方式為居中；上側(cè)外邊距為22px；左側(cè)邊框?yàn)?px實(shí)心線，顏色#808080；位置為相對(duì)定位，以便于其子元素相對(duì)于自身絕對(duì)定位。代碼如下：.nav{ float:left; width:101px; height:24px;6.1.3

布局一級(jí)導(dǎo)航01* line-height:24px; text-align:center; margin-top:22px; border-left:1pxsolid#808080; position:relative;}③編輯類(lèi)選擇器navI，設(shè)置首頁(yè)鏈接四周邊框均為0。代碼如下：.navI{border:0;}

2.為一級(jí)導(dǎo)航欄布局NEW字樣和HOT字樣絕對(duì)定位圖片。HTML文檔編輯操作：在T恤和襯衫所在<a>標(biāo)簽之后添加<img>標(biāo)簽，類(lèi)名為nav-active，圖片名稱(chēng)分別為new.png和hot.png。<divclass="nav"> <ahref="bigClass.html">T恤</a> <imgsrc="img/new.png"class="nav-active"alt=""></div>6.1.3

布局一級(jí)導(dǎo)航01*<divclass="nav"> <ahref="bigClass.html">襯衫</a> <imgsrc="img/hot.png"class="nav-active"alt=""></div>CSS文檔編輯操作：編輯類(lèi)選擇器nav-active，設(shè)置其相對(duì)于父元素絕對(duì)定位，距父元素右側(cè)邊框10px；距父元素上邊框?5px。.nav-active{ position:absolute; right:10px; top:-5px;}【思考總結(jié)】描述實(shí)現(xiàn)子元素相對(duì)于父元素絕對(duì)定位的方法?！緦?shí)訓(xùn)作業(yè)】利用定位屬性完善個(gè)人網(wǎng)站首頁(yè)布局。6.1.3

布局一級(jí)導(dǎo)航01*6.1.4

布局banner圖【實(shí)現(xiàn)目標(biāo)】首頁(yè)banner布局效果如圖6-1-2，在布局過(guò)程中需要注意一些問(wèn)題：（1）banner圖片一共有7張，但默認(rèn)第一張顯示，其他隱藏。（2）banner圖上有左右兩個(gè)按鈕，默認(rèn)為灰色，當(dāng)鼠標(biāo)移上時(shí)為酒紅色。（3）banner圖上有下方圓形按鈕，數(shù)量同banner圖，默認(rèn)為灰色，顯示對(duì)應(yīng)圖片時(shí)為酒紅色。布局banner圖圖6-1-2首頁(yè)banner效果01*6.1.4

布局banner圖【知識(shí)掃描】CSS相關(guān)知識(shí)點(diǎn)：（1）內(nèi)聯(lián)樣式；（2）邊框圓角border-radius。【實(shí)現(xiàn)步驟】使用類(lèi)develop-box盒子布局banner圖。1.HTML文檔編輯操作：在develop-box內(nèi)嵌套7個(gè)圖片標(biāo)簽，并設(shè)置它們的類(lèi)名為banner，圖片名稱(chēng)分別為ban1.jpg、ban2.jpg、……、ban7.jpg。<divclass="develop-box"> <imgsrc="img/ban1.jpg"alt=""class="banner"> <imgsrc="img/ban2.jpg"alt=""class="banner"> <imgsrc="img/ban3.jpg"alt=""class="banner"> <imgsrc="img/ban4.jpg"alt=""class="banner"> <imgsrc="img/ban5.jpg"alt=""class="banner"> <imgsrc="img/ban6.jpg"alt=""class="banner"> <imgsrc="img/ban7.jpg"alt=""class="banner"></div>01*6.1.4

布局banner圖在第1個(gè)<img>標(biāo)簽中添加行內(nèi)樣式，設(shè)置相應(yīng)圖片默認(rèn)顯示。<imgsrc="img/ban1.jpg"alt=""style="display:block;"class="banner">CSS文檔編輯操作：編輯類(lèi)選擇器banner，設(shè)置圖片寬度為1200px，高度為535px，默認(rèn)不顯示。.banner{ width:1200px; height:535px; display:none;}布局左右按鈕。HTML文檔編輯操作：在banner圖所在類(lèi)名為develop-box的<div>標(biāo)簽中添加兩個(gè)<div>，并設(shè)置它們的公共類(lèi)名為btn，不同類(lèi)名分別為left-btn和right-btn。<divclass="btnleft-btn"></div><divclass="btnright-btn"></div>

01*6.1.4

布局banner圖CSS文檔編輯操作：①編輯公共類(lèi)btn選擇器，設(shè)置元素寬度為40px，高度為60px；背景圖片為direction.png；相對(duì)于父元素develop-box絕對(duì)定位，距離其上邊框235px。.btn{ width:40px; height:60px; background-image:url(../img/direction.png); position:absolute; top:235px;}此時(shí)需要在類(lèi)選擇器develop-box樣式表中添加相對(duì)定位屬性。小提示01*6.1.4

布局banner圖②編輯左側(cè)按鈕類(lèi)選擇器left-btn，設(shè)置元素背景圖片定位屬性為00；絕對(duì)定位尺寸為距父元素左側(cè)40px。.left-btn{ background-position:00; left:40px;}③編輯右側(cè)按鈕類(lèi)選擇器right-btn，設(shè)置元素背景圖片定位屬性向左偏移40px；絕對(duì)定位尺寸為距父元素右側(cè)40px。.right-btn{ background-position:-40px0; right:40px;}01*6.1.4

布局banner圖④編輯當(dāng)鼠標(biāo)置于左側(cè)按鈕上方時(shí)的偽類(lèi)選擇器，設(shè)置屆時(shí)元素背景圖片定位尺寸為向上偏移60px。.left-btn:hover{background-position:0-60px;}⑤編輯當(dāng)鼠標(biāo)置于右側(cè)按鈕上方時(shí)的偽類(lèi)選擇器，設(shè)置元素屆時(shí)背景圖片定位尺寸為向左偏移40px，向上偏移60px。.right-btn:hover{background-position:-40px-60px;}3.布局下方按鈕。HTML文檔編輯操作：在banner圖所在develop-box盒子末尾嵌套一個(gè)類(lèi)名為btns-box的<div>標(biāo)簽，然后在其中嵌套7個(gè)類(lèi)名為btns的<div>標(biāo)簽，并使用內(nèi)聯(lián)樣式設(shè)置第1個(gè)btns背景顏色為酒紅色#B91720。CSS文檔編輯操作：編輯類(lèi)選擇器btns-box，設(shè)置選擇器寬度為210px，高度為20px；相對(duì)于父元素絕對(duì)定位，距其下邊框50px；設(shè)置外邊距為自動(dòng)，即相對(duì)父元素水平居中；左偏移和右偏移均為0。01*6.1.4

布局banner圖.btns-box{ width:210px; height:20px; position:absolute; bottom:50px; margin:auto; left:0; right:0;}編輯類(lèi)選擇器btns，設(shè)置選擇器寬度為20px，高度為20px；向左浮動(dòng)；左右外邊距均為5px；邊框圓角為50%；背景顏色為#888。.btns{ width:20px; height:20px; float:left;

01*6.1.4

布局banner圖

margin:05px; border-radius:50%;

background:#888;}【思考總結(jié)】（1）舉例說(shuō)明內(nèi)聯(lián)樣式的使用方法。（2）舉例說(shuō)明標(biāo)簽邊框圓角的設(shè)置方法。【實(shí)訓(xùn)作業(yè)】布局個(gè)人網(wǎng)站首頁(yè)中的banner。01*6.1.5

布局商品展示區(qū)【實(shí)現(xiàn)目標(biāo)】首頁(yè)商品展示區(qū)布局效果如圖6-1-3（經(jīng)典布局）和圖6-1-4（普通布局）所示。在布局過(guò)程中需要注意一些問(wèn)題：（1）每一組商品信息結(jié)構(gòu)均為上下結(jié)構(gòu)，且下方文字區(qū)域高度為70px；（2）經(jīng)典布局左中右區(qū)域的寬度分別為590px、290px、286px；（3）經(jīng)典布局左右圖片和普通布局圖片高度均為440px；（4）經(jīng)典布局中部區(qū)域的上下圖片高度分別為175px和180px。布局商品展示區(qū)圖6-1-3首頁(yè)商品展示區(qū)域經(jīng)典布局圖6-1-4首頁(yè)商品展示區(qū)域普通布局01*6.1.5

布局商品展示區(qū)【知識(shí)掃描】（1）強(qiáng)化前面HTML標(biāo)簽的相關(guān)知識(shí)點(diǎn)。（2）CSS相關(guān)知識(shí)點(diǎn)：①?gòu)椥圆季謋lex屬性；②后代選擇器?！緦?shí)現(xiàn)步驟】用類(lèi)為develop-box的<div>標(biāo)簽構(gòu)建經(jīng)典布局區(qū)域的左中右布局。HTML文檔編輯操作：①在banner區(qū)域之后輸入develop-box盒子，在其中插入商品展示區(qū)標(biāo)題圖片。<divclass="develop-box"> <imgsrc="img/huo1.jpg"alt=""></div>②在標(biāo)題圖片之后添加develop-box盒子，并為其添加類(lèi)名showA，然后在其中嵌套左中右三個(gè)<div>。01*6.1.5

布局商品展示區(qū)<divclass="develop-boxshowA"> <divclass="showA-left"></div> <divclass="showA-middle"></div> <divclass="showA-right"></div></div>CSS文檔編輯操作：①編輯類(lèi)選擇器showA，設(shè)置顯示方式為彈性布局flex。.showA{

display:flex;

}②編輯類(lèi)選擇器showA-left，設(shè)置寬度為590px，高度為510px；右側(cè)外邊距為17px；臨時(shí)背景顏色為粉色。.showA-left{ width:590px; height:510px;01*margin-right:17px; background:pink;}③編輯類(lèi)選擇器showA-middle，設(shè)置寬度為290px，高度為510px；臨時(shí)背景顏色為粉色。.showA-middle{ width:290px; height:510px; background:pink;}④編輯類(lèi)選擇器showA-right，設(shè)置寬度為286px，高度為510px；左側(cè)外邊距為17px；臨時(shí)背景顏色為粉色。.showA-right{ width:286px; height:510px;6.1.5

布局商品展示區(qū)01*

margin-left:17px; background:pink;}此時(shí)經(jīng)典布局區(qū)域效果如圖6-1-5所示。圖6-1-5商品展示區(qū)經(jīng)典布局區(qū)域中間效果12.將經(jīng)典布局區(qū)域中間的盒子布局為上下結(jié)構(gòu)。HTML文檔編輯操作：在經(jīng)典布局區(qū)域中間的盒子內(nèi)部嵌套上下兩個(gè)<div>標(biāo)簽，并設(shè)置類(lèi)名分別為showA-top和showA-bottom。<divclass="showA-middle">

<divclass="showA-top"></div> <divclass="showA-bottom"></div></div>6.1.5

布局商品展示區(qū)01*CSS文檔編輯操作：①編輯類(lèi)選擇器showA-top，設(shè)置其寬度為290px，高度為245px；下方外邊距為15px；臨時(shí)性背景顏色為blue。.showA-top{ width:290px; height:245px; margin-bottom:15px; background:blue;}②編輯類(lèi)選擇器showA-bottom，設(shè)置其寬度為290px，高度為250px；臨時(shí)性背景顏色為blue。.showA-bottom{ width:290px;6.1.5

布局商品展示區(qū)01* height:250px; background:blue;}此時(shí)經(jīng)典布局區(qū)域效果如圖6-1-6所示。圖6-1-6商品展示區(qū)經(jīng)典布局區(qū)域中間效果26.1.5

布局商品展示區(qū)2.布局單個(gè)商品區(qū)域。HTML文檔編輯操作：①在類(lèi)元素showA-left內(nèi)部嵌套一個(gè)<img>標(biāo)簽，圖片為huo1-1.jpg；②在類(lèi)元素showA-left內(nèi)部繼續(xù)嵌套一個(gè)<div>標(biāo)簽，并設(shè)置其類(lèi)名為show-font；③在類(lèi)元素show-font內(nèi)部輸入兩個(gè)<div>標(biāo)簽，并設(shè)置其類(lèi)名分別為show-fontL和show-fontR。<divclass="showA-left"> <imgsrc="img/huo1-1.jpg"alt=""> <divclass="show-font">

<divclass="show-fontL">商品名稱(chēng)</div> <divclass="show-fontR">￥233.00</div> </div></div>01*6.1.5

布局商品展示區(qū)CSS文檔編輯操作：①編輯類(lèi)選擇器show-font，設(shè)置其寬度為100%，高度和行高均為70px；左右下邊框?yàn)?px實(shí)心線，顏色為#C7C7C7。.show-font{ width:100%; height:70px; line-height:70px; border:1pxsolid#C7C7C7; border-top:0;}②編輯類(lèi)選擇器show-fontL，設(shè)置其向左浮動(dòng)；左側(cè)內(nèi)邊距為30px。.show-fontL{ float:left; padding-left:30px;}01*6.1.5

布局商品展示區(qū)③編輯類(lèi)選擇器show-fontR，設(shè)置其向右浮動(dòng)；右側(cè)內(nèi)邊距為30px；文字顏色為酒紅色。.show-fontR{ float:right; padding-right:30px; color:#B91720;}④編輯類(lèi)showA的后代img選擇器，設(shè)置其垂直方向頂端對(duì)齊，可消除圖片與其相鄰元素之間的間隙。.showAimg{ vertical-align:top;}此時(shí)，經(jīng)典布局區(qū)域效果如圖6-1-7所示。圖6-1-7商品展示區(qū)經(jīng)典布局區(qū)域中間效果301*6.1.5

布局商品展示區(qū)4.復(fù)制單個(gè)商品區(qū)域的結(jié)構(gòu)代碼到合理位置。HTML文檔編輯操作：復(fù)制步驟3粗斜體部分元素結(jié)構(gòu)代碼分別至類(lèi)元素showA-top、showA-bottom、showA-right中，并依次修改圖片名稱(chēng)為huo1-2.jpg、huo1-3.jpg、huo1-4.jpg；然后將經(jīng)典布局區(qū)域的臨時(shí)性背景顏色去掉。此時(shí)就完成了經(jīng)典布局區(qū)域的制作。5.構(gòu)建商品展示區(qū)普通布局。HTML文檔編輯操作：繼續(xù)添加一個(gè)類(lèi)名為develop-box的<div>，并為其添加類(lèi)名showB；然后在其中嵌套4個(gè)<div>標(biāo)簽，并設(shè)置它們的類(lèi)名為showB-box。<divclass="develop-boxshowB"> <divclass="showB-box"></div> <divclass="showB-box"></div> <divclass="showB-box"></div> <divclass="showB-box"></div></div>01*6.1.5

布局商品展示區(qū)CSS文檔編輯操作：編輯showB類(lèi)選擇器，設(shè)置其顯示方式為彈性布局flex。.showB{display:flex;}編輯showB-box類(lèi)選擇器，設(shè)置其寬度為285px，高度為510px；左側(cè)外邊距為8px，右側(cè)外邊距為7px；臨時(shí)性背景顏色為粉色。.showB-box{ width:285px; height:510px; margin:07px08px; background:pink;}此時(shí)普通布局區(qū)域效果如圖6-1-8所示。圖6-1-8商品展示區(qū)普通布局區(qū)域中間效果01*6.1.5

布局商品展示區(qū)6.完善普通布局。HTML文檔編輯操作：復(fù)制步驟3單個(gè)商品結(jié)構(gòu)至4個(gè)showB-box中，并依次修改圖片名稱(chēng)為huo4-9.jpg、huo4-10.jpg、huo4-11.jpg、huo4-12.jpg。CSS文檔編輯操作：編輯showB后代選擇器img，設(shè)置其垂直對(duì)齊方式為頂端對(duì)齊，如showA中類(lèi)似操作。此時(shí)就完成了普通布局區(qū)域的制作?！舅伎伎偨Y(jié)】（1）舉例說(shuō)明彈性布局子元素的方法。（2）舉例說(shuō)明消除圖片與相鄰元素之間縫隙的方法。【實(shí)訓(xùn)作業(yè)】利用彈性布局構(gòu)建首頁(yè)商品列表區(qū)域。01*6.1.6

布局腳部與返回頂部按鈕【實(shí)現(xiàn)目標(biāo)】首頁(yè)腳部和返回頂部效果如圖6-1-9所示。在布局過(guò)程中需要注意一些問(wèn)題：（1）腳部最底端左側(cè)5個(gè)圖片元素是用同一張背景圖片back.png實(shí)現(xiàn)的；（2）腳部最底端右側(cè)圖片為獨(dú)立的一張圖片yq6.png；（3）返回頂部區(qū)域的三個(gè)元素由同一張圖片fix.png實(shí)現(xiàn)；（4）返回頂部區(qū)域所在圖片為固定定位的<div>標(biāo)簽，“下載APP”和“在線客服”為鏈接標(biāo)簽?！局R(shí)掃描】（1）HTML相關(guān)知識(shí)點(diǎn)：空鏈接的設(shè)置。（2）CSS相關(guān)知識(shí)點(diǎn)：①固定定位；②透明度。【實(shí)現(xiàn)步驟】本節(jié)除固定定位圖片元素為主要講解內(nèi)容之外，其他腳部相關(guān)布局由學(xué)生根據(jù)已學(xué)技術(shù)獨(dú)立完成。圖6-1-9腳部與返回頂部按鈕布局效果01*6.1.5

布局商品展示區(qū)1.布局固定定位圖片。HTML文檔編輯操作：在<body>標(biāo)簽?zāi)┪睬短滓粋€(gè)<div>標(biāo)簽，設(shè)置其id屬性值為fix-box。CSS文檔編輯操作：編輯id選擇器fix-box，設(shè)置其寬度為75px，高度為205px；背景圖片為fix.png；相對(duì)于瀏覽器窗口固定定位，距瀏覽器右側(cè)50px，下邊框50px。#fix-box{ width:75px; height:205px; background-image:url(../img/fix.png); position:fixed; right:50px; bottom:50px;}01*6.1.5

布局商品展示區(qū)2.布局三個(gè)子元素。為了使一張圖片的三個(gè)區(qū)域分別實(shí)現(xiàn)不同的功能，在id為fix-box的<div>標(biāo)簽內(nèi)嵌套兩個(gè)<a>標(biāo)簽和一個(gè)<div>標(biāo)簽。HTML文檔編輯操作：在id為fix-box的<div>標(biāo)簽內(nèi)嵌套兩個(gè)<a>標(biāo)簽，id屬性值分別為fix-app和fix-cust，href屬性值均為空。<ahref=""id="fix-app"></a><ahref=""id="fix-cust"></a>在上方的<a>標(biāo)簽下方接著嵌套一個(gè)<div>標(biāo)簽，并設(shè)置其id屬性值為fix-backTop。<divid="fix-backTop"></div>CSS文檔編輯操作：①編輯id選擇器fix-app，設(shè)置其顯示為塊元素；臨時(shí)性背景色為紅色；寬度為75px，高度為77px；透明度為0.5。#fix-app{01*6.1.5

布局商品展示區(qū)

display:block; background:red; width:75px; height:77px; opacity:0.5;}②編輯id選擇器fix-cust，設(shè)置其顯示為塊元素；臨時(shí)性背景色為黃色；寬度為75px，高度為73px；透明度為0.5。#fix-cust{ display:block; background:yellow; width:75px; height:73px; opacity:0.5;}此處設(shè)置背景色和透明度是為了有效控制元素的位置和大小，從而使客戶在使用功能時(shí)不易出現(xiàn)點(diǎn)擊錯(cuò)誤。小提示01*6.1.5

布局商品展示區(qū)

③編輯id選擇器fix-backTop，設(shè)置其臨時(shí)性背景色為藍(lán)色；寬度為75px，高度為55px；透明度為0.5。#fix-backTop{ background:blue; width:75px; height:55px; opacity:0.5;}此時(shí)返回頂部區(qū)域效果如圖6-1-10所示。最終將臨時(shí)性背景色和透明度去掉即可。 圖6-1-10返回頂部區(qū)域中間效果【思考總結(jié)】（1）寫(xiě)出空鏈接實(shí)現(xiàn)的三種方法。（2）寫(xiě)出透明度屬性的用法?！緦?shí)訓(xùn)作業(yè)】完成首頁(yè)返回頂部元素布局。02*02實(shí)現(xiàn)首頁(yè)人機(jī)交互效果02*6.2.1

微信二維碼的顯示與隱藏【實(shí)現(xiàn)目標(biāo)】瀏覽開(kāi)發(fā)者網(wǎng)站首頁(yè)，單擊頭部微信圖標(biāo)時(shí)顯示微信二維碼，為用戶提供掃碼登錄網(wǎng)站的功能，如圖6-2-1所示；當(dāng)再次單擊微信圖標(biāo)時(shí)，可隱藏微信二維碼。圖6-2-1奇數(shù)次單擊微信圖標(biāo)時(shí)微信二維碼顯示效果【知識(shí)掃描】（1）HTML文檔關(guān)聯(lián)JS文件的方法。（2）JS相關(guān)知識(shí)點(diǎn)：①定義變量的方法；②通過(guò)id屬性獲取元素；③通過(guò)類(lèi)屬性獲取元素組；④通過(guò)元素的style屬性控制元素樣式變化；⑤函數(shù)的定義和調(diào)用?！倦y點(diǎn)分析】單擊微信圖標(biāo)顯示二維碼，以及再次單擊微信圖標(biāo)隱藏二維碼功能的實(shí)現(xiàn)，應(yīng)使用開(kāi)關(guān)原理，即定義一個(gè)開(kāi)關(guān)變量跟蹤二維碼顯示隱藏狀態(tài)。本任務(wù)中采用開(kāi)關(guān)值為0跟蹤二維碼隱藏狀態(tài)，開(kāi)關(guān)值為1跟蹤二維碼顯示狀態(tài)。02*1.創(chuàng)建index.js文件，并由index.html關(guān)聯(lián)。在developer站點(diǎn)目錄中創(chuàng)建js目錄，使用軟件創(chuàng)建JS文件index.js并保存在js目錄中，在index.html的head標(biāo)簽中嵌套<script>標(biāo)簽，關(guān)聯(lián)index.js，注意相對(duì)路徑的設(shè)置。<scriptlanguage="javascript"src="js/index.js"></script>在index.js中輸入下方代碼后，使用Google瀏覽器瀏覽index.html，在頁(yè)面上單擊右鍵選擇“檢查”，在打開(kāi)的界面中選擇“Console”選項(xiàng)卡，觀察控制臺(tái)是否輸出1，如圖6-2-2所示。此操作的目的是驗(yàn)證HTML文檔與JS文檔的有效關(guān)聯(lián)。console.log(1);【實(shí)現(xiàn)步驟】圖6-2-2控制臺(tái)測(cè)試效果測(cè)試成功后將上述代碼刪除。小提示6.2.1

微信二維碼的顯示與隱藏02*2.在index.js中輸入窗口加載事件。

window.onload=function(){ 此處輸入后續(xù)步驟所述JS相關(guān)代碼。 }3.在加載事件中定義變量weiXin。通過(guò)類(lèi)名捕獲類(lèi)名為head的元素組，將其中下標(biāo)為1的元素賦值給變量weiXin。

varweiXin=document.getElementsByClassName("head")[1];

4.在HTML微信圖片之后插入二維碼圖片（圖片名稱(chēng)為erWei.jpg），并設(shè)置其id屬性為erWei。

<imgsrc="img/erWei.jpg"id="erWei"alt="">5.在index.css中合適位置定義二維碼樣式表，設(shè)置其相對(duì)于父元素絕對(duì)定位，距父元素上方31px，右側(cè)0px；寬度和高度均為100px；圖層數(shù)為2。#erWei{ position:absolute; top:31px;【實(shí)現(xiàn)步驟】6.2.1

微信二維碼的顯示與隱藏02* right:0; width:100px; height:100px; z-index:2;}此時(shí)，網(wǎng)站頭部效果如圖6-2-1所示。為實(shí)現(xiàn)二維碼相對(duì)于父元素絕對(duì)定位，需要將類(lèi)選擇器head設(shè)置為相對(duì)定位。小提示6.在窗口加載事件中定義變量erWei，并通過(guò)id屬性捕捉二維碼元素，將捕獲到的元素賦值給erWei變量，然后通過(guò)style屬性設(shè)置二維碼隱藏。varerWei=document.getElementById("erWei");erWei.style.display="none";7.初始化跟蹤二維碼顯示/隱藏的開(kāi)關(guān)flag，初始值為0，即隱藏。varflag=0;6.2.1

微信二維碼的顯示與隱藏02*測(cè)試成功后將控制臺(tái)輸出語(yǔ)句刪除。小提示8.定義weiXin對(duì)象的單擊事件，觸發(fā)控制臺(tái)輸出“weiXin”字樣。weiXin.onclick=function(){ consolo.log("weiXin"); }此時(shí)如果代碼正確，單擊微信圖標(biāo)時(shí)，控制臺(tái)輸出“weiXin”。9.編輯weiXin對(duì)象單擊事件，觸發(fā)內(nèi)容為，當(dāng)二維碼顯示/隱藏跟蹤開(kāi)關(guān)為0時(shí)，設(shè)置erWei對(duì)象顯示，開(kāi)關(guān)flag為1；否則設(shè)置erWei對(duì)象隱藏，開(kāi)關(guān)flag為0。if(flag==0){ erWei.style.display="block"; flag=1;}else{6.2.1

微信二維碼的顯示與隱藏02*

erWei.style.display="none"; flag=0;}10.創(chuàng)建自定義函數(shù)庫(kù)文件js/fun.js，封裝微信二維碼顯示/隱藏函數(shù)。為了將首頁(yè)中的互動(dòng)功能很方便地應(yīng)用于其他頁(yè)面，可以將其封裝成函數(shù)。首先創(chuàng)建js/fun.js，并在index.html中關(guān)聯(lián)fun.js；然后在fun.js中創(chuàng)建函數(shù)weiXin()，并將index.js實(shí)現(xiàn)二維碼顯示/隱藏的代碼剪切粘貼到函數(shù)體中。functionweiXin(){ 步驟6-9相關(guān)代碼。}刪除index.js中微信二維碼顯示/隱藏相關(guān)代碼，并輸入調(diào)用函數(shù)weiXin()相關(guān)代碼。weiXin();6.2.1

微信二維碼的顯示與隱藏02*【思考總結(jié)】（1）請(qǐng)列舉JS獲取DOM元素的幾種方法。（2）請(qǐng)舉例說(shuō)明開(kāi)關(guān)原理。（3）請(qǐng)說(shuō)明封裝函數(shù)的方法和意義?！緦?shí)訓(xùn)作業(yè)】在個(gè)人網(wǎng)站首頁(yè)中實(shí)現(xiàn)某DOM元素的顯示/隱藏效果。6.2.1

微信二維碼的顯示與隱藏02*6.2.2

二級(jí)導(dǎo)航的插入與選項(xiàng)卡效果【實(shí)現(xiàn)目標(biāo)】為一級(jí)導(dǎo)航欄插入二級(jí)導(dǎo)航，并實(shí)現(xiàn)選項(xiàng)卡效果。當(dāng)鼠標(biāo)移至一級(jí)導(dǎo)航欄時(shí)，相應(yīng)的二級(jí)導(dǎo)航顯示，如圖6-2-3和圖6-2-4所示為鼠標(biāo)移至不同一級(jí)導(dǎo)航項(xiàng)效果；當(dāng)鼠標(biāo)離開(kāi)一級(jí)導(dǎo)航欄時(shí)，二級(jí)導(dǎo)航隱藏，如圖6-2-5所示。圖6-2-3鼠標(biāo)移至一級(jí)導(dǎo)航欄效果圖1圖6-2-4鼠標(biāo)移至一級(jí)導(dǎo)航欄效果圖2圖6-2-5鼠標(biāo)離開(kāi)一級(jí)導(dǎo)航欄效果02*【知識(shí)掃描】（1）CSS3相關(guān)知識(shí)點(diǎn)：當(dāng)鼠標(biāo)移至父元素上，子元素顯示。（2）JS相關(guān)知識(shí)點(diǎn)：①數(shù)組的定義和數(shù)組元素個(gè)數(shù)的獲?。虎跀?shù)組元素的遍歷；③for語(yǔ)句。（3）JQuery相關(guān)知識(shí)點(diǎn)：①JQuery文件的關(guān)聯(lián)；②使用JQuery方法創(chuàng)建元素和獲取元素；③使用JQuery獲取同類(lèi)元素的第n個(gè)元素；④子元素追加到父元素的方法；⑤父元素追加子元素的方法；⑥字符串連接變量的方法。【實(shí)現(xiàn)步驟】1.在index.html中編輯二級(jí)導(dǎo)航。在一級(jí)導(dǎo)航欄<a>元素“T恤”之后布局<div>元素，并設(shè)置其類(lèi)名為nav2-box。在nav2內(nèi)部輸入3個(gè)<a>標(biāo)簽，并設(shè)置它們的類(lèi)名為nav2。2.在index.css中編輯相關(guān)樣式。編輯類(lèi)選擇器nav2-box，設(shè)置其寬度為101px，高度為auto；溢出屬性為hidden；定位屬性為絕對(duì)定位，距父元素上方24px；頂部邊框?yàn)?px實(shí)心線，顏色為#B91720；背景顏色為#fff；圖層數(shù)為1。6.2.2

二級(jí)導(dǎo)航的插入與選項(xiàng)卡效果02*.nav2-box{ width:101px; height:auto; overflow:hidden; position:absolute; top:24px; border-top:3pxsolid#B91720; background:#fff; z-index:1;}此時(shí)運(yùn)行網(wǎng)頁(yè)，可以發(fā)現(xiàn)二級(jí)導(dǎo)航無(wú)法顯示，原因是一級(jí)導(dǎo)航欄所在盒子develop-box設(shè)置了溢出屬性為hidden。所以將一級(jí)導(dǎo)航欄所在盒子類(lèi)名修改為nav-box，并編輯其樣式表，設(shè)置其寬度為1200px，高度為46px；相對(duì)于父元素水平居中，且上方外邊距為20px。6.2.2

二級(jí)導(dǎo)航的插入與選項(xiàng)卡效果02*.nav-box{ width:1200px; height:46px; margin:20pxauto0;}在布局完成之后，將HTML端nav2-box類(lèi)元素刪除。小提示3.在index.html中關(guān)聯(lián)JQuery文件。首先將jquery-1.12.1.js復(fù)制到站點(diǎn)js目錄中，然后在index.html文檔head部分添加script標(biāo)簽關(guān)聯(lián)jquery-1.12.1.js文件。<script

language="javascript"src="js/jquery-1.12.1.js"></script>4.創(chuàng)建nav2()函數(shù)，為一級(jí)導(dǎo)航欄插入二級(jí)導(dǎo)航。①在fun.js中創(chuàng)建nav2()函數(shù)。functionnav2(){}6.2.2

二級(jí)導(dǎo)航的插入與選項(xiàng)卡效果02*同時(shí)在index.js窗口加載事件中調(diào)用函數(shù)nav2()。nav2();②在nav2()函數(shù)中初始化字符串二維數(shù)組str，存放二級(jí)導(dǎo)航名稱(chēng)。varstr=[["v領(lǐng)T恤","圓領(lǐng)T恤","翻領(lǐng)T恤"], ["純色襯衫","花色襯衫","韓版襯衫"], ["輕薄羽絨服","羽絨馬甲","長(zhǎng)款羽絨服","面包羽絨服"], ["運(yùn)動(dòng)鞋","休閑鞋","皮鞋","馬丁靴"], ["麻質(zhì)上衣","麻褲"], ["羊絨衫","羊毛衫","棉線衫"], ["牛仔褲","運(yùn)動(dòng)褲","休閑褲"], ["床","衣柜","櫥柜","洗浴用具"], ["定制西裝","定制家具","定制首飾"]];6.2.2

二級(jí)導(dǎo)航的插入與選項(xiàng)卡效果02*③通過(guò)for語(yǔ)句創(chuàng)建9個(gè)類(lèi)元素nav2Box，類(lèi)名為nav2-box，并追加到相應(yīng)的一級(jí)導(dǎo)航欄類(lèi)元素nav中。for(vari=0;i<9;i++){ varnav2Box=$("<divclass='nav2-box'></div>"); 后續(xù)5）代碼塊 $(".nav:eq("+(i+1)+")").append(nav2Box); }④通過(guò)for語(yǔ)句創(chuàng)建和二級(jí)導(dǎo)航欄相對(duì)應(yīng)的子元素nav2，類(lèi)名為nav2，元素類(lèi)型為a，內(nèi)容為數(shù)組str對(duì)應(yīng)的值。并將nav2追加到對(duì)象nav2Box中。for(varj=0;j<str[i].length;j++){ varnav2=$("<ahref='smallClass.html'class='nav2'>"+str[i][j]+"</a>"); nav2.appendTo(nav2Box);}6.2.2

二級(jí)導(dǎo)航的插入與選項(xiàng)卡效果02*5.使用CSS樣式表實(shí)現(xiàn)選項(xiàng)卡效果。在index.css中完成以下工作：①設(shè)置類(lèi)nav2-box顯示方式為隱藏；②定義鼠標(biāo)置于nav上方時(shí)，nav2-box顯示方式為塊形式。.nav:hover.nav2-box{display:block;}【思考總結(jié)】（1）CSS實(shí)現(xiàn)選項(xiàng)卡效果的方法。（2）舉例說(shuō)明數(shù)組的定義方法和元素遍歷方法。（3）舉例說(shuō)明使用JQuery創(chuàng)建元素，追加元素到父元素，追加子元素的方法。【實(shí)訓(xùn)作業(yè)】在個(gè)人網(wǎng)站首頁(yè)中實(shí)現(xiàn)二級(jí)導(dǎo)航加載和選項(xiàng)卡效果。6.2.2

二級(jí)導(dǎo)航的插入與選項(xiàng)卡效果02*【實(shí)現(xiàn)目標(biāo)】（1）當(dāng)在窗口中加載首頁(yè)時(shí)，banner區(qū)域輪播圖自動(dòng)自左向右輪播，且當(dāng)前圖片對(duì)應(yīng)的按鈕背景色為酒紅色，如圖6-2-6和圖6-2-7所示。（2）當(dāng)鼠標(biāo)移至banner區(qū)域時(shí)，輪播圖停止。（3）用鼠標(biāo)單擊左側(cè)按鈕，輪播圖向左輪播；用鼠標(biāo)單擊右側(cè)按鈕，輪播圖向右輪播。（4）用鼠標(biāo)單擊下方按鈕，顯示對(duì)應(yīng)的輪播圖。6.2.3

banner圖輪播效果實(shí)現(xiàn)圖6-2-6輪播圖按鈕凸顯與圖片對(duì)應(yīng)效果1圖6-2-7輪播圖按鈕凸顯與圖片對(duì)應(yīng)效果202*【知識(shí)掃描】（1）JS相關(guān)知識(shí)點(diǎn)：①時(shí)間間隔函數(shù)；②清除時(shí)間間隔對(duì)象。（2）JQuery相關(guān)知識(shí)點(diǎn)：①JQuery控制DOM元素樣式；②獲取當(dāng)前元素在同類(lèi)元素中的序號(hào)；③JQuery中的鼠標(biāo)單擊事件，鼠標(biāo)浮于上方事件，鼠標(biāo)離開(kāi)元素事件?！緦?shí)現(xiàn)步驟】1.在fun.js中創(chuàng)建并編輯函數(shù)btns(m)，實(shí)現(xiàn)動(dòng)態(tài)插入m個(gè)按鈕。在函數(shù)中循環(huán)m次，每次創(chuàng)建一個(gè)類(lèi)名為btns的<div>元素，并追加到下方按鈕盒子btns-box。設(shè)置按鈕盒子的寬度為m*30像素。完整的JS代碼如下：functionbtns(m){ for(vari=0;i<m;i++){ varbtns=$("<divclass='btns'></div>"); btns.appendTo(".btns-box"); }6.2.3

banner圖輪播效果實(shí)現(xiàn)02*

$(".btns-box").css({"width":m*30+"px"});}最后將HTML文檔中所有類(lèi)名為btns的元素刪除。2.在fun.js中創(chuàng)建并編輯函數(shù)banner(n)，作用是顯示第n張banner圖和突出下方的第n個(gè)按鈕。functionbanner(n){ $(".banner").css({"display":"none"}); $(".banner:eq("+n+")").css({"display":"block"}); $(".btns").css({"background":"#CCC"}); $(".btns:eq("+n+")").css({"background":"#B91720"});}6.2.3

banner圖輪播效果實(shí)現(xiàn)在實(shí)際應(yīng)用中，banner圖的數(shù)量并不是固定的，因此下方按鈕數(shù)量也不是固定的，而是應(yīng)該根據(jù)banner圖的數(shù)量插入相同數(shù)量的按鈕。因此需要定義該函數(shù)。小提示02*3.在fun.js中創(chuàng)建函數(shù)lunbo()，作用是實(shí)現(xiàn)輪播圖所有效果。在lunbo()函數(shù)中初始化n=0，調(diào)用banner(n)。同時(shí)在index.js中調(diào)用該函數(shù)。varn=0;banner(n);4.在lunbo()函數(shù)中定義m變量的值為banner圖的數(shù)量，同時(shí)在下方插入m個(gè)按鈕。varm=$(".banner").length;btns(m);在lunbo()函數(shù)中定義left()函數(shù)，實(shí)現(xiàn)n值減一變化；并設(shè)置在n=0時(shí)，n的值變?yōu)閙-1，即最后一張banner圖的下標(biāo)值；之后再次調(diào)用banner(n)。functionleft(){if(n==0){ n=m-1;}else{6.2.3

banner圖輪播效果實(shí)現(xiàn)02* n--;}banner(n);}

6.在lunbo()函數(shù)中定義左側(cè)按鈕單擊事件，實(shí)現(xiàn)向左翻banner圖。$(".left-btn").click(function(){left();})7.在lunbo()函數(shù)中定義right()函數(shù)，實(shí)現(xiàn)n值加一變化；并設(shè)置在n=m-1時(shí)，n的值變?yōu)?，即第一張banner圖的下標(biāo)值；之后再次調(diào)用banner(n)。functionright(){ if(n==m-1){ n=0; }else{ n++; } banner(n); }6.2.3

banner圖輪播效果實(shí)現(xiàn)02*8.在lunbo()函數(shù)中定義右側(cè)按鈕單擊事件，實(shí)現(xiàn)向右翻banner圖效果。$(".right-btn").click(function(){right();})9.在lunbo()函數(shù)中使用時(shí)間間隔函數(shù)實(shí)現(xiàn)每隔1000ms，右翻一張banner圖，并將函數(shù)賦值給變量c。varc=setInterval(function(){right();},1000);10.在lunbo()函數(shù)中定義當(dāng)鼠標(biāo)移至banner圖區(qū)域時(shí)，自動(dòng)輪播停止。$(".banner").mouseover(function(){clearInterval(c)});

11.在lunbo()函數(shù)中定義當(dāng)鼠標(biāo)離開(kāi)banner圖區(qū)域時(shí)，自動(dòng)輪播啟動(dòng)。 $(".banner").mouseout(function(){ c=setInterval(function(){right();},1000); })12.在lunbo()函數(shù)中定義當(dāng)鼠標(biāo)單擊下方按鈕時(shí)，獲取按鈕序號(hào)值index并賦值給n，顯示相應(yīng)的banner圖。6.2.3

banner圖輪播效果實(shí)現(xiàn)02*$(".btns").click(function(){ n=$(this).index(".btns"); banner(n); })【思考總結(jié)】（1）舉例說(shuō)明時(shí)間間隔函數(shù)的使用方法。（2）舉例說(shuō)明清除時(shí)間間隔對(duì)象的方法。（3）舉例說(shuō)明JQuery事件的定義方法。【實(shí)訓(xùn)作業(yè)】在個(gè)人網(wǎng)站首頁(yè)中實(shí)現(xiàn)輪播圖效果。6.2.3

banner圖輪播效果實(shí)現(xiàn)02*【實(shí)現(xiàn)目標(biāo)】當(dāng)鼠標(biāo)單擊返回頂部按鈕時(shí)，頁(yè)面滾動(dòng)條頂端回到0位置。【知識(shí)掃描】JQuery相關(guān)知識(shí)點(diǎn)：窗口滾動(dòng)條頂部位置設(shè)置方法?！緦?shí)現(xiàn)步驟】1.在fun.js中定義backTop()函數(shù)，同時(shí)在index.js窗口加載事件中調(diào)用該函數(shù)。2.在backTop()函數(shù)中，設(shè)置單擊返回按鈕（id為fix-backTop的元素），窗口滾動(dòng)條頂端位置為0。functionbackTop(){ $("#fix-backTop").click(function(){ $(window).scrollTop(0); })}【思考總結(jié)】舉例說(shuō)明窗口滾動(dòng)條頂端位置設(shè)置方法?！緦?shí)訓(xùn)作業(yè)】在個(gè)人網(wǎng)站首頁(yè)中實(shí)現(xiàn)返回頂部效果。6.2.4

返回頂部效果實(shí)現(xiàn)返回頂部效果實(shí)現(xiàn)02*【實(shí)現(xiàn)目標(biāo)】當(dāng)滾動(dòng)條頂端位置低于一級(jí)導(dǎo)航欄原始位置時(shí)，導(dǎo)航欄固定在窗口頂端，如圖6-2-8所示；當(dāng)滾動(dòng)條頂端位置高于一級(jí)導(dǎo)航欄原始位置時(shí)，導(dǎo)航欄回到原位，如圖6-2-9所示。【知識(shí)掃描】（1）CSS相關(guān)知識(shí)點(diǎn)：實(shí)現(xiàn)固定定位元素水平居中的方法。（2）JQuery相關(guān)知識(shí)點(diǎn)：①窗口滾動(dòng)事件；②獲取窗口滾動(dòng)條頂端位置方法。。6.2.5

導(dǎo)航欄實(shí)時(shí)固定于頂部效果實(shí)現(xiàn)圖6-2-8導(dǎo)航欄固定于窗口頂端圖6-2-9導(dǎo)航欄原始位置02*【實(shí)現(xiàn)步驟】1.在fun.js中定義函數(shù)navTop()，同時(shí)在index.js中調(diào)用該函數(shù)。2.在navTop()中定義窗口滾動(dòng)事件。當(dāng)窗口滾動(dòng)條頂端位置大于等于200像素時(shí)，一級(jí)導(dǎo)航欄盒子樣式為固定定位，距瀏覽器頂端0；圖層為1，背景顏色為白色，外邊距為自動(dòng)，實(shí)現(xiàn)滾動(dòng)條水平居中；距瀏覽器左側(cè)和右側(cè)均為0。否則一級(jí)導(dǎo)航欄盒子樣式為相對(duì)定位。functionnavTop(){$(window).scroll(function(){ if($(window).scrollTop()>=200){ $(".nav-box").css({"position":"fixed","top":"0","z-index":"1","background":"#fff","margin":"auto","left":"0","right":"0"}); }else{ $(".nav-box").css({"position":"relative"}); }})}【思考總結(jié)】寫(xiě)出DOM元素頂端固定并水平居中的CSS樣式表?！緦?shí)訓(xùn)作業(yè)】實(shí)現(xiàn)個(gè)人網(wǎng)站首頁(yè)在恰當(dāng)?shù)臅r(shí)候?qū)Ш綑诠潭ㄓ陧敹说男Ч?.2.5

導(dǎo)航欄實(shí)時(shí)固定于頂部效果實(shí)現(xiàn)03*03制作其他頁(yè)面03*6.3.1

制作一級(jí)列表頁(yè)【實(shí)現(xiàn)目標(biāo)】（1）隱藏元素hide()：隱藏指定的元素對(duì)象。一級(jí)列表頁(yè)從上到下分為頭部區(qū)域、二級(jí)分類(lèi)導(dǎo)航區(qū)域（如圖6-3-1所示）、熱門(mén)商品展示區(qū)域（如圖6-3-2所示）、分類(lèi)商品展示區(qū)域（如圖6-3-3所示）、腳部區(qū)域和返回頂部按鈕。其中，腳部區(qū)域和返回頂部按鈕同首頁(yè)，頭部區(qū)域中的輪播圖更換為一級(jí)列表頁(yè)相關(guān)圖片。圖6-3-1一級(jí)列表頁(yè)二級(jí)分類(lèi)導(dǎo)航區(qū)域圖6-3-2一級(jí)列表頁(yè)熱門(mén)商品展示區(qū)域圖6-3-3一級(jí)列表頁(yè)分類(lèi)商品展示區(qū)域03*6.3.1

制作一級(jí)列表頁(yè)制作過(guò)程中需要注意一些問(wèn)題。（1）二級(jí)分類(lèi)導(dǎo)航包含當(dāng)前一級(jí)分類(lèi)下的所有二級(jí)分類(lèi)名稱(chēng)，當(dāng)鼠標(biāo)單擊二級(jí)分類(lèi)時(shí)，將跳轉(zhuǎn)到當(dāng)前頁(yè)中相應(yīng)的商品展示區(qū)域。（2）熱門(mén)商品展示區(qū)域包含所有當(dāng)前一級(jí)分類(lèi)下的熱門(mén)商品，當(dāng)鼠標(biāo)懸浮于某商品圖片上時(shí)，圖片向左向上移動(dòng)5px，同時(shí)顯示陰影，陰影向右向下偏移5px，陰影半徑為2px，陰影顏色為#999。（3）分類(lèi)商品展示區(qū)域包含所有二級(jí)分類(lèi)導(dǎo)航中的商品類(lèi)型，每一個(gè)類(lèi)型包含一個(gè)宣傳圖和對(duì)應(yīng)的商品列表。

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論