DIV+CSS是目前互聯(lián)網(wǎng)網(wǎng)頁(yè)制作最熱門的方法，但對(duì)于完全手寫代碼，許多網(wǎng)頁(yè)設(shè)計(jì)師都望而止步。
其實(shí)DIV+CSS是很簡(jiǎn)單的一種布局方式，甚至比任何一種編程語(yǔ)言都要簡(jiǎn)單(雖然它不能算是編程語(yǔ)言)。
首先你要知道，當(dāng)你開始學(xué)習(xí)DIV+CSS的時(shí)候，你要把以前所有用DW畫布局表格的思維方法忘的一干二凈(如果你以前是用TABLE布局的話)，然而這項(xiàng)技術(shù)更適合剛接觸網(wǎng)頁(yè)制作的人。
然后你要知道，DIV+CSS是高成本開發(fā)，速度當(dāng)然是沒(méi)有你畫TABLE來(lái)的快，但是好處更多，相信如果你能看到這里，你一定對(duì)DIV+CSS的好處也有一定的了解了。
最后你還得知道，你所用的工具，你可能認(rèn)為dreamweaver很好，沒(méi)錯(cuò)，它的確不錯(cuò)，但你要認(rèn)識(shí)到，當(dāng)你熟練使用了這門技術(shù)，你就可以在任何文本編輯器中編寫網(wǎng)頁(yè)，甚至在記事本中，而dreamweaver只是充當(dāng)一個(gè)文本編輯器的角色，而你所有的工作基本都在代碼視圖中完成，在這里我推薦adobe最新的dreamweaver cs4。當(dāng)然如果CS5出現(xiàn)了我也會(huì)去試用它。
切入正題，其實(shí)DIV+CSS正確的說(shuō)法應(yīng)該是XHTML+CSS，說(shuō)成DIV的原因只是讓它能更明確地和TABLE布局方法區(qū)分開來(lái)，并不是說(shuō)一個(gè)頁(yè)面里沒(méi)有TABLE，而是在什么地方使用TABLE，你要認(rèn)識(shí)到TABLE是表格，是存放數(shù)據(jù)用的，而不是用來(lái)布局的。
接下來(lái)是布局思維方式，可能大家在接觸DIV+CSS的時(shí)候無(wú)從下手，我現(xiàn)在向大家推薦最著名的盒子模型，我也是看了這個(gè)模型后一下子就開竅了。
你可能會(huì)說(shuō)，好多英文看不懂，不過(guò)我告訴你，很抱歉那三個(gè)英文你必須記住，而且是最重要的三個(gè)，你可以把這么個(gè)盒子看成一個(gè)DIV，而所有標(biāo)簽都帶有這三個(gè)屬性。
正如你所見到的這個(gè)是一個(gè)方塊，而網(wǎng)頁(yè)呢，是由這么多大大小小的方塊組成的，可能以下實(shí)例會(huì)更明確的讓你了解這個(gè)盒子。
我在這里借用了新浪博客的盒子來(lái)說(shuō)明下，大家可能發(fā)現(xiàn)了，其實(shí)邊框border往往就只有1px的寬度，誰(shuí)叫它是邊框呢。而外補(bǔ)丁margin呢，它代表了DIV(盒子)和DIV(盒子)之間的距離，而內(nèi)補(bǔ)丁padding則是大盒子(DIV)和里面的盒子(DIV)的距離(盒子(DIV)里面可以放盒子(DIV)哦)。
接下來(lái)我們模仿這個(gè)盒子做個(gè)簡(jiǎn)單的模型 將以下內(nèi)容拷貝至記事本中，后綴名改為html即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=http://www.lzrc365.com/index.html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒子模型演示</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-size:12px;
}
a{
color:#5E4830;
}
.Box{
width:205px;
border:1px solid #DFD3BD;
margin:10px;
}
.Box .title{
font-weight:bold;
height:22px;
line-height:22px;
background-color:#FDECCE;
border:1px solid #fff;
padding:0px 0px 0px 10px;
color:#665F54;
}
.Box .content{
color:#5E4830;
padding:7px 10px;
}
.Box .content li{
line-height:1.5em;
}
</style>
</head>
<body>
<div class="Box">
<div class="title">分類</div>
<ul class="content">
<li><a href="#">技術(shù)筆記</a>(1)</li>
<li><a href="#">網(wǎng)摘</a>(0)</li>
<li><a href="#">原創(chuàng)文學(xué)</a>(1)</li>
</ul>
</div>
<div class="Box">
<div class="title">訪客</div>
<ul class="content">
<li>暫無(wú)訪客</li>
<li><a href="#">登錄</a>后您的頭像出現(xiàn)在這里。</li>
</ul>
</div>
</body>
</html>
湘公網(wǎng)安備 43010302000270號(hào) 統(tǒng)一社會(huì)信用代碼：92430103MA4LAMB24R 網(wǎng)站ICP備案號(hào)：湘ICP備13006070號(hào)-2 
