探析DIV+CSS布局方式制作商務網頁

楊曉姍

摘?要：布局對網頁的作用類似于設計圖對地產開發商的作用，制作商務網頁的首要內容是對網頁進行布局。常見的布局方式有：表格布局、框架布局、層布局，鑒于以上布局方式均存在一定的缺陷逐漸退出歷史潮流。目前流行的布局方式是DIV+CSS來制作頁面，DIV主要解決網頁中的元素（如文字、圖片、表格、音視頻等）放置在網頁顯示位置的問題，而CSS主要解決網頁元素美觀性的問題。本文主要探討DIV+CSS布局方式用法及要注意的問題。

關鍵詞：DIV+CSS;浮動布局;定位布局

一個商務網頁是否吸引用戶，布局至關重要。所謂布局就是對網頁元素進行定位，網頁整體結構是上中下還是左中右，網頁的LOGO、導航、網頁標題、網頁核心內容、版權信息等內容顯示的位置。鑒于表格布局導致表格標簽的嵌套瀏覽器解析較慢，框架布局不夠靈活，DIV+CSS布局方式逐漸成為主流，DIV實現把頁面進行切割，不同的DIV放置不同的內容，CSS實現對內容進行美化，如添加背景色、設置不同塊之間的間距等等。

1 DIV+CSS的概念

DIV是HTML語言中的一個標簽元素即

CSS（Cascading Style Sheets）指層疊樣式表，作用是對網頁元素進行美化，CSS可以出現在HTML標簽行中、HTML的標簽中、外部樣式表三個位置，在DIV+CSS布局中常常把CSS獨立形成一個.css文件，實現與HTML文件完全分離，可以實現樣式表的重復使用、網頁的結構與表現可以實現完全分離。……