摘要2015HTML5HTML5HTML減少開發(fā)成本。HTML5HTMLHTMLJavascriptjQuery種問題。HTML5關(guān)鍵詞：HTML5;CSS3;響應(yīng)式;javascript;網(wǎng)站美化;交互設(shè)計(jì)abstractInthiseraofrapiddevelopmentofinformationandnetworkasthemostconvenientmedianowincreasinglybeingacceptedandintegratedintoourlives.In2015,withtheriseofHTML5inthecountry,hasbeenadvancingthedevelopmentoftheinformationage,thesiteisalsomovingawayfromthetraditionalboringpagestyle,andnowHTML5comparedtothepreviousHTMLiseasiertomaintainandmanagement,butalsotoachievecross-platformdevelopment,reducedevelopmentcosts.ThispapermainlyaroundFreehandGroupHTML5Responsivewebsitedevelopmenttopics,usedinthethreemostessentialelementsofinthelayoutofthepage,usingHTMLtodefinetheelements,layoutbasiclayout;csstodisplayHTMLelementspositioninglayoutrendering,use Javascript or jQuery to achieve the appropriate effects andinteractions.Althoughsuchlooksverysimple,buthereneedtounderstandalotofseriousthings.Beforedevelopment,theneedtoclarifytheseconceptsinthedevelopmentprocess,butalsoconsideravarietyofproblemswithcompatibility,performanceandsoon.Analyzeandsolvetechnicalproblemsinimplementationof:TheofficialwebsiteofthegeneralprinciplesofcorporatebackgroundpersonalizedpageHTML5andresponsivelayout;elaboratestructureandworkingprincipleofthewholeenterpriseofficialwebsite;AnalysisImplementationdifficultiesandpriorities;Keywords:HTML5;CSS3;responsive;javascript;websitelandscaping;InteractiveDesign目 錄第一章 緒論 1本課題研究的背景和目的 1國(guó)內(nèi)外HTML5響應(yīng)式企業(yè)網(wǎng)站建設(shè)的狀況 1本章小結(jié) 2第二章前端開發(fā)及相關(guān)技術(shù) 3HTML5前端開發(fā)環(huán)境 3HTML5前端開發(fā)工具 3HTML5前端開發(fā)相關(guān)技術(shù) 3javascript簡(jiǎn)介 3javascript基本特點(diǎn) 4css簡(jiǎn)介 4jQuery 5本章小結(jié) 5第三章前端布局分析與設(shè)計(jì) 6前端總體開發(fā)流程與設(shè)計(jì) 6分層開發(fā) 6代碼編寫 6內(nèi)部測(cè)試與后續(xù)優(yōu)化 6前端UI設(shè)計(jì) 7模塊分布 7顏色配置 7css元素 8交互設(shè)計(jì)與UI 9網(wǎng)站結(jié)構(gòu)布局與設(shè)計(jì) 9網(wǎng)站首頁結(jié)構(gòu) 9主題鮮明，富有特色 10網(wǎng)站前臺(tái)頁面設(shè)計(jì) 103.5.1 首頁 103.5.2 其余子頁面 103.7 本章小結(jié) 10第四章主要功能的實(shí)現(xiàn) 11界面設(shè)計(jì) 11具體設(shè)計(jì)文檔 11前臺(tái)新聞文摘顯示 11網(wǎng)站裝飾風(fēng)格 11網(wǎng)站的鏈接結(jié)構(gòu) 11可視化設(shè)計(jì) 11具體實(shí)現(xiàn)技術(shù) 12css在“寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)”中的應(yīng)用實(shí)例 12本章小結(jié) 13第五章 總結(jié) 73致謝 73參考文獻(xiàn) 75響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)第一章 緒論本課題研究的背景和目的術(shù)的飛速生長(zhǎng)，手機(jī)的上網(wǎng)率高于傳統(tǒng)PC，而在手機(jī)端上，傳統(tǒng)網(wǎng)站又難以做HTML5互去優(yōu)化與用戶溝通的過程。PC進(jìn)行訪問，體驗(yàn)空間層面上帶來的開放性。CSS3與傳統(tǒng)官網(wǎng)相比，響應(yīng)式網(wǎng)站不外乎也是企業(yè)介紹，新聞發(fā)布，產(chǎn)品介紹一類等。為何還要花時(shí)間精力和人力去建立和維護(hù)網(wǎng)站呢？是正如上面所說：內(nèi)容更加多姿多彩，板塊，內(nèi)容更加豐富，而且能夠相應(yīng)不同屏幕大小，在這個(gè)用手機(jī)多過PC的時(shí)代，能更好更快地將第一手信息送到用戶手上。這些都促成了各個(gè)企業(yè)組織新的信息化建設(shè)，構(gòu)建專業(yè)，易于維護(hù)和管理的網(wǎng)站。3PScss3；javascriptjQuery。這些都是開發(fā)中最基本的技能。前端開發(fā)HTML，cssjavascript國(guó)內(nèi)外HTML512015，80AppHTML5。這意味著大部分AppFacebookTwitter(數(shù)據(jù)來源：國(guó)際科技媒體ReadWriteWeb，2015)21000H542%17,358,480uv;27%是測(cè)試題，最高49,940,339uv;15%是社交互動(dòng)游戲，最高2,892,047uv;551,195uvh5n391FlashAFlash1HTML5

