網頁設計CSS布局方式比對范文

本站小編為你精心準備了網頁設計CSS布局方式比對參考范文，愿這些范文能點燃您思維的火花，激發您的寫作靈感。歡迎深入閱讀并收藏。

1CSS布局技術概述

CSS（CascadingStyleSheet）中文譯為層疊樣式表。它是一門經過標準化的WEB標準。最早是在1996年由W3C組織審核通過并推薦使用。針對于網頁設計越來越趨向整體結構化，web標準也將網頁拆分成了三個相對獨立的部分：結構層（structure）,表現層（presentation）及行為層（behavior）。在基于標準的WEB開發中，css的作用就是負責控制網頁的表現層。如果我們把HTML比做是人的身體的話，CSS代碼我們就可以看成是穿在人身上的衣服。我們說什么是最完美的頁面布局方式？這是一個已經困擾了設計者很多年的問題。CSS的主要功能被很多人誤以為就是那些特殊效果的實現。實際上，它的真正核心應該在于強大的頁面布局能力，而并不是實現整個網站排版的一致性或細節上。也只有當網頁布局和網頁內容完美接合時，才能帶給用戶最好的體驗。

2基于CSS布局的幾種方式

盒模型、流動、浮動、定位這四個概念，是最基礎也是最重要的。各種布局技巧的應用都來源于此。選擇怎樣的布局方式主要取決于站點自身的類型和發展。在做決定之前權衡好它們的兩面性，找出適合站點的方案。下面，我們就現今網頁設計過程中較常用到的幾種網頁布局模式做個比較。

2.1固定寬度布局

固定布局(FixedLayout)，指最外面的包裹層(Wrapper)使用固定寬度，其內部的各個部分均使用百分比或者是固定的寬度來表示。其關鍵是，外面的包裹層(或稱為容器)的寬度是固定不變的，所以不論訪問者的瀏覽器是怎樣的分辨率，他們所看到的網頁效果都是完全相同的。固定寬度布局是層疊樣式表中最早應用的布局效果之一。有一個必須要解決的問題是所設計的頁面寬度到底為多少才合適？這涉及到關于現今用戶使用瀏覽器的分辨率大小的問題，據權威組織統計，使用640×480像素的用戶占3%，使用800×600像素的用戶占4%，使用1024×768像素的用戶占36%，而更高像素的用戶占到57%。與此同時，我們了解到五大知名網站，網頁設計時考慮用戶的默認分辨率從800×600的主流設計三年內完全轉化為1024×768。由此可知，現在主流用戶的屏幕分辨率應該是1024×768或者更高。因此960像素成為了網頁設計的最佳寬度。它能夠非常好地展現網頁的內容。960的網格系統已經成為了固定寬度布局的行業標準了。固定寬度布局的優點非常明顯，由于整個布局和布局中的每塊都有預設的寬度。設計人員能夠根據窗口的寬度和屏幕狀況，進行一些精確度量的內部元素的設計。如標語、圖像、以及精確定位的文本等，這種方法非常的適用，而且容易使用。在設計方面方便定制。但是它相對于使用高分辨率的用戶來說，固定寬度布局會留下很大的空白。而屏幕分辨率過小時則會出現默認的滾動條。

2.2流式布局

流式布局(FluidLayout)，使用百分比來設置各個部分的具體寬度，以用來適應不同的分辨率。流式布局的意思是從左到右從上到下來進行自適應。當一行不能容納下內容時則會自動換行。正如它的名字一樣，這種布局具有彈性，可以自動填充需要填充的部分。流布式局頁面相對于用戶來說更為友好，因為它能夠自適應用戶的設置。在視覺上也能更加美觀。合適的技巧會使頁面在大屏幕、小屏幕、PDA小屏幕上都能有良好的呈現效果。所以有人說，這種布局可以讓人隨心所欲的控制自己的網站。當然這種布局也是存在缺點的。如果在特別大的分辨率下，內容會被拉成長長的一行，而當瀏覽器窗口特別小的時候，行又會變得非常狹窄，逐行閱讀變得十分困難。還有就是圖像設計同標語元素設計上也會出現問題。因為在流布局中，圖片需要隨著它包含的元素一起伸縮以適應整體布局的擴大。

