基于css頁面布局的網頁設計

《基于css頁面布局的網頁設計》由會員上傳分享，免費在線閱讀，更多相關內容在學術論文-天天文庫。

1、基于CSS頁面布局的網頁設計摘要：DIV+CSS技術是目前比較成熟的網頁布局設計技術，由于其編寫的代碼可讀性高、簡潔，以及后續(xù)維護方便等優(yōu)勢，目前廣泛應用于網頁設計中。該文基于DIV+CSS的頁面布局方式，以自建網頁（音樂論壇）為樣例，對CSS樣式的框架布局、選擇器類型、盒子模型，以及浮動模型進行闡述并加以運用，最終實現頁面布局的設計效果。中國8/vie　　關鍵詞：CSS；DIV網頁設計；頁面布局　　中圖分類號：TP393文獻標識碼：A：1009-3044（2017）04-0045-01　　在網頁設計中，與傳統(tǒng)布局方式相比，DIV+CS

2、S技術是一項常見的技術，它能提升頁面的實際設計效果[1]。因此，也受到很多設計人員的青睞。本文以自行設計的一個網頁為例子，闡述網頁設計過程中，DIV+CSS布局設計的使用?！　?傳統(tǒng)布局方式　　傳統(tǒng)布局主要有框架布局、層布局和表格布局幾種：框架布局支持滾動條，方便導航，但兼容性差，應用范圍有限，適合小型網站；層布局方法簡單，但是難以實現頁面內容的精準定位，因此在頁面布局中也不常用；表格布局是網頁設計一個重要元素，使頁面信息布局合理、簡潔，但是設計復雜，修改更復雜，很難進行二次開發(fā)，因此也不常用[2]?！　?使用DIV+CSS進行頁面布局

3、　　與傳統(tǒng)的HTML頁面設計語言相比，DIV+CSS布局方法可實現網頁頁面內容與網頁的外觀表現相分離。目前網站設計中多采用這種方式實現定位，以下就以使用DIV+CSS技術進行網頁布局的過程及注意事項進行闡述?！　?）頁面布局總體設計　　使用線框圖等方式進行網頁最初的總體設計，前期的良好規(guī)劃將為后期設計奠定基礎。只要位置確定下來，基本頁面風格就確定下來了，接下來的工作就是通過DIV+CSS往頁面中填充內容了。　　2）內容區(qū)域用DIV包含，并設定格式　　DIV在網頁中表示一個塊，如果不填充實際內容或者設定格式，那么它并無意義。我們可以把DI

4、V看作是一個容器，它可以容納內聯(lián)元素和其他塊?！　∫话愕木W頁設計，結構上可以分為頂部信息（header）、導航（nav）、主要內容（main）和頁腳信息（footer）四個部分。通過DIV將各個部分作為一個塊建立起來，并用CSS語法進行初步的樣式設計?！　SS全稱為“層疊樣式表（CascadingStyleSheets）”，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。CSS樣式表分為3種，分別是嵌入式樣式表、外鏈樣式表和內聯(lián)樣式表，它們的優(yōu)先等級分別是（嵌入式>內聯(lián)、外鏈）。為了方便后期的維護，設計

5、人員一般會采用外鏈樣式表進行設計?！　∵x擇器是CSS中用來指明網頁要使用樣式規(guī)則的元素，常見的選擇器有4種，分別是ID選擇器、Class選擇器、標簽選擇器和偽類選擇器，其中ID選擇器權重最高，且一個頁面中ID的樣式是唯一的，只能使用一次。　　3）CSS編輯每個DIV塊的屬性　　盒子模型是CSS設計中所使用的一種思維模型，要使用CSS對頁面進行布局，就必然會使用到盒子模型。盒子模型一般有4個屬性：內容（content）、填充（padding）、邊框（border）和邊界（margin）。使用盒子模型可以調整DIV在頁面中的位置，達到設計人

6、員要求的效果，但有一些DIV塊需要層疊放置，此時則需要用到CSS布局的另一種功能，即布局樣式或者布局模板。常見的布局樣式有流動模型（Flo].上海：上?？茖W普及出版社，2015.　　[2]王國慶.探究基于DIV+CSS技術的網頁設計優(yōu)化方法[J].信息?c電腦，2016（4）：140-141.