響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)420CPM40H5用微信提供的模板，也可以自行定制。H5內(nèi)外的幾個(gè)社交平臺(tái)。目前支持H5分享的平臺(tái)：國(guó)內(nèi)的微信、微博，國(guó)外有Facebook、Twitter、LinkedIn，當(dāng)然每個(gè)平臺(tái)分享的形式略有差異。各大主流H5HTML5H5現(xiàn)，H5H5案。所以各大企業(yè)官網(wǎng)轉(zhuǎn)型做響應(yīng)式也是勢(shì)在必得的過程。本章小結(jié)本章闡述了開發(fā)企業(yè)響應(yīng)式官網(wǎng)的研究背景和意義。介紹了國(guó)內(nèi)外HTML5要性。2響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)第二章 前端開發(fā)及相關(guān)技術(shù)HTML5HTML5HTML，HTML5的第五次重大修APIWebStorm。HTML5WebStormWebStormjetbrainsJavaScript“WebHTML5IntelliJIDEAIntelliJIDEAIE8下排版不亂，IE9整個(gè)網(wǎng)站的詳細(xì)開發(fā)過程在后面將逐步具體介紹。PhotoshopAdobePhotoshop,簡(jiǎn)稱“PS”,AdobeSystemsPhotoshopps視頻、出版等各方面都有涉及。IEtesterIETesterWebBrowserWindowsVistaXPIE5.5IE6IE7IE8IE9IE10IE11JavaScriptIE5.5IE6IE7IE8IE9IE覽器，用于觀察兼容性。HTML5javascriptJavascript是一種直譯式腳本語言。是一種動(dòng)態(tài)類型、弱類型、基于原型的3響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)語言，內(nèi)置支持類型，具有自己獨(dú)特的垃圾回收等機(jī)制，他的解釋器被稱為JavascriptjavascriptV8C++Javascript的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用，HTML它的出現(xiàn)，起初只是進(jìn)行簡(jiǎn)單的信息和用戶之間的一種實(shí)時(shí)的，動(dòng)態(tài)的，可CGIHTMLjavascriptHTML5，javascriptHTML5webAPPjavascriptjavascript（1) 基于對(duì)象的語言javascript簡(jiǎn)單性javascript沒做嚴(yán)格的聲明要求,而且javascriptJava使其設(shè)計(jì)簡(jiǎn)單緊湊安全性javascript動(dòng)態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。而且動(dòng)態(tài)性java scriptWeb對(duì)應(yīng)的事件程序響應(yīng)。css標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用準(zhǔn)通用標(biāo)記語言的一個(gè)子集飾的，可以有效地對(duì)各個(gè)標(biāo)簽的樣式進(jìn)行統(tǒng)一的修改。CSS的全名中，Cascading有“層疊”的意思，也就是說在同一個(gè)web頁面中可以同時(shí)存在多個(gè)樣式表，但這些樣式表中的樣式，會(huì)根據(jù)他們所在的位置擁有不同的優(yōu)先級(jí)優(yōu)先級(jí)越高的就會(huì)在最終顯示出來樣式表插入方法分為3種：(1) 內(nèi)聯(lián)式樣式表；(2)嵌入式樣式表；(3)外部式樣式表；CSSHTML，HTML，HTML，它只是一種輔助修飾頁面的“工具”，除了可以擴(kuò)展HTML4響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)圖片的使用率，方便管理樣式表樣式，設(shè)置公用樣式，樣式分類設(shè)置調(diào)用。CSSHTML，CSSCSS人群，有較強(qiáng)的易讀性。jQueryJQueryprototypeJavascriptjs庫(kù)，它兼容CSS3，還兼容各種瀏覽器（IE6.0+,FF1.5+,Safari2.0+,OperaIE6/7/8jQueryHTML（標(biāo)記語言下的一個(gè)應(yīng)用events交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說明很全，而且各種應(yīng)用也jQueryhtmlhtmlhtmljsidjQueryjavascriptwriteless,domore(寫得更少,做得更多)。jQuery20061JohnResigbarcampJavaScriptDaveMethvin，jQueryjavascript1000055jQuery。jQueryMITjQueryDOMAjaxAPI本章小結(jié)時(shí)講述了相關(guān)的前端開發(fā)語言，比如：Javascript，css，Jquery后面的開發(fā)中對(duì)這些技術(shù)有深刻的理解5響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)第三章前端布局分析與設(shè)計(jì)前端總體開發(fā)流程與設(shè)計(jì)WebJavascript，所以前端工程師不僅要掌握IEtext，googledebug，還要具有一定的溝通能力，協(xié)調(diào)美工設(shè)計(jì)與后臺(tái)開發(fā)人員，還要掌握對(duì)象的編程思想，等等。分層開發(fā)根據(jù)項(xiàng)目?jī)?nèi)容的不同，劃分出不同的功能模塊，分步完成，以便合理地安排開發(fā)時(shí)間，在有限的時(shí)間內(nèi)，有條理地完成模塊和需要功能，減少時(shí)間的浪費(fèi)，降低開發(fā)成本，提高開發(fā)效率。整個(gè)分層開發(fā)大致分為總體結(jié)構(gòu)搭建，模塊制作，頁面設(shè)置制作，底層JS修復(fù)，代碼優(yōu)化。代碼編寫當(dāng)總規(guī)劃和設(shè)計(jì)圖初稿完成后，就可以進(jìn)入代碼編寫階段，進(jìn)行前期的HTMLjavascript多的時(shí)間對(duì)產(chǎn)品進(jìn)行修改，優(yōu)化和完善。確定了流程后，還需要對(duì)產(chǎn)品原型進(jìn)行分析，研究，把復(fù)用性高的部分劃分出來，重點(diǎn)標(biāo)記，在以后的代碼編寫過程中，封裝成一個(gè)復(fù)用組件，方便調(diào)用。并且根據(jù)二三級(jí)頁面的設(shè)計(jì)布局，搭建統(tǒng)一的大致框架。（分頁，字體樣式等）w3c能等各方面的修改。HTMLCSS內(nèi)部測(cè)試與后續(xù)優(yōu)化前端內(nèi)部測(cè)試，主要是觀察頁面與設(shè)計(jì)圖的差異，優(yōu)化頁面細(xì)節(jié)樣式，及時(shí)發(fā)現(xiàn)問題并且進(jìn)行修改。并且利用IEtext查看頁面的兼容性，當(dāng)所有細(xì)節(jié)與兼容問題修改完畢后，就要對(duì)制作文件進(jìn)行代碼優(yōu)化，盡可能的壓縮文件大小和減少外部http的鏈接請(qǐng)求數(shù)，優(yōu)化訪問速度。該流程是參照公司開發(fā)流程制定出來的，以經(jīng)過很長(zhǎng)時(shí)間的磨合跟改進(jìn)，6響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)盡管雖然不是很完美，但是很適合我們現(xiàn)在開發(fā)這個(gè)項(xiàng)目的需求，優(yōu)點(diǎn)也是很明顯的，能更好的應(yīng)對(duì)高強(qiáng)度，高質(zhì)量的開發(fā)需求，代碼更加容易控制和修改優(yōu)化，充分利用時(shí)間，提高了開發(fā)俠侶前端UI模塊分布UIUserInterface（用戶界面）的簡(jiǎn)稱。UIUI定位和特點(diǎn)。所以UI設(shè)計(jì)師設(shè)計(jì)中最重要的一點(diǎn)，也可以發(fā)揮出更多創(chuàng)意的設(shè)計(jì)想法；其中體現(xiàn)出層次感設(shè)計(jì)的就是從屬關(guān)系，點(diǎn)構(gòu)成線，線構(gòu)成面，主次清晰明了。圖3-1為寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)首頁：圖3-1 寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)首屏著陸頁首頁的logo還設(shè)計(jì)了一個(gè)動(dòng)畫，整個(gè)著陸頁使用了一張滿屏大圖。顏色配置產(chǎn)生豐富色彩的三原色是紅，綠，藍(lán)，也就是RGB，十六進(jìn)制是000000redcolor:#FF0000color:#F00背景色大量六百，同時(shí)背景色要與文字的排列對(duì)比強(qiáng)烈一些。首頁的頂端使用，滿屏的圖片下面用大量六百這兩個(gè)部分過度的很自然。在文字部分用黑色文字當(dāng)鼠標(biāo)移動(dòng)到相關(guān)文字上面時(shí)文字顏色變成紅色。不同的文字顏色會(huì)產(chǎn)生不同的效果，這能給瀏覽者一種層次感，方便與閱讀。73-2

