第30頁（共30頁）汽車銷售網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)──前端頁面制作摘要：當(dāng)前，網(wǎng)絡(luò)技術(shù)迅猛發(fā)展，網(wǎng)絡(luò)的方便快捷導(dǎo)致人們對網(wǎng)絡(luò)的依賴逐漸增大，各類信息都可以通過網(wǎng)站瀏覽，致使各類網(wǎng)站如雨后春筍般的出現(xiàn)，汽車銷售網(wǎng)的出現(xiàn)給想要購車的人群了解汽車信息和購買帶來了方便，解決了人們想要購車但因?yàn)榉N類繁雜難以篩選的問題。本論文所提出的方案采用的是當(dāng)前比較流行的語言，如html、css和javascript、jQuery，結(jié)合photoshop，fireworks工具等完成該系統(tǒng)的基本功能模塊，如汽車詳情、個(gè)人中心、購物車、登陸、注冊等。關(guān)鍵詞：前端；電子商務(wù)；功能模塊Abstract：Atpresent，networktechnologydevelopsquickly，networkissoconvenient,thatpeoplearemoreandmorerelyonInternet.wecangetinformationeverywherebywebsite,sothatallkindsofwebsitesprangup,theappearedofcar_saleswebsitebringmoreconvenientforthatpeoplewhowanttogetmorecarinformationandwanttobuy，solvedthepeoplewanttobeacarbecauseofthediversityofdifficulttofilter.Inthispaper，theproposedschemeUSESthecurrentrelativelypopularinthelanguage,suchasjavascript、jQuery，combinethistoolstofinishedbasicmodulesofthesystem,thistoolsincludePhotoshop、Firefoxandon,functionmoduleislikeshowCon2、personalcenter、shopCar、login、register.Keywords：leadingend;e-business;functionmodule;html1緒論在網(wǎng)上銷售汽車是時(shí)代發(fā)展的結(jié)果，隨著網(wǎng)絡(luò)技術(shù)迅猛發(fā)展，網(wǎng)絡(luò)的方便快捷導(dǎo)致人們對網(wǎng)絡(luò)的依賴逐漸增大，各類信息都可以通過網(wǎng)站瀏覽，致使各類網(wǎng)站如雨后春筍般的出現(xiàn)，汽車銷售網(wǎng)的出現(xiàn)給想要購車的人群了解汽車信息和購買帶來了方便，解決了人們想要購車但因?yàn)榉N類繁雜難以篩選的問題。汽車銷售實(shí)體店比較分散，如果一個(gè)汽車店沒有找到自己喜歡的車型，轉(zhuǎn)到下一個(gè)實(shí)體店，花費(fèi)時(shí)間，對人體的消費(fèi)也比較大，網(wǎng)上銷售給人們帶來了極大的方便，它將汽車集中在一起，不用出門就可以看到各種車型，所以網(wǎng)上營銷是時(shí)代進(jìn)步的產(chǎn)物。在此篇論文中，我將介紹如何在建立網(wǎng)站，以何種方式在網(wǎng)上進(jìn)行銷售的，通過網(wǎng)頁的介紹，使人們對銷售模式更加熟悉，我將介紹當(dāng)前主流瀏覽器，以及瀏覽器對各種語言的支持，如：jQuery、javascript、css等，我通過網(wǎng)站的結(jié)構(gòu)，組成，技術(shù)支持，功能模塊的實(shí)現(xiàn)，網(wǎng)頁測試等方面來描述汽車銷售網(wǎng)站，通過這些我們將對汽車銷售網(wǎng)站的架構(gòu)有一定的了解，功能實(shí)現(xiàn)也有一定的認(rèn)識，各功能模塊的實(shí)現(xiàn)和測試也有相當(dāng)?shù)恼J(rèn)知，我將詳細(xì)介紹這些。2實(shí)現(xiàn)環(huán)境介紹2.1當(dāng)前主流瀏覽器介紹2.1.1IEInternetExplorer，原名為MicrosoftInternetExplorer，又稱WindowsInternetExplorer，簡稱IE，推出公司是微軟公司，推出公司在美國，是一款網(wǎng)頁瀏覽器，當(dāng)前主流瀏覽器之一，IE瀏覽器是全球使用率最高的瀏覽器。2.1.2FirefoxFirefox又稱“火狐”或“火狐瀏覽器”，簡稱Fx或FF，火狐是一款開源的網(wǎng)頁瀏覽器，火狐瀏覽器在全球占率較高，用戶在全球各瀏覽器中排名第三，用戶數(shù)在國外使用率更高。2.1.3chromeChrome，又名Google瀏覽器，是Google公司開發(fā)的設(shè)計(jì)簡單、高效的瀏覽工具，chrome是基于其他開源軟件編著的，chrome瀏覽器開發(fā)的目的是提高瀏覽器的穩(wěn)定性、安全性和速度。2.2站點(diǎn)站點(diǎn)，是一個(gè)儲存區(qū)，將一個(gè)網(wǎng)站中的網(wǎng)頁文件和素材文件，有條理地存放在站點(diǎn)文件夾里，存放在站點(diǎn)中的文件與文件夾一起構(gòu)成網(wǎng)站的實(shí)質(zhì)內(nèi)容。站點(diǎn)中的文件除了網(wǎng)頁文件外還有素材文件，素材文件就是網(wǎng)頁中會用到的圖片、視頻、聲音等，這些素材是以文件的形式存放在站點(diǎn)中。2.3超鏈接超鏈接屬于網(wǎng)頁的一部分，它讓其他網(wǎng)頁同站點(diǎn)之間進(jìn)行的其他元素進(jìn)行連接，也就是當(dāng)瀏覽頁面時(shí)，鼠標(biāo)點(diǎn)擊某段文字或者圖片時(shí)，會打開其他網(wǎng)頁，也可以跳轉(zhuǎn)到其他網(wǎng)站。超鏈接將同一網(wǎng)站的同一頁面、同一網(wǎng)站的不同頁面、不同網(wǎng)站串聯(lián)起來，方便客戶的瀏覽和查找，超鏈接使web服務(wù)生命力廣泛、持久。2.4網(wǎng)頁 網(wǎng)頁是網(wǎng)站的基本元素，網(wǎng)頁是一個(gè)文件，是各種網(wǎng)站應(yīng)用的平臺，網(wǎng)頁是通過網(wǎng)頁瀏覽器閱讀，網(wǎng)頁是用文字、圖片、視頻、聲音來展示效果，網(wǎng)頁上主流代碼布局之前通常以表格定位，但是現(xiàn)在一般采用div+css布局。Div是選擇區(qū)，css是將圖片、文字、視頻、聲音在網(wǎng)頁上擺放的樣式固定并表現(xiàn)出來。3網(wǎng)站前臺實(shí)現(xiàn)需求分析3.1頁面實(shí)現(xiàn)需求根據(jù)頁面設(shè)計(jì)的需求和客戶的要求，在頁面實(shí)現(xiàn)是采用html+css布局，通過javascript、jQuery實(shí)現(xiàn)動態(tài)效果，在我所實(shí)現(xiàn)的頁面中，頁面布局相對簡單，主要實(shí)現(xiàn)由javascript、jQuery編寫的動態(tài)效果，我主要實(shí)現(xiàn)的頁面是：登陸（login），注冊（register），汽車詳情（showCon2），購物車（shopCar），個(gè)人中心。用戶進(jìn)入汽車銷售網(wǎng)后可以瀏覽車型，看到感興趣的車型想要加入購物車時(shí)必須登陸，如果在此網(wǎng)站沒有賬號的點(diǎn)擊注冊，注冊在本網(wǎng)站的賬號或使用其他方式登陸，如QQ，微信360，支付寶等，登陸或注冊成功后跳轉(zhuǎn)會瀏覽車型頁面，要了解車詳細(xì)，點(diǎn)擊車圖片或文字介紹，進(jìn)入汽車詳情（showCon2）頁，對喜歡的車型加入購物車（shopCar）,確定后跳轉(zhuǎn)回汽車詳情，點(diǎn)擊用戶名進(jìn)入賬戶管理，若賬戶信息有改變，點(diǎn)擊編輯進(jìn)入更改賬戶信息或點(diǎn)擊管理地址進(jìn)入更改地址簿。進(jìn)入賬戶信息后需要更改密碼的點(diǎn)擊更改密碼復(fù)選框出現(xiàn)更改密碼更改賬戶信息或更改地址簿成功后跳轉(zhuǎn)回賬戶管理頁面，要查看之前的購買記錄或收藏點(diǎn)擊我的購買記錄或我的收藏，這些就是我這部分的功能模塊實(shí)現(xiàn)需求圖3-1，圖3-2。3.2功能模塊(1)圖3-1功能結(jié)構(gòu)一圖(2)圖3-2功能結(jié)構(gòu)二圖4技術(shù)支持4.1HTMLHTML英文全名HyperTextMarkupLanguage，HTML主要用來編寫Web文檔的語言。頁面元素是通過特定的標(biāo)簽來實(shí)現(xiàn)的，根據(jù)這些標(biāo)簽指示瀏覽器怎樣顯示這個(gè)頁面的內(nèi)容，如文本、圖片、視頻、聲音的樣式。超文本，是一種含有指向其他文本或頁面鏈接的文本，我們稱之為鏈接。超文本把放在不同地方，不同計(jì)算機(jī)，不同地域的文檔鏈接在一起。用戶不用關(guān)心打開文檔的鏈接所指的內(nèi)容到底指向那個(gè)文件，只需要點(diǎn)擊文本，頁面馬上就會跳轉(zhuǎn)到所指向的文檔的內(nèi)容中去。4.2CSSHTML可以將在網(wǎng)頁中表現(xiàn)的形式、結(jié)構(gòu)、內(nèi)容表現(xiàn)在同一文檔中，雖然放在同一文檔中簡單，但是在實(shí)行中實(shí)際上增加了難道，是頁面復(fù)雜，不便于維護(hù)，更改時(shí)費(fèi)力費(fèi)時(shí)。所以就出現(xiàn)了CSS。CSS的英文全稱為CascadingStyleSheet，中文意思為層疊樣式表，主要是控制HTML中網(wǎng)頁文本的頁面布局的外觀樣式，使頁面更加美觀，是網(wǎng)頁文檔內(nèi)容的形式和結(jié)構(gòu)完全分離。4.3JavaScriptJavaScript一種腳本語言，javascript具有一定的安全性，它是基于事件驅(qū)動和對象的腳本語言。同時(shí)javascript也是一種在客戶端Web開發(fā)廣泛應(yīng)用的腳本語言，通常用來實(shí)現(xiàn)HTML網(wǎng)頁上的動態(tài)效果，比如網(wǎng)頁上經(jīng)常有的圖片的定時(shí)切換效果，無縫滾動滾動，數(shù)字增加效果等其他的動態(tài)效果。Javascript語言的語法與Java語言的語法比較相似，但當(dāng)你對javascript語言更加熟悉之后，就會發(fā)現(xiàn)他們之間其實(shí)是兩種不同的語言。4.4jQueryjQuery是兼容多種瀏覽器的javascript框架，jQuery的核心理念是writeless（寫得更少）,domore(做得更多)，jQuery的出現(xiàn)，是網(wǎng)頁上的效果的實(shí)現(xiàn)越來越簡單，將javascript封裝在一個(gè)文件中，通過jQuery來調(diào)用，jQuery是美國人JohnResig發(fā)布的，當(dāng)前jQuery是是最流行的javascript框架。jQuery是使用MIT許可協(xié)議，同時(shí)也是免費(fèi)的，jQuery也是開源的。jQuery的出現(xiàn)是軟件開發(fā)者使用更加便捷，如jQuery在處理查找DOM元素、操作過程等，使開發(fā)者輕松地開發(fā)出功能強(qiáng)大且方便的靜態(tài)或動態(tài)網(wǎng)頁。5功能模塊實(shí)現(xiàn)5.1登陸（login）登陸界面包括2個(gè)主要的部分，位置分別為上、下，上部包含兩大部分內(nèi)容網(wǎng)站logo和注冊，點(diǎn)擊logo跳轉(zhuǎn)到首頁，點(diǎn)擊注冊跳轉(zhuǎn)到注冊頁面，注冊賬號后才能實(shí)現(xiàn)收藏、將加入購物車，立即購買，查看訂單等用戶操作。下部的實(shí)現(xiàn)分為兩面，左面放的是汽車的照片代表我們做的是汽車類型的網(wǎng)站，右部選用table布局實(shí)現(xiàn)填寫賬號和密碼，忘記密碼，免費(fèi)注冊，記住密碼，下次自動登錄，注冊，更多等功能實(shí)現(xiàn)，實(shí)現(xiàn)代碼通過table布局，table中tr控制行，td控制列，具體格式如<table><tr><td></td>...</tr>...</table>，合并行采用rows如rows=num，num代表數(shù)字，合并兩行rows=2，合并列cols，如cols=num，網(wǎng)站效果如圖3所示，圖5-1：(3)圖5-1登陸界面圖5.1.1登陸（login）布局實(shí)現(xiàn)<tableclass="login-bble"cellspacing="0"cellpadding="0"width="270"align="center"border="0"><tbody><trclass="tr1"><td><spanclass="fl">賬號登陸</span></td></tr><tr><tdclass="p-name"> </td></tr><tr><tdclass="inputuser"><inputid=""name=""placeholder="手機(jī)號/用戶名/郵箱"></td></tr><tr><tdclass="p-name"> </td></tr><tr><tdclass="inputpastwd"><inputid=""name=""placeholder="密碼"></td></tr><tr><tdclass="p-name"> </td></tr><trclass="tr2"><tdclass="p-name"><span><inputtype="checkbox"/>記住賬號</span><span><inputtype="checkbox"/>下次自動登陸</span><ahref="#"class="fr">忘記密碼?</a></td></tr><tr><tdclass="p-name"> </td></tr><tr><tdclass="log"><ahref="">登錄</a></td></tr><tr><tdclass="p-name"> </td></tr><trclass="tr3"><tdclass="p-name">還沒有賬號？<ahref="register.html">免費(fèi)注冊</a></td></tr><tr><tdclass="p-name"> </td></tr></tbody></table>5.1.1登陸（login）css樣式實(shí)現(xiàn).log-reg.login-bbletr.tr1{heighr:20px;}.log-reg.login-bbletr.tr1em{font-size:12px;padding-rigth:20px;background:url(../images/title12.jpg)rightcenterno-repeat;display:inline-block;width:100px;height:20px;line-height:20px;}.log-reg.login-bbletr.tr2td{font-size:12px;}.log-reg.login-bbletr.tr2tda{color:#A30505;}.log-reg.login-bbletr.tr2tdspan{margin-right:10px;float:left;}.log-reg.login-bbletr.tr2tdspaninput{float:left;margin-top:2px;margin-right:5px;}.log-reg.login-bbletr.tr3a{color:#A30505;margin-left:10px;}.log-reg.login-bbletd,.log-reg.srl-tletd{color:#666;font-size:14px;}5.2注冊（register）在本網(wǎng)站沒有賬號的客戶需要注冊賬號，點(diǎn)擊注冊跳轉(zhuǎn)到此頁面或在首頁直接點(diǎn)擊注冊，若已經(jīng)注冊的用戶一不小心進(jìn)入到此頁面，可以直接點(diǎn)擊登陸返回登陸界面，也可以點(diǎn)擊logo返回首頁，本頁面實(shí)現(xiàn)郵箱、用戶名、創(chuàng)建密碼、確認(rèn)密碼所在城市、驗(yàn)證碼、同意以下協(xié)議并注冊功能。驗(yàn)證碼看不清楚是點(diǎn)擊換一個(gè)，注冊成功輸入條件①此頁面有郵箱驗(yàn)證，若輸入的數(shù)據(jù)不是郵箱組成，否則注冊將不會成功；②郵箱，用戶名，創(chuàng)建密碼，確認(rèn)密碼，驗(yàn)證碼都不能為空，否則注冊不會成功；③創(chuàng)建密碼與確認(rèn)密碼輸入的數(shù)據(jù)必須一致，否則注冊不會成功；④輸入的驗(yàn)證碼要與頁面顯示出的驗(yàn)證碼一致，否則注冊不會成功；⑤必須點(diǎn)擊同意以下協(xié)議并注冊，否則注冊不會成功。這是這個(gè)頁面注冊的六個(gè)條件，少了其中一條，注冊都不成立。功能實(shí)現(xiàn)的布局代碼，與登陸界面的布局類似，上部分采用的是div布局，下部分采用table布局，布局代碼如下：<div><table><tbody><tr><tdclass="p-name">郵箱</td>...<td></td></tr></tbody></table></div>效果如圖4所示，圖5-2：（4）圖5-2注冊界面圖5.3汽車詳情（showCon2）點(diǎn)擊一款汽車會顯示汽車的詳情,汽車詳情頁有上、中、下三部分組成，頭部由logo、搜索框、導(dǎo)航欄組成，點(diǎn)擊logo直接放回首頁，logo在網(wǎng)頁上用圖片存放，標(biāo)簽為img，格式為<imgsrc=#/>，在搜索框里輸入要搜索的文本，點(diǎn)擊搜索下面會出現(xiàn)搜索相應(yīng)的內(nèi)容的改變，搜索框左邊放的文本框<inputtype=”text”/>，導(dǎo)航欄有車型展示、最新車型、熱銷車型、最新活動、賣家指南、售后服務(wù)，鏈接到相應(yīng)的頁面，用ul、li實(shí)現(xiàn)效果，當(dāng)鼠標(biāo)移到導(dǎo)航欄上的相應(yīng)版塊時(shí)，相應(yīng)li的背景發(fā)生改變，文字顏色變成紅色，此效果在css中實(shí)現(xiàn)，有hover實(shí)現(xiàn)。中部主要介紹汽車詳情、產(chǎn)品詳情、顧客評論、廠家推薦，汽車詳情主要實(shí)現(xiàn)變速器、車型、報(bào)價(jià)、定金、庫存、月銷量、收藏、預(yù)約試駕、訂購的數(shù)量、加入購物車或立即購買等功能，產(chǎn)品詳情主要介紹提高駕駛安全性的配備、坡道輔助系統(tǒng)、降噪科技；顧客評論主要是顧客能夠與廠商有更直接的方通，也方便增加大家對產(chǎn)品的了解，顯示顧客發(fā)表的對這款車型的看法；廠家推薦是推薦出大眾喜歡的車型，點(diǎn)擊車圖片顯示那款車的詳情，客戶可以在那款車詳情操作。尾部主要介紹汽車銷售商家的詳細(xì)信息，客戶可以聯(lián)系商家，如商家姓名，電話號碼，地址，備案編號,效果如圖5所示，圖5-3：（5）圖5-3汽車詳情界面圖5.3.1汽車詳情（showCon2）主要布局實(shí)現(xiàn)搜索框的實(shí)現(xiàn)，如圖6所示，圖5-4：（6）圖5-4網(wǎng)站logo界面圖<ahref="index.html"><imgsrc="images/logo.png"class="logofl"/></a>搜索框的實(shí)現(xiàn)，圖5-5（7）圖5-5搜索界面圖<divclass="searchfr"><ahref="#"class="seabtn">搜索</a><inputtype="text"/></div>導(dǎo)航欄的實(shí)現(xiàn)圖5-6（8）圖5-6導(dǎo)航欄界面圖<ulclass="nav"><li><ahref="show.html">車型展示</a></li><li><ahref="show.html">最新車型</a></li><li><ahref="show.html">熱銷車型</a></li><li><ahref="active.html">最新活動</a></li><li><ahref="guide.html">買家指南</a></li><li><ahref="service.html"class="last">售后服務(wù)</a></li></ul>車型的實(shí)現(xiàn)圖5-7（9）圖5-7車型實(shí)現(xiàn)界面圖<selectid="style"><optionvalue="15.6">1.5L尊貴型</option><optionvalue="11.7">1.5L舒適型</option><optionvalue="19.8">1.5L豪華型<option></select>數(shù)量的實(shí)現(xiàn)，圖5-8（10）圖5-8數(shù)量實(shí)現(xiàn)界面圖<td>數(shù)量</td><td><FORMname=form1><TABLEborder=0cellSpacing=0cellPadding=0><TBODY><TR><TDrowSpan=2><INPUTvalue=2readOnlysize=5name=qty></TD><TDrowSpan=2width=3></TD><TD><Ahref="javascript:qtyUpdate('up')"><IMGsrc="images/btn_up_thumb.gif"width=15height=12></A></TD></TR><TR><TDalign=right><Ahref="javascript:qtyUpdate('down')"><IMGsrc="images/btn_down_thumb.gif"width="15"height="12"></A></TD></TR></TBODY></TABLE></FORM></td>車型選擇的實(shí)現(xiàn)，圖5-9（11）圖5-9車型選擇界面圖<ulclass="tb-thumb"id="thumblist"><liclass="tb-selected"><divclass="tb-pictb-s40"><ahref="javascript:viod(0)"><imgsrc="images/car-g5-sm.jpg"mid="images/car-s7-big.jpg"big="images/car-s7-big.jpg"></a></div></li><liclass="tb-selected"><divclass="tb-pictb-s40"><ahref="javascript:viod(0)"><imgsrc="images/car-g5-sm.jpg"mid="images/car-s7-big.jpg"big="images/car-s7-big.jpg"></a></div></li><liclass="tb-selected"><divclass="tb-pictb-s40"><ahref="javascript:viod(0)"><imgsrc="images/car-g5-sm.jpg"mid="images/car-s7-big.jpg"big="images/car-s7-big.jpg"></a></div></li><liclass="tb-selected"><divclass="tb-pictb-s40"><ahref="javascript:viod(0)"><imgsrc="images/car-g5-sm.jpg"mid="images/car-s7-big.jpg"big="images/car-s7-big.jpg"></a></div></li></ul>車型的實(shí)現(xiàn)，圖5-10（12）圖5-10車型評論界面圖布局介紹，布局采用dl、dt、dd實(shí)現(xiàn)效果，圖下面的邊線通過css中的border實(shí)現(xiàn)，代碼如下，布局代碼：<dl><dtclass="fl"><imgsrc="images/img06.jpg"width="59"height="43"/><p>金瑤瑤</p></dt><ddclass="fl"><p>為了家家的網(wǎng)友能與品牌廠商進(jìn)行更有效更直接的溝通，家家在近期上線了一個(gè)新產(chǎn)品"品牌公共主頁"，相信有一些小伙伴們已經(jīng)提前體驗(yàn)到了。還不清楚情況的小伙伴們，來先惡補(bǔ)一下吧！</p><pclass="time"><span>2014年12月20日09:12</span><em>滿意</em></p></dd><divclass="clear"></div></dl>Css代碼如下：.slideTxtBox.bdul.ul2{background:#fff;}.slideTxtBox.bdulimg{margin:0auto;display:block;margin-bottom:30px;}.slideTxtBox.bduldl{height:auto;border-bottom:1pxsolid#ccc;padding:10px20px;color:#000;}5.3.2汽車詳情（showCon2）主要效果實(shí)現(xiàn)汽車放大效果的實(shí)現(xiàn),如圖13，圖5-11（13）圖5-11放大效果實(shí)現(xiàn)圖<scripttype="text/javascript">$(document).ready(function(){ $(".jqzoom").imagezoom();});</script>點(diǎn)擊小車大車切換效果的實(shí)現(xiàn),如圖14效果介紹：當(dāng)點(diǎn)擊下面圖片的小圖時(shí)，上面就會出現(xiàn)相應(yīng)小圖的大圖，圖5-12（14）圖5-12效果切換圖<scripttype="text/javascript">$(document).ready(function(){ $("#thumblistlia").click(function(){ $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected")； $(".jqzoom").attr('src',$(this).find("img").attr("mid")); $(".jqzoom").attr('rel',$(this).find("img").attr("big")); });});</script>點(diǎn)擊上下按鈕數(shù)量增減效果的實(shí)現(xiàn)，圖5-13（15）圖5-13增加數(shù)量圖<scripttype="text/JavaScript">functionqtyUpdate(kind){ varf=document.form1; varc=f.qty.value; if(kind=="up"){ c++; }elseif(kind=="down"){ if(c>1)c--; } f.qty.value=c;}</script>選擇車型板塊效果介紹：點(diǎn)擊多選中的1.5L舒適型時(shí)，框中的文字由1.5L尊貴型變成1.5L舒適型，改變之后下面的報(bào)價(jià)改為此車型的價(jià)格，圖5-14（16）圖5-14車型選擇圖$(document).ready(function(){$("#style").change(function(){ $("#price").text($(this).val()+"萬"); });});tab切換效果介紹：鼠標(biāo)移上顧客評論時(shí)，下面內(nèi)容變成顧客評論的內(nèi)容，鼠標(biāo)移回產(chǎn)品詳情時(shí)，內(nèi)容變成產(chǎn)品詳情介紹的內(nèi)容，圖5-15。（17）圖5-15切換界面效果圖<scripttype="text/javascript">jQuery(".slideTxtBox").slide();</script>，引用js插件實(shí)現(xiàn)，調(diào)用插件來實(shí)現(xiàn)效果當(dāng)頁面到達(dá)產(chǎn)品詳情且頁面仍向下滾動且滾輪高度到達(dá)800時(shí)，上圖所實(shí)現(xiàn)的效果會固定到頁面頂部，實(shí)現(xiàn)效果代碼如下：<script>$(window).scroll(function(){ if(jQuery(this).scrollTop()>800){ jQuery('.hd').addClass('scroll'); jQuery('.bd').css("marginTop","40px"); }else{ jQuery('.hd').removeClass('scroll'); jQuery('.bd').css("marginTop","0px"); }});</script>5.4個(gè)人中心此部分是用戶的個(gè)人中心，個(gè)人中心是記錄用戶一系列操作和為用戶提供的一系列操作，主要操作有賬戶管理，更改賬戶信息、更改地址簿、我的購買記錄和收藏。賬戶管理主要記錄賬戶的信息，主要有聯(lián)系信息和地址簿，聯(lián)系信息主要記載用戶名、手機(jī)號碼、郵箱、郵編，地址簿主要記載默認(rèn)送貨地址，點(diǎn)擊此頁面的編輯鏈接到更改賬戶管理，點(diǎn)擊左側(cè)的導(dǎo)航時(shí)頁面會跳轉(zhuǎn)相應(yīng)界面，圖5-16。（18）圖5-16個(gè)人中心圖更改賬戶信息主要更改姓名、手機(jī)號碼、電子郵箱地址，若需要更改密碼點(diǎn)擊復(fù)選框更改密碼出現(xiàn)更改密碼，再次點(diǎn)擊更改密碼更改密碼會隱藏，點(diǎn)擊確定后頁面跳轉(zhuǎn)回賬戶管理頁面，圖5-17。（19）圖5-17更改密碼界面圖點(diǎn)擊保存跳轉(zhuǎn)回賬戶管理，點(diǎn)擊管理地址出現(xiàn)更改地址簿，圖5-18。（20）圖5-18更改地址簿界面圖用戶購買記錄是記錄用戶之前購買產(chǎn)品的詳細(xì)情況，圖5-19（21）圖5-19訂單顯示界面圖收藏是用戶對感興趣的產(chǎn)品可以收藏顯示在此界面，點(diǎn)擊刪除后收藏的汽車會減少，點(diǎn)擊加入購物車后購物車中的數(shù)量會增加，圖5-20。（22）圖5-20收藏界面圖5.4.1更改密碼布局實(shí)現(xiàn)，圖5-21（23）圖5-21密碼更改界面圖<divclass="hasbordiv1"><h2class="color2">賬戶信息</h2><p><span>姓名</span><inputtype="text"class="txt"/><em>*</em></p><p><span>電子郵箱地址</span><inputtype="text"class="txt"/><em>*</em></p><p><inputtype="checkbox"id="check"name="check"/><labelfor="check">更改密碼</label></p></div>5.4.1更改密碼效果實(shí)現(xiàn)，圖5-22（24）圖5-22密碼更改界面二圖<script>$(document).ready(function(){ $('#check').click(function(){ if($('#check').attr('checked')){ $("#change").slideDown(); }else{ $("#change").slideUp(); } }); });</script>6網(wǎng)站的測試網(wǎng)站在編寫時(shí)要測試網(wǎng)站的兼容性，IE、Firefox、Chrome不同的版本對javascript、jQuery、css的支持不同，測試是為了盡可能的減少頁面的錯(cuò)誤如錯(cuò)位等，對css的支持雖然兼容性問題會相對較少，幾乎沒有，但還是會有兼容性問題，如對css中opacity（透明度）的支持，IE跟Firefox就不同，I有兩種用法分別是filter：alpha（opacity:100）,opacity：1。這些主流的瀏覽器對javascript、jQuery的支持差別更多，javascript包括ECMAScript、DOM、BOM，這些瀏覽器對DOM（documentobjectmodel）部分兼容，對BOM（browserobjectmodel）幾乎不兼容，所以在做網(wǎng)頁是對這些兼容性的處理要細(xì)致，耐心，減少網(wǎng)站故障，消除錯(cuò)誤，將網(wǎng)頁的質(zhì)量提升到最高，將高質(zhì)量的網(wǎng)站提交給用戶，減少后期問題。網(wǎng)頁完成后，要將完成的網(wǎng)頁在各大主瀏覽器上測試一次，保證兼容性問題已經(jīng)解決，保證頁面效果的實(shí)現(xiàn)和頁面布局的美觀，不錯(cuò)位，測試處理完后，網(wǎng)頁文件交給后臺程序員，程序員將開始后臺的編寫。7結(jié)束語時(shí)光飛逝，轉(zhuǎn)眼到了畢業(yè)季，在大學(xué)的這段時(shí)光里，老師的教導(dǎo)和同學(xué)的幫助促使我成長，成長的代表了知識的增長，心理素質(zhì)的增長，并不僅僅意味著長大、長高。在老師和同學(xué)的幫助下我的畢業(yè)論文就要完成了，再次我由衷感謝我們的指導(dǎo)老師涂峰對我們的耐心指導(dǎo)和幫助，并給我們提出了許許多多寶貴的意見和建議，我的論文才能如此順利完成。為了我們的畢業(yè)設(shè)計(jì)和論文的完成，老師抽出很多的時(shí)間和精力對我們進(jìn)行指導(dǎo)，對于他對我們的幫助表示感謝。畢業(yè)設(shè)計(jì)的這段時(shí)間里，有熬夜、有心焦、有煩躁，但是最終我們還是完成了我們的畢業(yè)設(shè)計(jì)，并且使我獲益非淺，我在這里體會到指示的淵博，同時(shí)也感受到自己知識的欠缺，雖然我們即將畢業(yè)，但是畢業(yè)終止不了我學(xué)習(xí)的步伐，堅(jiān)持活到老、學(xué)到老的口號，將學(xué)習(xí)的習(xí)慣保持下去。在論文完成之際，我的心中充滿感激，從大一到大四，從畢業(yè)設(shè)計(jì)課題開始到現(xiàn)在畢業(yè)論文的即將完成，有很多可敬的師長、朋友、同學(xué)給了很多的幫助，在這里請接受我充滿誠摯的謝意！參考文獻(xiàn)[1]唐守國主編，創(chuàng)意+：Photoshopcs4網(wǎng)頁設(shè)計(jì)、配色與特效案例精粹，清華大學(xué)出版社，2010年7月第一版[2]王征主編，JavaScript網(wǎng)頁特效實(shí)例大全，清華大學(xué)出版社，2006年9月第一版[3]楊紀(jì)梅，Dreamweaver網(wǎng)頁設(shè)計(jì)與制作完全手冊,清華大學(xué)出版社,2007年2月第一版[4]史曉燕、蘇萍編著，網(wǎng)頁設(shè)計(jì)基礎(chǔ)（HTML，CSS和JavaScript），清華大學(xué)出版社，北京交通大學(xué)出版社，2006年10月第一版[5]張杰,王誠，網(wǎng)頁與網(wǎng)站設(shè)計(jì)，中國石化出版社,2006年9月第一版[6]張景峰等.HTML程序設(shè)計(jì).高等教育出版社.2005年9月 [7]彭雪冬，柯建林，呂洋波，網(wǎng)站建設(shè)實(shí)用開發(fā)精粹，北京人民郵電出版社，2008年9月第一版[8]項(xiàng)宇峰等.HTML網(wǎng)絡(luò)編程從入門到精通.清華大學(xué)出版社.2006年 基于C8051F單片機(jī)直流電動機(jī)反饋控制系統(tǒng)的設(shè)計(jì)與研究基于單片機(jī)的嵌入式Web服務(wù)器的研究MOTOROLA單片機(jī)MC68HC（8）05PV8/A內(nèi)嵌EEPROM的工藝和制程方法及對良率的影響研究基于模糊控制的電阻釬焊單片機(jī)溫度控制系統(tǒng)的研制基于MCS-51系列單片機(jī)的通用控制模塊的研究基于單片機(jī)實(shí)現(xiàn)的供暖系統(tǒng)最佳啟停自校正（STR）調(diào)節(jié)器單片機(jī)控制的二級倒立擺系統(tǒng)的研究基于增強(qiáng)型51系列單片機(jī)的TCP/IP協(xié)議棧的實(shí)現(xiàn)基于單片機(jī)的蓄電池自動監(jiān)測系統(tǒng)基于32位嵌入式單片機(jī)系統(tǒng)的圖像采集與處理技術(shù)的研究基于單片機(jī)的作物營養(yǎng)診斷專家系統(tǒng)的研究基于單片機(jī)的交流伺服電機(jī)運(yùn)動控制系統(tǒng)研究與開發(fā)基于單片機(jī)的泵管內(nèi)壁硬度測試儀的研制基于單片機(jī)的自動找平控制系統(tǒng)研究基于C8051F040單片機(jī)的嵌入式系統(tǒng)開發(fā)基于單片機(jī)的液壓動力系統(tǒng)狀態(tài)監(jiān)測儀開發(fā)模糊Smith智能控制方法的研究及其單片機(jī)實(shí)現(xiàn)一種基于單片機(jī)的軸快流CO〈,2〉激光器的手持控制面板的研制基于雙單片機(jī)沖床數(shù)控系統(tǒng)的研究基于CYGNAL單片機(jī)的在線間歇式濁度儀的研制基于單片機(jī)的噴油泵試驗(yàn)臺控制器的研制基于單片機(jī)的軟起動器的研究和設(shè)計(jì)基于單片機(jī)控制的高速快走絲電火花線切割機(jī)床短循環(huán)走絲方式研究基于單片機(jī)的機(jī)電產(chǎn)品控制系統(tǒng)開發(fā)基于PIC單片機(jī)的智能手機(jī)充電器基于單片機(jī)的實(shí)時(shí)內(nèi)核設(shè)計(jì)及其應(yīng)用研究基于單片機(jī)的遠(yuǎn)程抄表系統(tǒng)的設(shè)計(jì)與研究基于單片機(jī)的煙氣二氧化硫濃度檢測儀的研制基于微型光譜儀的單片機(jī)系統(tǒng)單片機(jī)系統(tǒng)軟件構(gòu)件開發(fā)的技術(shù)研究基于單片機(jī)的液體點(diǎn)滴速度自動檢測儀的研制基于單片機(jī)系統(tǒng)的多功能溫度測量儀的研制基于PIC單片機(jī)的電能采集終端的設(shè)計(jì)和應(yīng)用基于單片機(jī)的光纖光柵解調(diào)儀的研制氣壓式線性摩擦焊機(jī)單片機(jī)控制系統(tǒng)的研制基于單片機(jī)的數(shù)字磁通門傳感器基于單片機(jī)的旋轉(zhuǎn)變壓器-數(shù)字轉(zhuǎn)換器的研究基于單片機(jī)的光纖Bragg光柵解調(diào)系統(tǒng)的研究單片機(jī)控制的便攜式多功能乳腺治療儀的研制基于C8051F020單片機(jī)的多生理信號檢測儀基于單片機(jī)的電機(jī)運(yùn)動控制系統(tǒng)設(shè)計(jì)Pico專用單片機(jī)核的可測性設(shè)計(jì)研究基于MCS-51單片機(jī)的熱量計(jì)基于雙單片機(jī)的智能遙測微型氣象站MCS-51單片機(jī)構(gòu)建機(jī)器人的實(shí)踐研究基于單片機(jī)的輪軌力檢測基于單片機(jī)的GPS定位儀的研究與實(shí)現(xiàn)基于單片機(jī)的電液伺服控制系統(tǒng)用于單片機(jī)系統(tǒng)的MMC卡文件系統(tǒng)研制基于單片機(jī)的時(shí)控和計(jì)數(shù)系統(tǒng)性能優(yōu)化的研究基于單片機(jī)和CPLD的粗光柵位移測量系統(tǒng)研究單片機(jī)控制的后備式方波UPS提升高職學(xué)生單片機(jī)應(yīng)用能力的探究基于單片機(jī)控制的自動低頻減載裝置研究基于單片機(jī)控制的水下焊接電源的研究基于單片機(jī)的多通道數(shù)據(jù)采集系統(tǒng)基于uPSD3234單片機(jī)的氚表面污染測量儀的研制基