聞立鷗
摘要:隨著信息技術的飛速發展,網頁的制作技術也在不斷進步,CSS+DIV是當前網頁布局的主流技術,本文通過實例將CSS+DIV布局網頁與傳統的表格布局網頁進行比較,清晰地驗證了CSS+DIV技術布局網頁的高效工具。
關鍵詞:CSS;DIV;技術
中圖分類號:TN915.02 文獻標志碼:A 文章編號:1674-9324(2014)37-0225-03
一、CSS+DIV布局簡介
DIV元素是html語言中的一個元素,是標簽,用來為HTML文檔的內容提供結構和背景的元素。css是英語Cascading Style Sheets的縮寫,中文名稱為層疊樣式表,它是用來表現網頁外觀樣式的計算機語言。CSS提供了豐富的樣式表現功能,如字體、段落、顏色、背景、布局等。每個HTML標簽都含有style屬性。利用style屬性可以將CSS樣式直接寫入HTML文檔的某個標簽內。DIV+CSS的布局方法簡單來說就是使用div標簽作為容器,使用CSS技術來排布div標簽的布局方法。
二、表格布局網頁的問題
表格曾經是網頁制作中應用最頻繁的元素,起主要作用是定位和排版網頁,便于初學者掌握和使用。但是使用表格技術制作的網頁,由于嵌套了大量的表格,不僅容易產生頁面內容錯位,使網頁維護和更新的工作量非常繁重,更重要的是產生了大量的冗余代碼,從而使網頁容量劇增,瀏覽器加載緩慢。
三、兩種方式布局頁面的代碼對比
下面通過制作一個歌曲專輯列表頁面為例,來比較兩種方法布局網頁的區別。效果圖如下圖所示:
①使用CSS+ DIV布局代碼如下:
*{ margin:0;padding:0}
div.block{ width:310px;border:1px solid #ccc;margin:25px}
dl{ width:310px;border-bottom:1px solid #ccc;}
dt{ width:105px;height:120px;float:left}
dt img{ display:block;margin:15px auto 0;border:1px solid #ccc;}
dd span{ display:block;font-size:12px;line-height:30px;color:#333333}
dd span a{ color:#172197;font-weight:bold}
.clear{ clear:both}
專輯語言:國語