響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)圖3-2網(wǎng)站首頁導(dǎo)航字體顏色變化cssCSS塊狀元素(block)：CSS塊狀元素非?！鞍缘馈保? 總是另起一行開始，可對(duì)其設(shè)置高度寬度，行高等等，常用的有：div p table h1 ul dl 等等。CSS內(nèi)聯(lián)元素(inline):CSS內(nèi)聯(lián)元素和其它內(nèi)聯(lián)元素可以同時(shí)都在一行上；高度，行高以及頂?shù)? 邊 距 不 可 改 變 ； 常 用 的 有 ：a strong font img input span small label等等CSS行內(nèi)塊狀元素（inline-block）:Display:inline-block，該樣式可將元素改為行內(nèi)塊狀元素，將元素對(duì)象呈遞為內(nèi)聯(lián)元素對(duì)象，但是元素對(duì)象的內(nèi)容作為塊對(duì)象元素呈遞。旁邊的內(nèi)聯(lián)對(duì)象元素會(huì)被呈遞在同一行內(nèi)，允許空格，即可以讓元素同時(shí)擁有塊狀元素設(shè)置寬高行高等特性，同時(shí)也具有行內(nèi)元素的同一行內(nèi)顯示。但對(duì)于這個(gè)屬性不是所有瀏覽器都識(shí)別，兼容性較差，而且會(huì)留下默認(rèn)的外邊距，而且不能通過margin：0樣式去掉，解決方法是利用浮動(dòng)float來解決。CSS盒模型:網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容 (content)、填充(padding)、邊(border)、邊界(margin)，CSS盒子模式都具備這些屬性。（箱子日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。CSSCSS模型。內(nèi)邊距paddingpadding:10px5px15px;上右左下padding:10px15px;上右下左<divstyle="width:100px;padding:020px;">無標(biāo)題文檔</div>這個(gè)40pxmargin：圍繞在元素邊框的空白區(qū)域是margin題。最常用的就是div居中:margin:0auto;<divstyle=“width:200px;text-align:center;”><divstyle=“width:100px;”>無標(biāo)題文檔</div></div>這個(gè)屬性是無法居中的，如圖所示3-3所示：8響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)交互設(shè)計(jì)與UI

