快捷導航

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

更新時間：2007年03月18日 00:00:00 作者：

如果還要對這個段落加上字體、字號、背景、行距等修飾，直接把對應(yīng)的CSS加進P樣式里就行了，不用像這樣來寫了：

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

復制代碼代碼如下:

<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排版

復制代碼代碼如下:

<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)容部分代碼簡單吧，如果還有更多的圖片列表的話，那么第一種CSS布局方法就更有優(yōu)勢，我打個比喻你好理解：我在BODY向你介紹一個人，我只對你說他是一個人，至于他是一個什么樣的人，有多高，是男是女，你去CSS那里查下就知道。這樣我在BODY的工作就簡單了，也就是說BODY的代碼就簡單了。如果BODY有一個團隊人在那里，我在CSS記錄一項就行了，這有點像Flash軟件里的元件和實例的概念，不同的實例共享同一個元件，這樣動畫文件就不大了，把這種想法移到CSS網(wǎng)頁設(shè)計中，就是代碼不復雜，網(wǎng)頁文件體積小能較快被客戶端下載了。

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

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

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

復制代碼代碼如下:

<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> 