【文章內(nèi)容簡介】 。margin 支持負(fù)值，在頁面布局中，應(yīng)該大膽的用，可以解決很多問題。最常用的就是 div 居中:margin:0 auto。當(dāng)然一定要固定寬度。div style=“width:200px。textalign:center?！眃iv style=“width:100px?！睙o標(biāo)題文檔/div/div 這個屬性是無法居中的，如圖所示 33 所示：響應(yīng)式企業(yè)網(wǎng)站設(shè)計與實現(xiàn)933 盒子模型 交互設(shè)計與 UI 交互設(shè)計是一種目標(biāo)導(dǎo)向設(shè)計，所有的工作內(nèi)容都是在圍繞著用戶行為去設(shè)計的。交互設(shè)計師通過設(shè)計用戶的行為，讓用戶更方便更有效率的去完成產(chǎn)品業(yè)務(wù)目標(biāo)，獲得愉快的用戶體驗。如果是廣義的 UI 設(shè)計，應(yīng)該包括原型設(shè)計、交互設(shè)計、視覺設(shè)計。狹義的UI 往往只是人們看到的最后一個環(huán)節(jié) UI 視覺設(shè)計，交互是當(dāng)用戶發(fā)生動作事件，所產(chǎn)生的反映。比如點擊彈出下拉菜單，瀏覽過鏈接的顏色變紫，這都是非常細(xì)微的交互，但卻處處體現(xiàn)著用戶體驗。交互設(shè)計更多是對用戶行為響應(yīng)的設(shè)計,UI 視覺設(shè)計，更多是界面的外觀靜態(tài)設(shè)計。所以這種情況下，交互設(shè)計尤為重要，既不能失去 UI 設(shè)計的特性，又要確保 UI 設(shè)計師利用其專業(yè)知識在視覺結(jié)構(gòu)內(nèi)進(jìn)行充分發(fā)揮，這是一種藝術(shù) 網(wǎng)站結(jié)構(gòu)布局與設(shè)計 網(wǎng)站首頁結(jié)構(gòu)實際內(nèi)容占據(jù)網(wǎng)頁的大部分空間，為 50%～80%，導(dǎo)航部分不超過 20%。顏色的選擇以灰白色為主，沒有使用太多的顏色來修飾某個對象，此外，正，一般字色為默認(rèn)的近黑色，并且用了不同的背景色條或大圖與留白區(qū)區(qū)分正文區(qū)與其他功能區(qū)。為了提高網(wǎng)頁的可讀性，標(biāo)題區(qū)，標(biāo)題行和正文區(qū)使用了不同大小的字體，正文使用的是靜止的文字，且字體足夠大，顏色各方面易于辨認(rèn)，以便于閱讀。 寫意集團響應(yīng)式企業(yè)官網(wǎng)網(wǎng)站主要用來進(jìn)行公司信息發(fā)布，公司資源展示。作為一個網(wǎng)站，應(yīng)該由一些相關(guān)及相對獨立的模塊整合而成。本網(wǎng)站系統(tǒng)主要包括以下幾個主要頁面及幾個大的模塊，每個頁面包含豐富的內(nèi)容，每個大的模塊下又細(xì)分為幾個的功能模塊。 制作前臺頁面模塊，包括主頁及各個子頁面，建立各個頁面之間的相關(guān)鏈接。整體網(wǎng)站遵循寫意集團響應(yīng)式企業(yè)官網(wǎng)網(wǎng)站的設(shè)計思路，擁有完響應(yīng)式企業(yè)網(wǎng)站設(shè)計與實現(xiàn)10善的功能，風(fēng)格要求簡潔大方不單調(diào)。各個子頁面都可正常返回主頁以及正確連接到各個子頁面。功能要求使用簡單全面，容易操作。 主題鮮明，富有特色 在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計方案。對網(wǎng)站的整體風(fēng)格和特色做出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。整個首頁大量運用動畫以及目前常用的簡單卻用戶體驗好的效果，要做到主題鮮明突出，力求簡潔，要點明確，以簡單動作與交互讓用戶更好的了解網(wǎng)站的主題內(nèi)容，吸引對本站點有需求的人的視線，對無關(guān)的人員也能留下一定的印象。對于一些 LOGO 標(biāo)志也都給充分利用起來，在首頁的logo 首次加載的時候做了一個 logo 動畫，以其來吸引用戶注意力。調(diào)動一切手段充分表現(xiàn)網(wǎng)站的個性和情趣，突出個性，這樣才能夠辦出網(wǎng)站的特色。 網(wǎng)站前臺頁面設(shè)計寫意集團響應(yīng)式企業(yè)官網(wǎng)主要包括：首頁，關(guān)于寫意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們等 9 個子頁面。制作過程如下： 首頁網(wǎng)站制作過程：首先利用 Photoshop 以寬度為 1920px，高度自動排列，制作了網(wǎng)站的首頁設(shè)計圖，之后使用 Webstorm 中用布局出整個首頁的大體布局格式，主要分為 6 部分，雖然設(shè)計圖寬為 1920，但當(dāng)屏幕不適配 1920寬度的時候，對其進(jìn)行自適應(yīng)滿屏，并且因為要實現(xiàn)一個“滾一屏”效果，故每個板塊高度也要自適應(yīng)高度。然后通過 CSS 樣式來調(diào)布局樣式以及圖片，文字的位子。主頁包括的內(nèi)容主要有：網(wǎng)站的域名，導(dǎo)航條，LOGO，版權(quán)。導(dǎo)航條又包含首頁，關(guān)于寫意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們等。 其余子頁面子頁面的設(shè)計風(fēng)格基本一致，導(dǎo)航欄跟隨瀏覽器滾動，始終貼在瀏覽器窗口上方，下面是滿屏幕寬度的 banner 圖，下方便是各大模塊內(nèi)容的顯示；制作過程中采用的制作方法和調(diào)用的模塊內(nèi)容跟上一個差不多 本章小結(jié)本章主要介紹了寫意集團響應(yīng)式企業(yè)官網(wǎng)的具體布局，具體結(jié)構(gòu)。也說明了前端頁面從設(shè)計到代碼編寫的基本工作流程，講述了界面 UI 設(shè)計和交互設(shè)計中的一些理論和真是設(shè)計效果。響應(yīng)式企業(yè)網(wǎng)站設(shè)計與實現(xiàn)11第四章 主要功能的實現(xiàn) 界面設(shè)計完善的網(wǎng)站內(nèi)容。網(wǎng)站的整體顏色：灰白色為導(dǎo)航顏色；主體顏色：灰白色；字體：微軟雅黑；行距：150%。 網(wǎng)站統(tǒng)一頂部為導(dǎo)航條，首頁，關(guān)于寫意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們。 首頁網(wǎng)站上中部：banner 圖片。 網(wǎng)站中部：網(wǎng)站信息；站點數(shù)據(jù)；圖文信息。 網(wǎng)站底部：網(wǎng)站/版面制作；版權(quán)信息。其中網(wǎng)站的導(dǎo)航條會一路跟隨屏幕滾動 具體設(shè)計文檔內(nèi)容和功能設(shè)計這個企業(yè)網(wǎng)站主要實現(xiàn)企業(yè)信息展示，公告展示等功能。先明確各板塊提供的主要功能：首頁功能板塊：旗下品牌（默認(rèn)灰色，當(dāng)鼠標(biāo)移上去有一個變彩色的過程，起聚焦）；服務(wù)項目（默認(rèn)灰色，當(dāng)鼠標(biāo)移上去有一個變彩色的過程，起聚焦）；服務(wù)領(lǐng)域（響應(yīng)式九宮格，當(dāng)鼠標(biāo)移上去，圖片會以中心點向外放大）；企業(yè)榮耀（靜態(tài)數(shù)據(jù)，顯示企業(yè)參與的項目）合作商家（眾多合作商家 logo 排列）版權(quán)（版權(quán)信息）子頁面功能如子頁面標(biāo)題所示； 前臺新聞文摘顯示 網(wǎng)站裝飾風(fēng)格采用了灰白色為主導(dǎo)航顏色，首頁中運用滾一屏效果，以及各種 css 動畫或者 javascript 效果，使整個網(wǎng)站看上去雖大部分為灰白色，但不失其靈動。 網(wǎng)站的鏈接結(jié)構(gòu)校園網(wǎng)站的主要鏈接關(guān)系如下： 首頁，關(guān)于寫意，企業(yè)文化，新聞中心，人才招聘，聯(lián)系我們等其中關(guān)于寫意，企業(yè)文化，新聞中心，有一個 Javascript 效果，整合在一個按鈕上，用一個下拉方式展示 可視化設(shè)計網(wǎng)站可視化設(shè)計的主要目的是提供給用戶一個關(guān)于網(wǎng)站的信息展示方案，一個良好有效的網(wǎng)站可視化設(shè)計能給用戶留下深刻的印象，使得用戶能夠自然，友好的瀏覽 Web 站點所提供的信息，也是網(wǎng)站設(shè)計中重要的一環(huán)。 響應(yīng)式企業(yè)網(wǎng)站設(shè)計與實現(xiàn)12可視化設(shè)計最重要的是確定網(wǎng)站的頁面布局。然后設(shè)計網(wǎng)頁的表現(xiàn)框架，建立頁面模型。 具體實現(xiàn)技術(shù) css 在“寫意集團響應(yīng)式企業(yè)官網(wǎng)”中的應(yīng)用實例在該網(wǎng)站中使用了大量 css 動畫，使頁面有了特殊的顯示效果寫意集團響應(yīng)式企業(yè)官網(wǎng)中 CSS 樣式表使用的部分代碼：.serviceArea_main ul li:hover a img{ transform: scale3d(,1)。 webkittransform: scale3d(,1)。 moztransform: scale3d(,1)。 otransform: scale3d(,1)。 mstransform: scale3d(,1)。 position: relative。}.serviceArea_main ul li:hover .s_Area_gai p{transformstyle: preserve3d。}.serviceArea_main ul li a img{ transition:1s。 top: 0。 left:0。 zindex:9。 width: 100%。 verticalalign: top。}以上樣式是用于設(shè)置首頁的服務(wù)領(lǐng)域一部分的 CSS 效果，當(dāng)鼠標(biāo)移上去的時候，首先圖片上方會有一個黑色的遮罩，然后圖片有一個逐漸放大的效果，但不撐開外面的 DIV，其中 transform: scale3d(,1)。為控制圖片縮放，其下方還有加了webkit，moz，o，ms前綴的樣式，目的是兼容別的瀏覽器廠商；transition:1s。改樣式用于設(shè)定動畫的過渡時間，如果缺少則無法上述的圖片縮放樣式將沒有動畫，而只是直接把圖片放大 倍； 應(yīng)用 Javascript 設(shè)計網(wǎng)頁JavaScript 是一種基于對象(Object)和事件驅(qū)動(Event Driven)并具有安全性能的腳本語言。使用它的目的是與 HTML 超文本標(biāo)記語言，Java 腳本語言（Java 小程序）一起實現(xiàn)在一個 Web 頁面中鏈接多個對象，與Web 客戶交互作用，從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的 HTML 語言中實現(xiàn)的。它的出現(xiàn)彌補了 HTML 語言的缺陷[17]。 JavaScript 的出現(xiàn)使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實現(xiàn)了一種實時的，動態(tài)的，可交式的表達(dá)能力[18]。從而基于CGI 靜態(tài)的 HTML 頁面將被可提供動態(tài)實時信息，并對客戶操作進(jìn)行反應(yīng)的Web 頁面的取代。JavaScript 腳本正是滿足這種需求而產(chǎn)生的語言。它深響應(yīng)式企業(yè)網(wǎng)站設(shè)計與實現(xiàn)13受廣泛用戶的喜愛。它是眾多腳本語言中較為優(yōu)秀的一種，與 WWW 的結(jié)合有效地實現(xiàn)了網(wǎng)絡(luò)計算和網(wǎng)絡(luò)計算機的藍(lán)圖。在網(wǎng)站開發(fā)中使用了下面這么一段 Javascript 代碼，用來回到網(wǎng)頁頂部的var overTop=(39。top39。)。=function(){var oldScroll=getSt()。tweenFn(oldScroll)。}function getSt(){return ||。}//滾動效果function tweenFn(change,fn) {var start=getSt()。var change=change。var t=0。var endT=30。var timer=setInterval(function(){t++。if (tendT) {clearInterval(timer)。}else{var l=(t,start,change,endT)=l。=l。}},10)。}此代碼主要是實現(xiàn)導(dǎo)航欄里面的 top 按鈕，當(dāng)用戶點擊的時候可以自動滾屏至頁面頂部，其中還利用了一個 的插件，來優(yōu)化回到頂部的，故設(shè)計這一按鈕，讓用戶能返回頂部進(jìn)行瀏覽和操作。 本章小結(jié)本章具體介紹了網(wǎng)站前端的實現(xiàn)，在動畫效果的實現(xiàn)中給出了具體的代碼。說明了在頁面設(shè)計過程的具體實現(xiàn)，說明了網(wǎng)站修飾風(fēng)格，可視化的重要概念。也是整個網(wǎng)站集聚吸引力的地方。整個網(wǎng)站的響應(yīng)式功能試驗不單單用了 CSS 的樣式，還利用 javascript 去配合實現(xiàn)，缺一不可。并且整個網(wǎng)站為了方便向下兼容，即向低版本瀏覽器兼容，多說動畫利用javascript 來實行，提高了兼容性，雖然一定程度上來說，影響了部分性能，但以基本實現(xiàn) IE8 版面不亂，IE9 以上所有效果界面均正常顯示。響應(yīng)式企業(yè)網(wǎng)站設(shè)計與實現(xiàn)14第五章部分項目源碼 首頁 HTML 代碼head lang=en meta charset=UTF8 title首頁/title meta name=viewport content=width=devicewidth,initialscale=1,minimumscale=1,maximumscale=1 link rel=stylesheet href=css// link rel=stylesheet href=css// link rel=stylesheet href=css// /headbody!容器層 ! banner 開始 div id=banner div class=logo img src=imgs/ alt=/ p class=banner_tit領(lǐng)先的數(shù)字展示方案提供商/p /div div id=tab_box img class=img src=imgs/ id=img / !用來撐開高度的 img div class=view id=view img src=imgs/ alt= style=opacity:1。 filter:alpha(opacity=100)/ img src=imgs/ alt= / img src=imgs/ alt= / img src=imgs/ alt= / /div ul class=tab_btn clear id=tab_btn li class=btn_selecet/li