3-3盒子模型務(wù)目標(biāo)，獲得愉快的用戶體驗(yàn)。UIUI,UI視覺設(shè)計(jì)，更多是界面的外觀靜態(tài)設(shè)計(jì)。所以這種情況下，交互設(shè)計(jì)尤為重要，既不能失去UI設(shè)計(jì)的特性，又要確保UI設(shè)計(jì)師利用其專業(yè)知識(shí)在視覺結(jié)構(gòu)內(nèi)進(jìn)行充分發(fā)揮，這是一種藝術(shù)網(wǎng)站結(jié)構(gòu)布局與設(shè)計(jì)網(wǎng)站首頁結(jié)構(gòu)50%～80%，20%。寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)網(wǎng)站主要用來進(jìn)行公司信息發(fā)布，公司資源展示。作為一個(gè)網(wǎng)站，應(yīng)該由一些相關(guān)及相對(duì)獨(dú)立的模塊整合而成。本網(wǎng)站系統(tǒng)主要包括以下幾個(gè)主要頁面及幾個(gè)大的模塊，每個(gè)頁面包含豐富的內(nèi)容，每個(gè)大的模塊下又細(xì)分為幾個(gè)的功能模塊。制作前臺(tái)頁面模塊，包括主頁及各個(gè)子頁面，建立各個(gè)頁面之間的相關(guān)鏈接，。整體網(wǎng)站遵循寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)網(wǎng)站的設(shè)計(jì)思路，擁有完善9響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)的功能，風(fēng)格要求簡(jiǎn)潔大方不單調(diào)。各個(gè)子頁面都可正常返回主頁以及正確連接到各個(gè)子頁面。功能要求使用簡(jiǎn)單全面，容易操作。主題鮮明，富有特色在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計(jì)方案。對(duì)網(wǎng)站的整體風(fēng)格和特色做出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。整個(gè)首頁大量運(yùn)用動(dòng)畫以及目前常用的簡(jiǎn)單卻用戶體驗(yàn)好的效果，要做下一定的印象。對(duì)于一些LOGOlogologo網(wǎng)站前臺(tái)頁面設(shè)計(jì)寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)主要包括：首頁，關(guān)于寫意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們等9個(gè)子頁面。制作過程如下：首頁P(yáng)hotoshop1920px，高度自動(dòng)排列，Webstorm61920，1920寬度的時(shí)候，對(duì)其進(jìn)行自適應(yīng)滿屏，并且因?yàn)橐獙?shí)現(xiàn)一個(gè)“滾一屏”效果，CSS文字的位子。主頁包括的內(nèi)容主要有：網(wǎng)站的域名，導(dǎo)航條，LOGO，版權(quán)。導(dǎo)航條又包含首頁，關(guān)于寫意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們等。其余子頁面子頁面的設(shè)計(jì)風(fēng)格基本一致，導(dǎo)航欄跟隨瀏覽器滾動(dòng)，始終貼在瀏覽器窗口上方，下面是滿屏幕寬度的banner圖，下方便是各大模塊內(nèi)容的顯示；制作過程中采用的制作方法和調(diào)用的模塊內(nèi)容跟上一個(gè)差不多3.7 本章小結(jié)UI10

響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)界面設(shè)計(jì)字體：微軟雅黑；行距：150%。聯(lián)系我們。首頁網(wǎng)站上中部：banner圖片。網(wǎng)站底部：網(wǎng)站/版面制作；版權(quán)信息。其中網(wǎng)站的導(dǎo)航條會(huì)一路跟隨屏幕滾動(dòng)具體設(shè)計(jì)文檔內(nèi)容和功能設(shè)計(jì)這個(gè)企業(yè)網(wǎng)站主要實(shí)現(xiàn)企業(yè)信息展示，公告展示等功能。先明確各板塊提供的主要功能：首頁功能板塊：旗下品牌（默認(rèn)灰色，當(dāng)鼠標(biāo)移上去有一個(gè)變彩色的過程，起聚焦）；服務(wù)項(xiàng)目（默認(rèn)灰色，當(dāng)鼠標(biāo)移上去有一個(gè)變彩色的過程，起聚焦）；服務(wù)領(lǐng)域（響應(yīng)式九宮格，當(dāng)鼠標(biāo)移上去，圖片會(huì)以中心點(diǎn)向外放大企業(yè)榮耀（靜態(tài)數(shù)據(jù)，顯示企業(yè)參與的項(xiàng)目）合作商家（logo版權(quán)（版權(quán)信息）子頁面功能如子頁面標(biāo)題所示；前臺(tái)新聞文摘顯示網(wǎng)站裝飾風(fēng)格cssjavascript靈動(dòng)。網(wǎng)站的鏈接結(jié)構(gòu)校園網(wǎng)站的主要鏈接關(guān)系如下：首頁，關(guān)于寫意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們等其中關(guān)于寫意，企業(yè)文化，新聞中心，有一個(gè)Javascript效果，整合在一個(gè)按鈕上，用一個(gè)下拉方式展示可視化設(shè)計(jì)網(wǎng)站可視化設(shè)計(jì)的主要目的是提供給用戶一個(gè)關(guān)于網(wǎng)站的信息展示方Web建立頁面模型。11響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)具體實(shí)現(xiàn)技術(shù)csscssCSS.serviceArea_mainulli:hoveraimg{transform:scale3d(1.1,1.1,1);-webkit-transform:scale3d(1.1,1.1,1);-moz-transform:scale3d(1.1,1.1,1);-o-transform:scale3d(1.1,1.1,1);-ms-transform:scale3d(1.1,1.1,1);position:relative;}.serviceArea_mainulli:hover.s_Area_gaip{transform-style:preserve-3d;}.serviceArea_mainulliaimg{transition:1s;top:0;left:0;z-index:9;width:100%;vertical-align:top;}CSSDIV，transform:scale3d(1.1,1.1,1);為控制圖-webkit-，-moz-，-o-，-ms-前綴的樣式，目的是transition:1s;改樣式用于設(shè)定動(dòng)畫的過渡時(shí)間，如1.1倍；JavascriptJavaScript是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(EventDriven)并具HTML腳本語言（Java）WebWebHTMLHTML[17]。JavaScript的出現(xiàn)使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)[18]HTMLJavaScript用戶的喜愛。它是眾多腳本語言中較為優(yōu)秀的一種，與WWW現(xiàn)了網(wǎng)絡(luò)計(jì)算和網(wǎng)絡(luò)計(jì)算機(jī)的藍(lán)圖。12響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)Javascript的varoverTop=document.getElementById('top');overTop.onclick=function(){varoldScroll=getSt();tweenFn(-oldScroll);}functiongetSt(){returndocument.documentElement.scrollTop||document.body.scrollTop;}//滾動(dòng)效果functiontweenFn(change,fn){varstart=getSt();varchange=change;vart=0;varendT=30;vartimer=setInterval(function(){t++;if(t>endT){clearInterval(timer);}else{varl=Tween.Cubic.easeIn(t,start,change,endT)document.documentElement.scrollTop=l;document.body.scrollTop=l;}},10);}toptween.js動(dòng)畫過程.由于首頁內(nèi)容偏長(zhǎng)，故設(shè)計(jì)這一按鈕，讓用戶能返回頂部進(jìn)行瀏覽和操作。本章小結(jié)本章具體介紹了網(wǎng)站前端的實(shí)現(xiàn)，在動(dòng)畫效果的實(shí)現(xiàn)中給出了具體的代CSSjavascriptjavascriptIE8，IE913響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)第五章部分項(xiàng)目源碼首頁HTML<headlang="en"><metacharset="UTF-8"><title>首頁</title><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><linkrel="stylesheet"href="css/reset.css"/><linkrel="stylesheet"href="css/style.css"/><linkrel="stylesheet"href="css/media.css"/><scripttype="text/javascript"src="js/jquery-1.11.3.min.js"></script><scripttype="text/javascript"src="js/tween.js"></script><scriptsrc="js/scrollTopJQ.js"></script></head><body><!--容器層--><!--banner開始--><divid="banner"><divclass="logo"><imgsrc="imgs/logo-02.png"alt=""/><pclass="banner_tit">領(lǐng)先的數(shù)字展示方案提供商</p></div><divid="tab_box"><imgclass="img"src="imgs/index_banner.jpg"id="img"/><!--用來撐開高度的img--><divclass="view"id="view"><imgsrc="imgs/index_banner.jpg"alt=""style="opacity:1;filter:alpha(opacity=100)"/><imgsrc="imgs/index_banner2.jpg"alt=""/><imgsrc="imgs/index_banner.jpg"alt=""/><imgsrc="imgs/index_banner.jpg"alt=""/></div><ulclass="tab_btnclear"id="tab_btn"><liclass="btn_selecet"></li><li></li><li></li><liclass="last"></li></ul>14響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)</div><aclass="to_bottom"id="to_bottom"><imgsrc="imgs/to_bottom.jpg"alt=""/></a></div><!--banner結(jié)束--><!--首頁導(dǎo)航--><divclass="nav_mainclear"id="nav_main"><divclass="zy_navclear"><ulclass="nav_left"><li><ahref="index.html"class="nav_select">首頁</a></li>id="menu_btn"/>

