汽車銷售網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)──后臺(tái)與手機(jī)頁(yè)面制作

第頁(yè)) 汽車銷售網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)──后臺(tái)與手機(jī)頁(yè)面制作摘要：網(wǎng)絡(luò)在人們生活中的應(yīng)用越來(lái)越頻繁，現(xiàn)在不僅僅是pc端，移動(dòng)互聯(lián)網(wǎng)的時(shí)代也到來(lái)了，人們可以更加方便地了解車輛的信息參加活動(dòng)?，F(xiàn)在的汽車的種類很多，功能，內(nèi)部環(huán)境也相對(duì)有差異，給客戶購(gòu)車行為帶來(lái)了很大的麻煩，所以汽車銷售網(wǎng)解決了人們的購(gòu)車網(wǎng)上購(gòu)車需求，讓用戶可以更迅速，有效，全面的了解各方面的信息。關(guān)鍵詞：汽車銷售網(wǎng)站；汽車銷售網(wǎng)站后臺(tái)；手機(jī)界面Abstract：Theapplicationofthenetworkinpeople'slifemoreandmorefrequent,notjustthePC,now.ThemobileInterneterahasarrived,peoplecanmoreeasilyunderstandthevehicleinformationtoparticipateintheactivities.Now,manydifferentkindsofcars,functions,therearedifferencesbetweentheinternalenvironmentisalsorelatively,broughtaboutalotoftrouble,carssocarnetworkcaneffectivelysolvethepeopleshoppingonlineshoppingneeds,letuserscanmorequickly,effectivelyandfullyunderstandallaspectsoftheinformation.Keywords：Carsales,carsaleswebsitebackstage,mobilephoneinterface1緒論隨著社會(huì)的進(jìn)步和經(jīng)濟(jì)的發(fā)展，汽車已經(jīng)已經(jīng)越來(lái)越成為不可缺少的交通工具。而當(dāng)今市場(chǎng)中，傳統(tǒng)的汽車銷售模式存在很多不足，客戶對(duì)汽車的要求各有不同，因此需要客戶自己快捷選擇自己的需求，就需要汽車銷售平臺(tái)。通過網(wǎng)絡(luò)進(jìn)行汽車銷售，是隨著網(wǎng)絡(luò)的普及和電子商務(wù)概念的興盛而興起的。這種新型的汽車銷售形式，與傳統(tǒng)通過4s店面進(jìn)行銷售的方式相比優(yōu)勢(shì)顯著：1，降低了銷售成本；2，改變傳統(tǒng)的了解信息和購(gòu)買方式，使用網(wǎng)絡(luò)平臺(tái)了解信息并購(gòu)買，速度快，效率高，商業(yè)活動(dòng)不受空間和時(shí)間的限制；3，信息的傳遞更加有效和直觀，新車信息上傳后，人們可以立即了解咨詢，交易馬上可以從網(wǎng)上進(jìn)行，從而大大提高了交易的效率。2可行性分析2.1社會(huì)可行性據(jù)InternetWorldStatS的統(tǒng)計(jì)，今天的互聯(lián)網(wǎng)有17億用戶。而目前的全球人口為67億，到2020年毫無(wú)疑問會(huì)有更多的人使用互聯(lián)網(wǎng)。美國(guó)國(guó)家科學(xué)基金會(huì)預(yù)計(jì)，到那時(shí)互聯(lián)網(wǎng)的用戶數(shù)量將接近50億。網(wǎng)民隊(duì)伍的迅速擴(kuò)充，無(wú)疑為汽車銷售的發(fā)展提供了巨大的市場(chǎng)空間。2.2技術(shù)可行性本系統(tǒng)頁(yè)面采用的是當(dāng)前流行的div+Css開發(fā)，Windows操作系統(tǒng)，用Dreamweaver進(jìn)行網(wǎng)頁(yè)界面制作。硬件方面，硬件的性能越來(lái)越強(qiáng)大，更新?lián)Q代的速度惡業(yè)越來(lái)越快，存儲(chǔ)容量越來(lái)越大，可靠性能越來(lái)越高，制造價(jià)格也越來(lái)越低，硬件平臺(tái)完全能滿足此系統(tǒng)的需要。2.3操作可行性目前，大多數(shù)計(jì)算機(jī)以及瀏覽器都能運(yùn)行該網(wǎng)站，該網(wǎng)站的安裝、調(diào)試、運(yùn)行對(duì)原計(jì)算機(jī)系統(tǒng)的設(shè)置和布局無(wú)大的影響，并且提示信息完整，思路清晰，能夠方便的操作軟件。2.4系統(tǒng)技術(shù)介紹2.4.1htmlhtml是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言,是超文本標(biāo)記語(yǔ)言(HyperTextMarkupLanguage),不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言(markuplanguage),html是使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)。2.4.2cssCss是指指層疊樣式表(CascadingStyleSheets)，樣式通常存儲(chǔ)在外部樣式表中，通過僅僅編輯一個(gè)簡(jiǎn)單的CSS文檔，外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁(yè)面的布局和外觀。由于允許同時(shí)控制多重頁(yè)面的樣式和布局，CSS可以稱得上WEB設(shè)計(jì)領(lǐng)域的一個(gè)突破。作為網(wǎng)站開發(fā)者，你能夠?yàn)槊總€(gè)HTML元素定義樣式，并將之應(yīng)用于你希望的任意多的頁(yè)面中。如需進(jìn)行全局的更新，只需簡(jiǎn)單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。2.4.3javascriptJavaScript是一種基于對(duì)象（Object）和事件驅(qū)動(dòng)（EventDriven）并具有相對(duì)安全性的客戶端腳本語(yǔ)言。同時(shí)也是一種廣泛用于客戶端Web開發(fā)的腳本語(yǔ)言，常用來(lái)給HTML網(wǎng)頁(yè)添加動(dòng)態(tài)功能，比如響應(yīng)用戶的各種操作。它最初由網(wǎng)景公司（Netscape）的BrendanEich設(shè)計(jì)，是一種動(dòng)態(tài)、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類。JavaScript依賴于瀏覽器本身，與操作環(huán)境無(wú)關(guān)，只要計(jì)算機(jī)能運(yùn)行瀏覽器，并支持JavaScript的瀏覽器，就可正確執(zhí)行，從而實(shí)現(xiàn)了“編寫一次，走遍天下”的夢(mèng)想。因此，JavaScript是一種新的描述語(yǔ)言，其可以被嵌入到HTML文件中。JavaScript語(yǔ)言可以做到響應(yīng)使用者的需求事件（例如表單的輸入），而不需要任何的網(wǎng)絡(luò)來(lái)回傳輸資料。所以當(dāng)一位使用者輸入一項(xiàng)資料時(shí)，此資料數(shù)據(jù)不用經(jīng)過傳給服務(wù)器（server）處理再傳回來(lái)的過程，而直接可以被客戶端（client）的應(yīng)用程序所處理。2.4.4jqueryjQuery是一個(gè)快速的，簡(jiǎn)潔的javaScript庫(kù)，使用戶能更方便地處理HTML

