初學者簡單學習CSS網頁布局

2024-07-11 08:24:16

字體：大中小

來源：轉載

供稿：網友

XHTML主要用div標簽進行網頁的布局，而控制布局的工具是CSS代碼，以使網頁符合Web標準。所以很多網頁設計師把這種布局方法的網頁叫做“Div CSS”網頁。其實這是不太準確的說法，因為Web標準不太被行外人士所熟識，導致“Div CSS”的概念取代了Web標準。 CSS布局方法
通過上一章的學習，讀者了解到了CSS強大的表現控制功能，特別是在布局方面有很大的優勢。相對于代碼條理混亂、樣式雜糅在結構中的表格布局，CSS將帶來全新的布局方法，讓網頁設計師更輕松、更自由。本章通過多個示例展示CSS布局網頁的方法，并對CSS的“盒模型”作詳細闡述。相信讀者在深入理解“盒模型”后，布局網頁、定位CSS網頁元素將更加自如。
11.1 什么叫“Div CSS”
上一章學習了Web標準的概念以及XHTML和CSS的基本知識。XHTML主要用div標簽進行網頁的布局，而控制布局的工具是CSS代碼，以使網頁符合Web標準。所以很多網頁設計師把這種布局方法的網頁叫做“Div CSS”網頁。其實這是不太準確的說法，因為Web標準不太被行外人士所熟識，導致“Div CSS”的概念取代了Web標準。Web標準不僅僅指用div標簽布局（有時候也用其他標簽布局），其含義非常廣，需要代碼編寫良好的結構，有良好的語義以及可讀性等。
所以“Div CSS”制作的網頁不一定符合Web標準，而符合Web標準的網頁不一定完全由div標簽布局。
11.1.1 初識div
div標簽在Web標準的網頁中使用非常頻繁，那么，相對于其他HTML繼承而來的元素，div有什么特別之處呢？答案可能令讀者失望，div標簽什么特性也沒有，一定要說其特性，不過是一種塊狀元素。正因為div沒有任何特性，所以更容易被CSS代碼控制樣式。
div標簽是雙標簽，即以<div></div>的形式存在，其間可以放置任何內容，包括其他的div標簽。也就是說，div標簽是一個沒有任何特性的容器而已。在D:/web/目錄下創建網頁文件（XHTML1.0），命名為div.htm，編寫div.htm文件代碼如代碼11.1所示。

代碼11.1 默認的div標簽：div.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>初識div標簽</title>
</head>
<body>
<div>我是第1個div標簽中的內容</div>
<div>我是第2個div標簽中的內容</div>
<div>我是第3個div標簽中的內容</div>

上一篇：最新版本的CSS選擇器瀏覽器支持情況

下一篇：Webjx收集基于CSS JS設計50款優秀的導航菜單