<liid="menu_li"><ahref="about.html">關(guān)于寫意</a><imgsrc="imgs/nav_bg.png"alt=""<divclass="list_dragdown"style="display:none"id="menu"></a></li>

<divclass="listtop"></div><ulclass="clear"><li><ahref="fuli.html">企業(yè)文化<liclass="bordernone"><ahref="new.html">新聞中心</a></li></ul><divclass="listbottom"></div></div></li><li><ahref="http://6./">寫意數(shù)字</a></li><li><ahref="http://3./">意凡設(shè)計(jì)</a></li><li><ahref="http://4./">BIM</a></li><li><ahref="###">寫意展示</a></li><li><ahref="###">銀河魔方</a></li><li><ahref="###">寫意傳播</a></li><li><ahref="recruitment.html">人才招聘</a></li><li class="last"><ahref="contact.html">聯(lián)系我們</a></li></ul>15<!--隱藏的導(dǎo)航欄-->

響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)<divid="nav_btn"><imgsrc="imgs/nav.png"/><ulid="yc_nav"><li><ahref="index.html">首頁</a></li><li><ahref="about.html">關(guān)于寫意</a></li><li><a寫意數(shù)字</a></li><li><a意凡設(shè)計(jì)</a></li><li><ahref="http://4./"><li><ahref="">寫意展示</a></li><li><ahref="">銀河魔方</a></li><li><ahref="">寫意傳播</a></li><li><ahref="recruitment.html">人才招聘</a></li>

<li><ahref="contact.html">聯(lián)系我們</a></li></ul></div><divclass="toprf"><imgsrc="imgs/goTop.png"alt=""id="top"/></div></div></div><!--首頁導(dǎo)航結(jié)束--><!--b_detail<divclass="wrap"id="nav_bu"><divclass="gbrands"id="thegbrands"><divclass="gbrandTopclear"><divclass="title"><divclass="hrleft"></div><H6>旗下品牌</H6><p>GROUP'SBRANDS</p><divclass="hrright"></div></div></div><divclass="gbrands_mainclear"id="gbrands"><divclass="gbranditem"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><imgclass="imglogoimg1src="imgs/table-logo.png"alt=""/><imgclass="imglogosrc="imgs/table-logo2.png"alt=""/><h5>寫意數(shù)字</h5>16服務(wù)</p>

響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)<p>為設(shè)計(jì)領(lǐng)域提供效果圖、動(dòng)畫多媒體及三維互動(dòng)業(yè)務(wù)<imgstyle="vertical-align:top"src="imgs/g_brands1.jpg"alt=""/></div><divclass="gbranditemgbranlast"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><imgclass="imglogoimg2src="imgs/table-evon.png"alt=""/><imgclass="imglogosrc="imgs/table-evon2.png"alt=""/><h5>意凡設(shè)計(jì)</h5><p>室內(nèi)創(chuàng)意設(shè)計(jì)及后期施工，為品牌解決全套室內(nèi)裝修</p><imgstyle="vertical-align:top"src="imgs/g_brands2.jpg"alt=""/></div><divclass="gbranditemclearMargin"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><imgclass="imglogoimg3colors"src="imgs/table-bim.png"alt=""/><imgclass="imglogoimg3"src="imgs/table-bim2.png"alt=""/>