documents、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery是免費(fèi)、開源的，使用MIT許可協(xié)議。jQuery的語(yǔ)法設(shè)計(jì)可以使開發(fā)者更加便捷，

jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁(yè)。2.5系統(tǒng)開發(fā)平臺(tái)及運(yùn)行環(huán)境2.5.1系統(tǒng)開發(fā)平臺(tái)Dreamvear一個(gè)可視化的網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站管理工具，支持最新的Web技術(shù)，包含HTML檢查、HTML格式控制、HTML格式化選項(xiàng)、Dreamweaver可以用最快速的方式將Fireworks，F(xiàn)reeHand，或Photoshop等檔案移至網(wǎng)頁(yè)上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁(yè)安全色。對(duì)于選單，快捷鍵與格式控制，都只要一個(gè)簡(jiǎn)單步驟便可完成。Dremweaver能與您喜愛的設(shè)計(jì)工具，如PlaybackFlash，Shockwave和外掛模組等搭配，不需離開Dremweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動(dòng)開啟Firework或Photoshop來(lái)進(jìn)行編輯與設(shè)定圖檔的最佳化。

2.5.2運(yùn)行環(huán)境操作系統(tǒng)：WindowsXP以上版本。服務(wù)器軟件：Tomcat6.0以上版本。瀏覽器：IE、FireFox、GoogleChrome。3需求分析3.1系統(tǒng)功能模塊概述和分析后臺(tái)主要對(duì)車輛信息進(jìn)行全面管理。通過后臺(tái)管理各類訂單（訂購(gòu)）信息，提供訂單提供查詢，增加，修改，刪除功能。對(duì)會(huì)員信息進(jìn)行管理，提供查詢，增加，修改，刪除功能。對(duì)會(huì)員預(yù)約信息進(jìn)行管理，提供查詢，增加，修改，刪除功能。對(duì)商品信息進(jìn)行管理，提供查詢，增加，修改，刪除功能。對(duì)車型進(jìn)行管理，提供查詢，增加，修改，刪除功能。對(duì)品牌進(jìn)行管理，提供查詢，增加，修改，刪除功能。對(duì)活動(dòng)信息進(jìn)行管理，提供提供查詢，增加，修改功能。手機(jī)界面主要是最新車型，熱銷車型，最新活動(dòng)，售后服務(wù)以及聯(lián)系方式，具有查看最新車型，以及了解相應(yīng)車型信息功能，查看熱銷車型，了解相應(yīng)車型信息功能，查看最新活動(dòng)，了解相應(yīng)活動(dòng)信息功能。3.2系統(tǒng)功能模塊設(shè)計(jì)根據(jù)系統(tǒng)功能分析，可以畫出系統(tǒng)的功能模塊圖3-1，圖3-2。圖3-1系統(tǒng)的功能模塊圖圖3-2手機(jī)的功能模塊圖4后臺(tái)設(shè)計(jì)與實(shí)現(xiàn)4.1管理員登錄后臺(tái)管理員登錄頁(yè)面，登錄成功后到達(dá)后臺(tái)主頁(yè)，圖4-1。界面截圖：圖4-1后臺(tái)登陸圖Html代碼：<body><divclass="login"><imgsrc="images/txt.png"width="442"height="41"class="txt"/><tablewidth="380"border="0"><tr><td>賬 號(hào)：</td><tdcolspan="2"class="user"><inputtype="text"/></td><tdrowspan="2"><ahref="index.html"><imgsrc="images/login.png"width="60"height="60"/></a></td></tr><tr><td>密 碼：</td><tdcolspan="2"class="pass"><inputtype="password"/></td></tr><tr><td> </td><td><inputtype="checkbox"/>記住賬號(hào)</td><td><inputtype="checkbox"/>記住密碼</td><td> </td></tr></table></div></body>4.2后臺(tái)主頁(yè)管理員登錄成功后，到達(dá)主頁(yè)。主頁(yè)是框架頁(yè)，由上、左、右三部分構(gòu)成。上部顯示標(biāo)題和菜單，分別為：“l(fā)ogo”、“退出”、“管理員登陸信息”左部顯示菜單欄，包括商城用戶管理，商品信息，訂單管理，活動(dòng)管理，、預(yù)約管理，系統(tǒng)管理。右側(cè)包括顯示當(dāng)前文職已經(jīng)默認(rèn)顯示歡迎圖片，當(dāng)點(diǎn)擊頭部鏈接或左部鏈接后，都在中部顯示，圖4-2。圖4-2后臺(tái)主頁(yè)圖(1)頭部如圖4-3：圖4-3后臺(tái)頭部圖一個(gè)id=”header”的div包裹頭部，內(nèi)部分為3個(gè)塊，logo退出，管理員登陸信息，分別包裹在3個(gè)div下，部分代碼如下：<divid="header"class="wrap"> <divid="logo"><imgsrc="images/txt.png"width="442"height="41"/></div> <divclass="help"><divclass="exit"><spanclass="fr"><imgsrc="images/index1_08.gif"width="16"height="16"/><ahref="../index.html">退出</a></span><divclass="clear"></div></div><divclass="welcomegly">管理員pillys您好，今天是2012-12-21，歡迎回到管理后臺(tái)</div></div> </div>(2)左側(cè)如圖4-4：圖4-4后臺(tái)功能列表圖分為商城用戶管理，商品信息，訂單管理，活動(dòng)管理，預(yù)約管理，系統(tǒng)管理。部分代碼如下： <divid="menu-mng"class="lefter"> <divclass="box"> <dl> <dt>商城用戶管理</dt> <dd><ahref="user.html">商城用戶管理</a></dd> <dt>商品信息</dt> <dd><em><ahref="productClass-add.html">新增</a></em><ahref="productClass.html">車型管理</a></dd><dd><em><ahref="productClass2-add.html">新增</a></em><ahref="productClass2.html">品牌管理</a></dd> <dd><em><ahref="product-add.html">新增</a></em><ahref="product.html">商品管理</a></dd> <dt>訂單管理</dt> <dd><ahref="order.html">訂單管理</a></dd> <dt>活動(dòng)管理</dt> <dd><em><ahref="active-add.html">新增</a></em><ahref="active.html">活動(dòng)管理</a></dd><dt>預(yù)約管理</dt> <dd><ahref="appointment.html">預(yù)約管理</a></dd><dt>系統(tǒng)管理</dt> <dd><em><ahref="sysuser-add.html">新增</a></em><ahref="sysuser.html">系統(tǒng)用戶管理</a></dd> </dl> </div> </div>(3)右側(cè)如圖所示4-5：圖4-5后臺(tái)功能列表圖右側(cè)導(dǎo)航：一個(gè)div包裹，主題內(nèi)容是ul,li標(biāo)簽書寫，給當(dāng)前的頁(yè)面加了一個(gè)class，使管理員清晰了解當(dāng)前頁(yè)面所屬分類。<divclass="main"><divclass="navbar"> <ulclass="clearfix"> <liclass="current"><ahref="index.html">首頁(yè)</a></li> <li><ahref="user.html">用戶</a></li> <li><ahref="product.html">商品</a></li> <li><ahref="order.html">訂單</a></li> <li><ahref="active.html">活動(dòng)</a></li> <li><ahref="appointment.html">預(yù)約</a></li><li><ahref="sysuser.html">系統(tǒng)</a></li> </ul> </div>(4)右側(cè)主體內(nèi)容如圖4-6所示：圖4-6后臺(tái)主頁(yè)展示圖由class=”center”的div包裹，代表主體內(nèi)容。頭部的當(dāng)前位置由h2標(biāo)簽包裹。中間歡迎內(nèi)容是由class=”welcome”的div包裹，分別放圖片和文字。<divclass="center"> <h2>管理首頁(yè)</h2> <divid="welcome"class="manage"><imgsrc="images/welcome.jpg"width="400"height="296"/><h3>歡迎進(jìn)入汽車網(wǎng)站后臺(tái)管理！！</h3><divclass="clear"></div></div></div> </div> <divclass="clear"></div></div>4.3商城用戶管理4.3.1用戶管理列表當(dāng)點(diǎn)擊左側(cè)的“商城用戶管理”鏈接到達(dá)商城用戶管理頁(yè)面，圖4-7。圖4-7商城用戶管理頁(yè)面圖(1)右側(cè)主體內(nèi)容如圖4-8所示：圖4-8商城用戶管理頁(yè)面局部圖由class=”center”的div包裹，代表主體內(nèi)容。頭部的當(dāng)前位置由h2標(biāo)簽包裹。中間表格內(nèi)容是使用表格標(biāo)簽包裹，結(jié)構(gòu)<table><tr><td></td></tr></table>，內(nèi)容包括用戶名，e-mail,手機(jī)，注冊(cè)時(shí)間，操作。底部頁(yè)面選擇是由ulli標(biāo)簽包裹部分代碼如下：<tableclass="list"><tr><th>用戶名</th> <th>Email</th> <th>手機(jī)</th><th>注冊(cè)時(shí)間</th> <th>操作</th> </tr> <tr><tdclass="w1c"><ahref="user-select.html">張三豐</a></td> <tdclass="w4">fengsan.zhang@</td> <tdclass="w1c">lt;/td><tdclass="w1c">2014-09-1217:09:08</td> <tdclass="w1c"><ahref="javascript:Delete(1);"><imgsrc="images/index1_84.gif"width="74"height="31"/></a></td></tr></table>(2)分頁(yè)效果采用<ul><li>...</li></ul>布局，如圖4-9所示：圖4-9后臺(tái)分頁(yè)圖分頁(yè)html代碼如下：<divclass="bottom"><ulclass="page"><ahref="#"><li>1</li></a><ahref="#"><li>2</li></a><ahref="#"><li>3</li></a><ahref="#"><li>4</li></a><ahref="#"><li>5</li></a><span>第</span><inputtype="text"class="pages"/><span>頁(yè)</span><ahref="#">GO</a></ul></div>4.3.2查看用戶信息在用戶管理列表，點(diǎn)擊用戶名，查看用戶的詳細(xì)信息，采用表格布局。圖4-10后臺(tái)用戶信息展示圖Html代碼如下：<formaction="manage-result.html"> <tableclass="form"><tr> <tdclass="field">用戶名：</td> <td>嚇哭了貸款</td> </tr> </table></form>4.4商品信息管理4.4.1商品管理點(diǎn)擊導(dǎo)航“商品管理”鏈接會(huì)到達(dá)商品管理列表頁(yè)面。頁(yè)面會(huì)分頁(yè)顯示所有商品。列表包括：商品名稱，所屬車型，所屬品牌，入庫(kù)時(shí)間，銷量，價(jià)格，庫(kù)存，編輯，刪除，添加，點(diǎn)擊商品名稱進(jìn)入商品內(nèi)頁(yè)，圖4-11。圖4-11商品管理圖(1)查詢功能：根據(jù)品牌，車型，時(shí)間查詢。查詢功能：圖4-12。圖4-12時(shí)間查詢圖當(dāng)鼠標(biāo)點(diǎn)擊時(shí)間文本框時(shí)，會(huì)彈出選擇日期。引入jquery文件，再使用日歷插件。引入文件代碼如下：<scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/hDate.js"></script>代碼調(diào)用如下：<inputtype="text"class="text"onClick="calendar.show({id:this})"/>部分javascript代碼：varcalendar={config:{id:null,ok:null,maxDay:null,minDay:null,zIndex:1000,ishotel:false,format:"yyyy-MM-dd"},clear:function(){calendar.config.id=null;calendar.config.ok=null;calendar.config.maxDay=null;calendar.config.minDay=null;calendar.config.zIndex=1000;calendar.config.ishotel=false;},_setDay:function(m,y,d){varcurrDay=d;varcurrMon=m;varcurrYear=y;varsetMon=newDate().getMonth()+1;varsetYear=newDate().getFullYear();varsetDay=newDate().getDate();varfirstDay=newDate(y+"/"+m+"/"+1).getDay();varcalDay=[];var_d=1;varlastDay=newDate(y,m,0).getDate();for(vari=0;i<6;i++){calDay.push("<tr>");for(varj=0;j<7;j++){if(i==0){if(firstDay>j){calDay.push("<tddate=''> </td>");}else{varf=calendar.festivals(m,_d);var_dx=(y+"-"+m+"-"+_d);if(m==currMon&&currDay==_d&&currYear==y){calDay.push("<tddate='"+_dx+"'class='_selDay'>"+_d+"</td>");}elseif(m==setMon&&setDay==_d&&setYear==y){calDay.push("<tddate='"+_dx+"'title='"+_d+"號(hào)'class='_sday'>今天</td>");}elseif(f!==""){calDay.push("<tddate='"+_dx+"'class='festival'>"+f+"</td>");}elseif(calendar.config.minDay!=null&&newDate(calendar.config.minDay.replace(/[年月日-]/g,"\/"))>newDate(_dx.replace(/[-]/g,"\/"))){calDay.push("<tddate=''class='disDay'>"+_d+"</td>");}elseif(calendar.config.maxDay!=null&&newDate(calendar.config.maxDay.replace(/[年月日-]/g,"\/"))<newDate(_dx.replace(/[-]/g,"\/"))){calDay.push("<tddate=''class='disDay'>"+_d+"</td>");}else{calDay.push("<tddate='"+_dx+"'>"+_d+"</td>");}_d++;}}4.4.2添加商品點(diǎn)擊“添加”鏈接后，點(diǎn)擊后會(huì)進(jìn)入添加商品頁(yè)面。添加商品頁(yè)面添加內(nèi)容包括：車名，所屬車型，所屬品牌，展示圖片，款式，定金，數(shù)量，庫(kù)存，詳細(xì)信息編輯框，圖4-13。圖4-13添加商品圖(1)點(diǎn)擊添加款式按鈕，添加款式，報(bào)價(jià)，定金，庫(kù)存，圖4-14圖4-14動(dòng)態(tài)添加款式效果圖使用JQuery實(shí)現(xiàn)代碼如下：$(".addstyle").click(function(){$("<trclass='style'><tdclass='field'>款式：</td><td><inputtype='text'class='texttiny'name='productPrice'/><spanclass='span1'>報(bào)價(jià)：</span><inputtype='text'class='texttiny'name='productName'/><spanclass='span1'>定金：</span><inputtype='text'class='texttiny'name='productName'/><spanclass='span1'>庫(kù)存：：</span><inputtype='text'class='texttiny'name='productName'/></td></tr>").insertBefore(".txt");}(2)點(diǎn)擊刪除按鈕，刪除款式，報(bào)價(jià)，定金，庫(kù)存,當(dāng)只有一行后，彈出提示框，不能刪除了，圖4-15，圖4-16。圖4-15動(dòng)態(tài)刪除款式效果圖圖4-16動(dòng)態(tài)刪除款式效果圖使用JQuery實(shí)現(xiàn)代碼如下：$(".delstyle").click(function(){ varoTr=$(".style"); if(oTr.length>1){ oTr[oTr.length-1].remove(); }else{ alert("不能刪除了"); } }); (2)編輯框：使用editor插件，功能類似于word文檔，可以改變字體大小，行距，顏色，等功能，圖4-17。圖4-17編輯框插件效果圖Html代碼如下：<trclass="txt"> <tdclass="field"></td> <td></td></tr><tr> <tdclass="field"></td> <td></td></tr><tr><td></td><td><textareaname="body"style="width:700px;height:270px;visibility:hidden;"></textarea></td></tr>4.4.3查看商品信息點(diǎn)擊“商品名”鏈接后，點(diǎn)擊后會(huì)進(jìn)入相應(yīng)商品詳情的頁(yè)面。詳情頁(yè)面包括：圖片展示，車名，款式，報(bào)價(jià)，定金，庫(kù)存，月銷量，車型亮點(diǎn)，產(chǎn)品詳情介紹和評(píng)論，圖4-18圖4-18商品詳情展示圖(1)款式選擇不同，報(bào)價(jià)相應(yīng)切換圖4-19圖4-19切換價(jià)格效果圖jQuery代碼如下：$(document).ready(function(){$("#style").change(function(){ $("#price").text($(this).val()+"萬(wàn)"); });});車型詳情和評(píng)價(jià)切換功能，使用SuperSlide插件圖4-20圖4-20車型詳情和評(píng)級(jí)切換效果圖Js調(diào)用代碼如下：<scripttype="text/javascript">jQuery(".slideTxtBox").slide();</script>4.5手機(jī)版首頁(yè)主頁(yè)是框架頁(yè)，由上、中、下三部分構(gòu)成。上部顯示標(biāo)題中部顯示欄目，最新車型，熱銷車型，最新活動(dòng)，售后服務(wù)，點(diǎn)擊相應(yīng)欄目，進(jìn)入相應(yīng)頁(yè)面。底部顯示聯(lián)系方式。圖4-21圖4-21手機(jī)版首頁(yè)圖(1)首頁(yè)模塊效果采用css3實(shí)現(xiàn)圓角代碼：border-radius:5px;-weblit-border-radius:5px;-moz-border-radius:5px;查找偶數(shù)的dl標(biāo)簽代碼：.maindl.mainbtn:nth-child(2n){margin-right:0px;}4.6最新車型最新就是給用戶展示最新的車型頁(yè)面，方便用戶瀏覽。主題內(nèi)容包括車型分類及相應(yīng)車型展示。點(diǎn)擊車型展示進(jìn)入車型詳情頁(yè)面。如圖4-22圖4-22車型詳情圖(1)頭部采用css3固比固的格式布局，如圖4-23圖4-23車型詳情頭部圖代碼介紹如下：position:fixed使其固定在同一位置跟隨頁(yè)面移動(dòng)。同時(shí)采用css3固比固模式，及父類添加di