DIV CSS 佈局教程網

3、一個頁面上少用絕對定位

絕對定位（position:absolute）是網頁布局中很常用到的，特別是作一些浮動效果時，也會讓頁面看起來非常的酷。但網頁中如果使用過多的絕對定位，會讓你的網頁變得非常的慢，這一點上邊Firefox表現要比IE還要差。

例如：

查看復制打印

<style>li{position:absolute;}style> 
<ul> 
<listylelistyle="left:10px;top:20px">001li> 
<listylelistyle="left:30px;top:70px">001li> 
<listylelistyle="left:40px;top:50px">001li> 
……  
ul> 
 
<style>li{position:absolute;}style> 
<ul> 
 <listylelistyle="left:10px;top:20px">001li> 
 <listylelistyle="left:30px;top:70px">001li> 
 <listylelistyle="left:40px;top:50px">001li> 
 ……  
ul> 
 

建議的解決辦法：

a.盡可能少用，這個少用的值是多少，也沒有一個非常好的值來說明；還要看絕定定位這個標簽裡邊的內容的多少；在這裡我只能說，這樣寫會有性能問題，少用。
b.如果能用變通實現同樣的效果，就用變通的辦法。

4、background背景圖片的平鋪

有些網頁的背景或頁面中某塊的背景通常要用到圖片的平鋪，平鋪後就會有平鋪次數的問題，如果是單次還好，如果是多次，就廢了。

舉個簡單的例子：

例一：滾動一下你的頁面，看速度怎麼樣？

<divstyledivstyle="height:8000px;  
background:url(http://www.zishu.cn/attachments/  
month_0809/i2008962026.gif)">div> 

例二：同樣效果，再試一下這個！

<divstyledivstyle="height:8000px;  
background:url(http://www.zishu.cn/attachments  
/month_0809/120089620424.gif)">div> 

說明：測試上邊的兩個效果，你的電腦越差越明顯，如果你的電腦配置非常好，你就把上的8000px改成9000000px試一下，如果還不行，就改的更大一些，整死機別罵我！[razz]

建議的作法：

a.色彩少的圖片要作成gif圖片；
b.平鋪的圖片盡可能大一些，如果是色彩少的GIF圖片，圖片大一些，實際大小也不會大多少；上邊的兩個例子就很好的證明，第一個圖片非常少，第二個圖大較大一些；但速度是非常不一樣的；