2.3彈性布局

我們了解了在流式布局下，如果用戶瀏覽器窗口變寬，網頁內容會變得很難閱讀。如果我們想要能夠隨著網頁元素大小的變化而變化的頁面布局。如字體變小，欄長度及頁面寬度都會相應減少，反之亦然。彈性布局，就能夠實現。彈性布局如果用固定寬度布局轉換也非常簡單，只需要對度量單位進行修改即可。彈性布局（ElasticLayout），指網頁寬度不固定，當你改變字體的大小，其他元素也會隨之發生變化。我們的布局以字體的大小來進行參照變化的。那么這時我們就用em（字體高）而不是用像素值或百分比來定義寬度。em直接表現了字體的大小，因此如果用em表示一個包含框的寬度，當你增加字體大小時，包含框的寬度也會隨之增加。這對于視力弱或有認知障礙的人尤其有用。彈性布局的效果是明顯的，也受到廣大設計師的歡迎。但它也是有局限性的。如果不對這種布局設置一個最小寬度，當用戶縮小窗口到足夠小時，會對布局產生的影響是致命的，造成布局嚴重錯位。當然圖片的隨比例縮放問題，也是一個有待解決的問題。

2.4可變固定寬度布局

可變固定寬度布局（VaribleFixedWidthLayout又叫做分辨率布局方式）指在CSS代碼中設計好關于各種瀏覽器類型所需要的不同尺寸，實現根據瀏覽器類型自動調用不同的CSS布局。這種布局方法的思想是布局能夠自動變化以提供最適合用戶窗口大小的布局效果。例如如果瀏覽器窗口足夠大，那么布局可能包括產生3個固定寬度的列，如果窗口寬度小于某個特定寬度時，那么某一列將無縫地放在另一列下面，從而產生一個兩列的布局。運用該布局最可靠的方法就是通過用javascript來自動評估窗口寬度，從而改變網頁上所運用的CSS規則。這里指的寬度，是你正在瀏覽的窗口的寬度。使用這種技術，你可以將頁面的某一個視圖，作為默認頁面，但是對于正在用大窗口訪問你的站點的用戶來說，你的頁面會相應的放大至整個窗口。這種布局與流動式布局不同。流動式布局是當你移動瀏覽器時，它的尺寸在不斷的重新設置，而這種布局一旦達到了一個“觸發”點，布局才會改變并進而影響到內容。缺點是可能會導致一些跨平臺的問題出現。

2.5混合布局

顧名思義就是集中各種布局方法組合起來使用，取各自之所長。可以想象，各種布局都有它的優缺點。就例如彈性布局來說，它隨著元素的大小而相應發生改變。可是萬一它們將東西放得太大，頁面超出了瀏覽器窗口，那怎么辦？可能這時，你就想取回一部分的控制權，于是就有了混合性布局。可以用em（字體高）定義文本的尺寸、包含框、導航區和內容塊的寬度。但是卻為max-width屬性設置一個百分比，限制它變得過大，而造成的布局混亂。組合流式布局與彈性布局，以em設置寬度，以百分比設置最大寬度。這就是一種典型的混合式布局。這樣的布局方式在極端情況下都能有較好的整體效果。所以，我們說混合布局是結合各個布局的優缺點及布局人員的需要而組合使用的一種良好的布局方式。

3小結

綜上所述，層疊樣式表運用在網頁布局上的方式多種多樣，而我們評價哪種布局方式好的最終目標不是針對它的各種優缺點，而是從三個相關方面來進行探討：可讀性、適應性（方便性）及未來的可維護性。對于網頁設計人員來說，選擇布局方式同時來源于你網站客戶端的需求。只有充分考慮協調好以上各方面，才能實現網站價值的最大化，并且提高網站的競爭力。