<h5>寫意BIM</h5><p>建筑信息模型在建筑領(lǐng)域的操作應(yīng)用及推廣</p><imgstyle="vertical-align:top"src="imgs/g_brands3.jpg"alt=""/></div><divclass="gbranditemgbranlast"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><h5>意展展示</h5><p>提供策劃、設(shè)計(jì)及施工三環(huán)一體化解決方案</p><imgstyle="vertical-align:top"src="imgs/g_brands4.jpg"alt=""/></div><divclass="gbranditem"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><h5>銀河魔方</h5><p>影視制作、廣告拍攝、影視項(xiàng)目策劃</p><imgstyle="vertical-align:top"17響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)src="imgs/g_brands5.jpg"alt=""/></div><divclass="gbranditemclearMarginR"><imgclass="gbranditem_gai"src="imgs/gBrands_gai.png"alt=""/><h5>寫意傳播</h5><p>企業(yè)品牌定位與策劃、VI設(shè)計(jì)、整合營(yíng)銷服務(wù)</p><imgstyle="vertical-align:top"src="imgs/g_brands6.jpg"alt=""/></div></div></div><!--旗下品牌結(jié)束--><!--服務(wù)項(xiàng)目--><divclass="serviceitem"id="serviceitem1"><divclass="sitemTopclear"><divclass="title"><divclass="hrleft"></div><H6>服務(wù)項(xiàng)目</H6><p>SERVICEITEMS</p><divclass="hrright"></div></div></div><ulclass="sitem_mainclear"id="serviceitem"><liclass="sitem"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item1.jpg"alt=""/><imgsrc="imgs/s_item11.jpg"class="img1"alt=""/>

<h4>效果圖</h4><p>規(guī)劃設(shè)計(jì)、公共建筑、商業(yè)建筑、居住建筑、景觀設(shè)計(jì)、室內(nèi)設(shè)計(jì)、燈光改造、手繪表現(xiàn)</p></span></div><divclass="border_bottom_con"><divclass="border_bottom_left">18響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)<divclass="border_bottom_right"></div></div></div></a></li><liclass="sitemsitemlast"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item2.jpg"alt=""/><imgsrc="imgs/s_item22.jpg"class="img1"alt=""/>案動(dòng)畫、設(shè)計(jì)方案演示</p>

<h4>多媒體動(dòng)畫</h4><p>企業(yè)宣傳片、商業(yè)地產(chǎn)宣傳片、設(shè)計(jì)方</span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitem"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item3.jpg"alt=""/><imgsrc="imgs/s_item33.jpg"class="img1"alt=""/>

<h4>三維互動(dòng)</h4>19家居三維互動(dòng)系統(tǒng)</p>

響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)<p>房產(chǎn)三維互動(dòng)系統(tǒng)、工業(yè)三維互動(dòng)系統(tǒng)、</span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitemclearMarginR"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item4.jpg"alt=""/><imgsrc="imgs/s_item44.jpg"class="img1"alt=""/>家居動(dòng)畫、醫(yī)療動(dòng)畫

<h4>產(chǎn)品動(dòng)畫說明書</h4><p>CG攝影、電子產(chǎn)品動(dòng)畫、工業(yè)機(jī)械動(dòng)畫、</span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitem"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div>20<divclass="sitem_con"><span>

響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)class="img1"alt=""/>物館、主題展館

<imgsrc="imgs/s_item5.jpg"alt=""/><imgsrc="imgs/s_item55.jpg"<h4>展覽展示</h4><p>線上展館<br/>實(shí)體展館：企業(yè)展館、科技館、文化館、博</p></span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitemsitemlast"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item6.jpg"alt=""/><imgsrc="imgs/s_item66.jpg"class="img1"alt="">項(xiàng)目</div>

<h4>意凡設(shè)計(jì)</h4><p>商業(yè)空間、酒店/會(huì)所、辦公空間、地產(chǎn)</p></span><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div>21響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)</a></li><liclass="sitem"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item7.jpg"alt=""/><imgsrc="imgs/s_item77.jpg"class="img1"alt=""/>

<h4>BIM</h4><p>BIM項(xiàng)目制作：信息化模型構(gòu)建、碰撞檢測(cè)&凈高控制、管線綜合、機(jī)電設(shè)備族庫(kù)制作<br/>BIMBIMBIM</p></span></div><divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li><liclass="sitemclearMarginR"><ahref="###"><divclass="border_top_con"><divclass="border_top_left"><divclass="border_top_right"></div></div></div><divclass="sitem_con"><span><imgsrc="imgs/s_item8.jpg"alt=""/><imgsrc="imgs/s_item88.jpg"class="img1"alt="">

<h4>影視廣告</h4><p>企業(yè)專題片、紀(jì)錄片、地產(chǎn)影視片微電影拍攝影視廣告、TVC22制作</p></span></div>

