初識div
div標簽是雙標簽，即以<div></div>的形式存在，其間可以放置任何內(nèi)容， 包括其他的div標簽。也就是說，div標簽是一個沒有任何特性的容器。
XHTML中的塊狀元素和內(nèi)聯(lián)元素
XHTML的標簽?zāi)J為兩種元素：
(1)、塊狀元素：該元素是矩形的，有自己的高度和寬度。塊狀元素就是一個矩形形容器。
(2)、內(nèi)聯(lián)元素：和塊級元素相反，內(nèi)聯(lián)元素沒有固定形狀，也無法設(shè)置寬度和高度。
內(nèi)聯(lián)元素形狀由其內(nèi)含的內(nèi)容決定，所以在寬度足夠的情況下，一行能容納多個內(nèi)聯(lián)元素。有人說相對于塊狀元素是一個硬盒子，內(nèi)聯(lián)元素就是一個軟軟的布袋子（形狀由內(nèi)容決定）。
塊狀元素適合于大塊的區(qū)域排版，所以常用來布局頁面。而內(nèi)聯(lián)元素適合于局部元素的樣式設(shè)置，所以常用于局部的文字樣式設(shè)置。
由于網(wǎng)頁大多數(shù)為計算機顯示屏幕作媒介，所以常用像素作為固定尺寸單位，即px
注意：在HTML元素中設(shè)置樣式不需要填寫單位，默認為像素
布局頁面的寬度：
瀏覽者常見顯示分辨率（單位：像素）為 800*600、1024*768、 1280*1024、 1440*960 等。所以在頁面布局頁面時，要充分考慮頁面內(nèi)容的布局寬度，一旦內(nèi)容寬度超過顯示寬度，頁面將出現(xiàn)水平滾動條。
過去瀏覽者用戶的顯示分辨率最小為800*600( 15寸CRT顯示器 )，其最小寬度為800像素，瀏覽器的邊框及滾動條部分約占24像素左右。
布局頁面水平居中：
HTML表格布局頁面時，只需要設(shè)置布局表格的align屬性為center即可。而div居中沒有屬性可以設(shè)置，只能通過CSS控制其位置
在布局頁面前，網(wǎng)頁制作者一定要把頁面的默認邊距清除。為了方便操作，常用的方法是使用通配選擇符 “*”將所有對象的邊距清除，即margin屬性和padding
屬性
說明：盡量保證網(wǎng)頁只有垂直滾動條，才符合瀏覽者的習(xí)慣，所以高度不需要考慮，由頁面內(nèi)容決定網(wǎng)頁高度
使div元素水平居中的方法有很多種，常用的方法是用CSS設(shè)置div的左右邊距，即margin-left屬性和margin-right屬性。當設(shè)置div左外邊距和右外邊距的值為auto，即自動時，左外邊距和右外邊距將相等，即達到了div水平居中效果。
居中程序：
<head>
<meta http-equiv="content-Type" content="text/html; charset=gb2312"/>
<title>設(shè)置div水平居中</title>
<style type=text/css>
* {
margin:0px;
padding:0px;
}
#all{
width:75%;
height:200px;
background-color:red;
border:1px solid blue;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="all">布局頁面內(nèi)容</div>
</body>
注意：上面居中程序中margin屬性值前面的"0"代表上邊距和下邊距為 "0"像素,auto代表左邊距和右邊距為auto,即自動設(shè)置。
說明：在頁面布局時盡量少嵌套，因為XHTML元素多重嵌套將影響瀏覽器對代碼的解析速度
div元素的浮動
通過div布局網(wǎng)頁，css設(shè)置其屬性，完全符合內(nèi)容與表現(xiàn)分離。不過一個div標簽占據(jù)一行，塊狀元素有一個很重要的foalt屬性，可以使多個塊狀元素并列于一行
float屬性的值有l(wèi)eft、right、none和inherit。很多對象都有inhreit屬性，這是繼承屬性。代表繼承父容器的屬性。float屬性值為none時，塊狀元素不會附送，這也是塊狀元素的默認值
一個典型的網(wǎng)頁布局實例
這個例子要求頁面有上下4行區(qū)域，分別用做廣告區(qū)(#top)、導(dǎo)航區(qū)(#nav)、主題區(qū)(#mid)、和版權(quán)區(qū)(footer)
案例程序：
<head>
< mate http-equiv="content-Type" content="text/html;charset=gb2312">
<title>網(wǎng)頁布局實例</title>
<style type="text/css">
*{
margin:0px;
padding:auto;
}
#top,#nav,#footer{
width:500px;
margin:0px auto;
}
#top{
height:80px;
background-color:#ddd;
}
#nav{
height:25px;
background-color:#fc0;
}
#mid{ height:300px; }
#left{
width:98px;
height:298px;
border:1px solid #999;
float:left;
background-color:#ddd;
}
#right{
height:298px;
background-color:#ccc;
}
.content{
width:98px;
height:148px;
background-color:#c000;
border:1px solid #999;
float:left;
}
#content2{
background-color:#fc0;
}
</head>
<body>
<div id="top">頂部廣告區(qū)</div>
<div id="nav">導(dǎo)航區(qū)</div>
<div id="mid">
<div id="left">縱行導(dǎo)航區(qū)</div>
<div id="right">
<div class="content">內(nèi)容A</div>
<div class="content" id="content2">內(nèi)容B</div>
<div class="content">內(nèi)容C</div>
<div class="content" id="content2">內(nèi)容D</div>
<div class="content" id="content2">內(nèi)容E</div>
<div class="content">內(nèi)容F</div>
<div class="content" id="content2">內(nèi)容G</div>
<div class="content">內(nèi)容H</div>
</div>
<div id="footer">底部版權(quán)區(qū)</div>
</body>
說明：主體內(nèi)容區(qū)寬度=縱向?qū)Ш絽^(qū)寬度+具體內(nèi)容區(qū)寬度*4
主體內(nèi)容區(qū)高度=縱向?qū)Ш絽^(qū)高度=具體內(nèi)容區(qū)高度*2
縱向?qū)Ш絽^(qū)寬度+具體內(nèi)容區(qū)寬度*4=490(像素)
縱向?qū)Ш絽^(qū)高度=298(像素)
具體內(nèi)容區(qū)高度*2=296(像素)
注意：在跨度和高度計算中，IE6.0以前版本的瀏覽器解析div的寬度和高度設(shè)置值包括邊框
導(dǎo)航條制作：為了增加導(dǎo)航條的互動，列表元素常常配合超級鏈接元素一起使用，超級鏈接有為類選擇符，可以呈現(xiàn)鏈接文字和用戶互動的4個狀態(tài)，即：
a:link {color: #FF0000} /* 未訪問的鏈接
a:visited {color: #00FF00} /* 已訪問的鏈接
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上
a:active {color: #0000FF} /* 鼠標單擊時的鏈接
互動導(dǎo)航條程序：
<head>
<mate http-equiv="content-type" content="text/html ; charset= gb2312" >
<title>導(dǎo)航條制作</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
ul{
list-style:none
}
#nav{
width:425px;
height:22px;
margin:0px auto;
background-color:#ddd;
}
li{ float:left; }
li a {
display:block;
width:98px;
height:20px;
border:1px solid #d00;
margin-left:5px;
font-weight:bold;
text-decorration:none;
text-align:center;
}
li a:link{
background-color:#cf3;
color:#333;
}
li a:hover{
background-color:#69c;
color:#fff;
}
li a:active{ background-color:#f00; }
li a:visited{
background-color:#cf3;
color:#333;
}
</style>
</head>
<body>
<ul id="nav">
<li>
<a href="#" title="這是首頁的鏈接">首頁</a>
</li>
<li>
<a href="#" title="這是產(chǎn)品的鏈接">產(chǎn)品</a>
</li>
<li>
<a href="#" title="這是企業(yè)文化的鏈接">企業(yè)文化</a>
</li>
<li>
<a href="#" title="這是留言板的鏈接">留言板</a>
</li>
</ul>
</body>
心得：雖然超級鏈接塊沒有設(shè)置浮動屬性，但其直屬的父容器，即li元素設(shè)置了浮動屬性，所以實例中的4個li元素會出現(xiàn)并列。通過引入超級鏈接的偽類選擇符，導(dǎo)航條有了互動性。
本例中使用的屬性：
font-weight:bolid (文本加粗)
text-decoration:none (除去超級鏈接默認的下畫線)
margin-left:5px; (是每個超級連接塊都有了5個像素的左邊距)
注意：通常網(wǎng)頁設(shè)計中很少使用ul元素的列表符號，所以把ul標簽選擇符的list-style屬性設(shè)置為none，表示頁面中任何ul列表結(jié)構(gòu)都沒有列表符號。
CSS盒子模型
“盒”模型是CSS定位布局的核心內(nèi)容
什么是CSS盒模型：
XHTML中大部分的元素(特別是塊狀元素)都可以看做一個盒子，而網(wǎng)頁元素的定位實際就是這些大大小小的盒子在頁面中的定位。而這些盒子是"流動"的,當某個塊狀元素被CSS設(shè)置了浮動屬性，這個盒子就會"流動"的，當某個塊狀元素被CSS設(shè)置了浮動屬性，這個盒子就會 "流"到上一行。
邊框的樣式設(shè)置：
邊框(border)作為盒模型的組成部分之一，其樣式非常受重視。邊框的CSS樣式設(shè)置不但影響到盒子的尺寸，還影響到盒子的外觀。邊框(border)屬性的值有3中，即邊框尺寸(像素)、邊框類型和邊框顏色 ( 十六進制 )。
border的4條邊框：
border-top:頂部邊框
border-bottom:底部邊框
border-left:左邊框
border-right:右邊框
修改不同樣子的邊框線條：
solid:實線
dashed:虛線
dotted:點狀線
groove：立體線
double：雙線
outset:浮雕線
內(nèi)邊距(padding)和外邊距(margin)都是不可見的盒子組成部分，只不過它們倆之間夾有一條可見的邊框(border)
盒子兼容問題
DTD(文檔類型聲明)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd " >
<html xmlns= " http://www.w3.org/1999/xhtml " >
代表XHTML的文檔類型聲明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/ strict.dtd">
<html xmlns= " http://www.w3.org/1999/xhtml " >
代表HTML4.0的嚴格類型的文檔類型聲明
元素的非常規(guī)定位方式：
position的原意為位置、狀態(tài)、安置
position屬性非常重，很多特殊容器的定位必須用position來完成
position屬性有4個值，分別是static、absolute、fixed、relative，
static是默認值，代表無定位(一般用于取消特殊定位的繼承，回復(fù)默認)
absolute:絕對定位
relative：相對定位
fixed：固定定位（定位的容器不會隨著滾動條的拖動而變化位置）
注意：絕對定位的容器也會有上下的關(guān)系，在同一個位置只會顯示最上面的容器。在計算機顯示中把垂直顯示屏幕平面的方向稱為 "z" 方向，CSS絕對定位的容器的 z-index屬性對應(yīng)這個方向，z-index屬性值越大，容器越靠上。即同一個位置的兩個絕對定位的容器只會顯示z-index屬性值較大的。
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
