快捷導(dǎo)航

推薦徹底弄懂CSS盒子模式(DIV布局快速入門)第2/3頁(yè)

更新時(shí)間：2007年03月18日 00:00:00 作者：

如果還要對(duì)這個(gè)段落加上字體、字號(hào)、背景、行距等修飾，直接把對(duì)應(yīng)的CSS加進(jìn)P樣式里就行了，不用像這樣來(lái)寫了：

這個(gè)是結(jié)構(gòu)和表現(xiàn)混合一起寫的，如果很多段落有統(tǒng)一結(jié)構(gòu)和表現(xiàn)的話，再這樣累加寫下去代碼就繁冗了。
再直接列一段代碼加深理解結(jié)構(gòu)和表現(xiàn)相分離：
用CSS排版

復(fù)制代碼代碼如下:

<style type="text/css">  
<!--  
#photoList img{  
　　height:80;  
　　width:100;  
　　margin:5px auto;  
}  
-->  
</style> <div id="photoList">  
<img src="01.jpg" />  
<img src="02.jpg" />  
<img src="03.jpg" />  
<img src="04.jpg" />  
<img src="05.jpg" />  
</div> 

不用CSS排版

復(fù)制代碼代碼如下:

<img src="01.jpg" width="100" height="80" align="middle" />  
<img src="02.jpg" width="100" height="80" align="middle" />  
<img src="03.jpg" width="100" height="80" align="middle" />  
<img src="04.jpg" width="100" height="80" align="middle" />  
<img src="05.jpg" width="100" height="80" align="middle" />

　　第一種方法是結(jié)構(gòu)表現(xiàn)相分離，內(nèi)容部分代碼簡(jiǎn)單吧，如果還有更多的圖片列表的話，那么第一種CSS布局方法就更有優(yōu)勢(shì)，我打個(gè)比喻你好理解：我在BODY向你介紹一個(gè)人，我只對(duì)你說(shuō)他是一個(gè)人，至于他是一個(gè)什么樣的人，有多高，是男是女，你去CSS那里查下就知道。這樣我在BODY的工作就簡(jiǎn)單了，也就是說(shuō)BODY的代碼就簡(jiǎn)單了。如果BODY有一個(gè)團(tuán)隊(duì)人在那里，我在CSS記錄一項(xiàng)就行了，這有點(diǎn)像Flash軟件里的元件和實(shí)例的概念，不同的實(shí)例共享同一個(gè)元件，這樣動(dòng)畫文件就不大了，把這種想法移到CSS網(wǎng)頁(yè)設(shè)計(jì)中，就是代碼不復(fù)雜，網(wǎng)頁(yè)文件體積小能較快被客戶端下載了。

演示地址：http://www.hsptc.com/css1.html

用CSS排版減小網(wǎng)頁(yè)文件體積

像上面我做的那個(gè)版面，一共分為四個(gè)區(qū)塊，每個(gè)區(qū)塊的框架是一樣的，這個(gè)框架就是用CSS寫出來(lái)的，樣式寫一次，就可以被無(wú)數(shù)次調(diào)用了(用class調(diào)用，而不是ID)，只要改變其中的文字內(nèi)容就可以生成風(fēng)格統(tǒng)一的眾多板塊了，它的樣式和結(jié)構(gòu)代碼是（請(qǐng)不要直接復(fù)制生成網(wǎng)頁(yè)，把下面代碼分別粘貼到網(wǎng)頁(yè)中它們應(yīng)在的位置）：

復(fù)制代碼代碼如下:

<style type="text/css">  
<!--  
* {margin:0px; padding:0px;}  
body {  
font-size: 12px;   
margin: 0px auto;  
height: auto;  
width: 805px;  
}  
.mainBox {  
border: 1px dashed #0099CC;  
margin: 3px;  
padding: 0px;  
float: left;  
height: 300px;  
width: 192px;  
}  
.mainBox h3 {  
float: left;  
height: 20px;  
width: 179px;  
color: #FFFFFF;  
padding: 6px 3px 3px 10px;  
background-color: #0099CC;  
font-size: 16px;  
}  
.mainBox p {  
line-height: 1.5em;  
text-indent: 2em;  
margin: 35px 5px 5px 5px;  
}  
-->  
</style>  
<div class="mainBox">  
<h3>前言</h3>  
<p>正文內(nèi)容</p>  
</div>  
<div class="mainBox">  
<h3>CSS盒子模式</h3>  
<p>正文內(nèi)容 </p>  
</div>  
<div class="mainBox">  
<h3>轉(zhuǎn)變思想</h3>  
<p>正文內(nèi)容 </p>  
</div>  
<div class="mainBox">  
<h3>熟悉步驟</h3>  
<p>正文內(nèi)容 </p>  
</div> 