響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)電視劇/網(wǎng)劇制作、劇本創(chuàng)作評(píng)估拍攝藝人導(dǎo)演聯(lián)絡(luò)、影視發(fā)行<divclass="border_bottom_con"><divclass="border_bottom_left"><divclass="border_bottom_right"></div></div></div></a></li></ul></div><!--服務(wù)項(xiàng)目結(jié)束--><!--服務(wù)領(lǐng)域--><divclass="serviceitem"id="serviceitem2"><divclass="sitemTopclear"><divclass="title"><divclass="hrleft"></div><H6>服務(wù)領(lǐng)域</H6><p>SERVICEAREA</p><divclass="hrright"></div></div></div><divclass="serviceArea_main"id="s_item"><ulclass="row"><li><ahref="###"><divclass="s_Area_gai"><p>建筑設(shè)計(jì)領(lǐng)域</p></div><imgsrc="imgs/s_area1.jpg"alt=""/></a></li><liclass="lastt"><aclass="s_Area_gai"><p>城市地產(chǎn)領(lǐng)域</p></div><imgsrc="imgs/s_area2.jpg"alt=""/></a></li><liclass="last"><aclass="s_Area_gai"><p>影視廣告領(lǐng)域</p></div><imgsrc="imgs/s_area3.jpg"alt=""/></a></li><liclass="lastt"><aclass="s_Area_gai"><p>醫(yī)療通信領(lǐng)域</p></div><imgsrc="imgs/s_area4.jpg"alt=""/></a></li><li><ahref="###"><divclass="s_Area_gai"><p>23響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)物流港口領(lǐng)域</p></div><imgsrc="imgs/s_area5.jpg"alt=""/></a></li><liclass="lastlastt"><ahref="###"><divclass="s_Area_gai"><p>軍事能源領(lǐng)域</p></div><imgsrc="imgs/s_area6.jpg"alt=""/></a></li><li><ahref="###"><divclass="s_Area_gai"><p>政府企業(yè)領(lǐng)域</p></div><imgsrc="imgs/s_area7.jpg"alt=""/></a></li><liclass="lastt"><aclass="s_Area_gai"><p>工業(yè)產(chǎn)品領(lǐng)域</p></div><imgsrc="imgs/s_area8.jpg"alt=""/></a></li><liclass="last"><aclass="s_Area_gai"><p>旅游開發(fā)領(lǐng)域</p></div><imgsrc="imgs/s_area9.jpg"alt=""/></a></li></ul></div></div><!--服務(wù)領(lǐng)域結(jié)束--><divid="serviceitem3"><!--企業(yè)榮譽(yù)--><divclass="serviceitem"><divclass="sitemTopclear"><divclass="title"><divclass="hrleft"></div><H6>企業(yè)榮譽(yù)</H6><p>ENTERPRISEHONOR</p><divclass="hrright"></div></div></div><divclass="honour_mainclear"><imgclass="h_img1"src="imgs/hlogo1.jpg"alt=""/>alt=""/>alt=""/>alt=""/>alt=""/>

<imgclass="h_img2"src="imgs/hlogo2.jpg"<imgclass="h_img3"src="imgs/hlogo3.jpg"<imgclass="h_img4"src="imgs/hlogo4.jpg"<imgclass="h_img5"src="imgs/hlogo5.jpg"<imgclass="h_img6clearMarginR"src="imgs/hlogo6.jpg"alt=""/></div>24響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)</div><!--企業(yè)榮耀結(jié)束-->banner--><divclass="foot_banner"><imgsrc="imgs/banner2.jpg"alt=""/></div><!--第二張banner結(jié)束--></div><!--合作商家--><divclass="cooperation" id="serviceitem4"><divclass="cooperation_title"><H6><spanclass="c_left">-</span>合作商家<spanclass="c_right">-</span></H6></div><divclass="cooperation_main"><imgsrc="imgs/logo_pic.jpg"alt=""/></div></div><!--合作商家結(jié)束--></div><!--腳部信息--><divclass="footer_mainclear"><divclass="wrap"><divclass="footer_topclear"><divclass="footer_leftlf"><dl><dt>寫意集團(tuán)</dt><dd><ahref="###">關(guān)于寫意</a></dd><dd><ahref="###">人才招聘</a></dd><dd><ahref="###">聯(lián)系我們</a></dd></dl><dl><dt>寫意數(shù)字</dt><dd><ahref="###">效果圖</a></dd><dd><ahref="###">動(dòng)畫多媒體</a></dd><dd><ahref="###">三維互動(dòng)</a></dd><dd><ahref="###">產(chǎn)品動(dòng)畫說明書</a></dd><dd><ahref="###">行業(yè)方案</a></dd><dd><ahref="###">關(guān)于我們</a></dd><dd><ahref="###">人才招聘</a></dd><dd><ahref="###">聯(lián)系我們</a></dd>25</dl><dl><dt>意凡設(shè)計(jì)</dt>

響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)費(fèi)alt=""/>

<dd><ahref="###">關(guān)于我們</a></dd><dd><ahref="###">設(shè)計(jì)團(tuán)隊(duì)</a></dd><dd><ahref="###">項(xiàng)目案例</a></dd><dd><ahref="###">聯(lián)系我們</a></dd></dl><dl><dt>寫意BIM</dt><dd><ahref="###">概述</a></dd><dd><ahref="###">團(tuán)隊(duì)介紹</a></dd><dd><ahref="###">BIM</a></dd><dd><ahref="###">BIM</a></dd><dd><ahref="###">案例介紹</a></dd></dl><dl><dt>意展展示</dt><dd><ahref="###">關(guān)于意展</a></dd><dd><ahref="###">展館工程</a></dd><dd><ahref="###">線上展館體驗(yàn)</a></dd><dd><ahref="###">技術(shù)與創(chuàng)意</a></dd><dd><ahref="###">服務(wù)流程</a></dd><dd><ahref="###">人才招聘</a></dd></dl></div><divclass="footer_rightrf"><ahref="###"><imgsrc="imgs/info.jpg"alt=""/></a><imgclass="tel"src="imgs/tel.jpg"alt=""/><divclass="clear"></div><divclass="times">周一至周日9:00-18:00(僅收市話<div><imgclass="er"src="imgs/er.jpg"alt=""/><imgclass="weibo"src="imgs/weibo.jpg"</div></div></div><divclass="footer_bottom"><p>Copyright?1998-2015寫意集團(tuán)版權(quán)所有</p></div></div></div>26響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)<!--腳部信息結(jié)束--></body><scripttype="text/javascript"src="js/main.js"></script><script>$.fn.extend({mousewheel:function(Fn){if(window.navigator.userAgent.indexOf("Firefox")>-1){$(this).get(0).addEventListener("DOMMouseScroll",wheel,false)}else{$(this).get(0).onmousewheel=wheel;}functionwheel(e){vardown=false;if(e.detail){down=e.detail>0;}else{down=e.wheelDelta<0;}//Fn(down,e)Fn.call($(this).get(0),down,e)//Fn.apply(obj,[down])if($(window).width()>1280)if(e.preventDefault){e.preventDefault();};returnfalse;}}}})$(window).on("load",function(){varindex=0;varmovebol=false;arr=[0,$("#banner").offset().top,$("#thegbrands").offset().top,$("#serviceitem1").offset().top,$("#serviceitem2").offset().top,$("#serviceitem3").offset().top,$("#serviceitem4").offset().top,$("body").outerHeight()-$(window).height()];$("#to_bottom").on("click",function ()if(movebol){return};27movebol=true;

響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)$(window).sTopFn(arr[2],function ()index=2;movebol=false;});})setTimeout(function ()movebol=true;$(window).sTopFn(0,function ()movebol=false;})},30)$(window).mousewheel(function (down){if($(window).width()<1280)if(movebol){return};arr=[0,$("#banner").offset().top,$("#thegbrands").offset().top,$("#serviceitem1").offset().top,$("#serviceitem2").offset().top,$("#serviceitem3").offset().top,$("#serviceitem4").offset().top,$("body").outerHeight()-$(window).height()];movebol=true;if(down){index++;if(index>7){index=7;}}else{index--;if(index<0){index=0;};}$(window).sTopFn(arr[index],function ()movebol=false;//alert(movebol);})var$top=$("#banner").height();var$nav=$("#nav_main");if($(window).scrollTop()>$top){$nav.css({position:"fixed",top:0});}else{$nav.css({position:"absolute",top:$top})28響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)$("#nav_bu").css({"padding-top":"0"})}})window.onscroll=function (){var$top=$("#banner").height();var$nav=$("#nav_main");if($(window).scrollTop()>$top){$nav.css({position:"fixed",top:0});}else{$nav.css({position:"absolute",top:$top})$("#nav_bu").css({"padding-top":"0"})}varoTop=document.body.scrollTop==0?document.documentElement.scrollTop:document.body.scrollTop;varscrollTop=oTop;for(vari=0;i<arr.length;i++){if(scrollTop>=parseInt(arr[i])){index=i;};};//console.log(scrollTop);}})functionbanner(obj,dra){varview=document.getElementById(obj);varimg=view.getElementsByTagName('img');vartabBtn=document.getElementById(dra);varli=tabBtn.getElementsByTagName('li');varindex=0;varbol=false;for(vari=0;i<li.length;i++){vartemp=img[0];varold=li[0];li[i].index=i;li[i].onclick=function(){if(bol){return;}old.className="";29響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)index=this.index;this.className="btn_selecet";if(temp==img[index]){return};opacityFn(0.02,2,img[index],temp);old=li[index];temp=img[index];}};//漸隱漸現(xiàn)functionopacityFn(num,numIe,obj,dra){bol=true;varo=0;varvarotemp=1;varotempIe=100;vartimer=setInterval(function(){o+=num;oIe+=numIe;otemp-=num;otempIe-=numIe;if(o>1||otemp<0){o=1;otemp=0;clearInterval(timer);bol=false;}obj.style.opacity=o;obj.style.filter="alpha(opacity="+oIe+")";dra.style.opacity=otemp;dra.style.filter="alpha(opacity="+otempIe+")";},30)}}banner('view','tab_btn');$sitem=$("#s_item").find("li");$sitem.mouseenter(function(){})30響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)$(".gbranditem").hover(function (){$(this).find(".img1:eq(1)").fadeOut(100)$(this).find(".colors").fadeIn();},function (){$(this).find(".colors").fadeOut(100);$(this).find(".img1:eq(1)").fadeIn()})var$menu=$("#menu");$("#menu_li").hover(function (){$menu.show();},function (){$menu.hide();})</script>首頁CSS.clear{zoom:1;}.clear:after{content:"";display:block;clear:both;height:0;overflow:hidden;}.lf{float:left;}.rf{float:right;}#wrap{width:1366px;margin:0auto;overflow:hidden;}.nav_main{width:82.72%;margin:0auto;}.nav_left{width:87.34%;31響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)}.nav_lefta{color:#626262;float:left;font-size:14px;padding:39px45px39px0;}.nav_left.nav_select{color:#d6000f;}.top{padding-top:27px;width:7.25%;vertical-align:middle;}.topimg{cursor:pointer;width:100%;}.nav_dragdown{position:relative;background:url("../imgs/nav_bg.jpg")no-repeat60pxcenter;}.list_dragdown{top:70px;left:26px;text-align:center;position:absolute;border:1pxsolidborder-width:1px1px01px;}.listtop{margin-top:-6px;width:76px;height:6px;background:url("../imgs/list_top.jpg")no-repeat;}.listbottom{background:url("../imgs/list_bottom.png")no-repeat;position:absolute;width:76px;height:2px;bottom:-2px;}32響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn).list_dragdownli{color:#626262;padding:10px0;margin:012px;border-bottom:1pxsolid#e5e5e5;}.list_dragdownborder:none;}@charset"utf-8";/*CSSDocument*//*@font-face{font-family:'FZLTCXHJW';src:url('../font/FZLTCXHJW.TTF');font-weight:normal;font-style:normal;}*/img{border:none;}body{font-size:12px;}/*首頁*/.clear{zoom:1;}.clear:after{content:"";display:block;clear:both;height:0;overflow:hidden;}.lf{float:left;}.rf{float:right;}.wrap{33響應(yīng)式企業(yè)網(wǎng)站