DIV+CSS網頁設計規範
1、網頁HTML代碼最前面必須包括W3C聲明，以便符合標準：
一般網頁：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
框架頁：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
2、網頁編碼聲明：
簡體中文網頁為gb2312
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
繁體中文網頁為big5
<meta http-equiv="Content-Type" content="text/html; charset= big5" />
英文網頁為utf-8
<meta http-equiv="Content-Type" content="text/html; charset= utf-8" />
3、采用CSS鏈接方式，全站使用同一個CSS文件，實現內容與表現分離：
<link href="images/style.css" rel="stylesheet" type="text/css">
不要將樣式直接寫在頁面html代碼中，頁面中不得使用<font></font>、<style>等標簽。
4、CSS文件中需要對一些基本的標簽進行定義或重置：
*{
padding:0;
margin:0;
}
body,td,th,div {
font-family: 宋體;
font-size: 12px;
color: #000000;
}
body {
background:#FFFFFF;
}
p{
line-height:150%;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #ff0000;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: none;
}
h1{
color:#000000;
line-height:150%;
font-size:24px;
}
li{
list-style:none;
word-break: keep-all;
white-space: nowrap;
}
5、網頁設計完成後，必須分別在Internet Explorer 6.0和Firefox3.0進行兼容性測試，確保頁面表現在這兩個主流瀏覽器中保持完全一致，無錯位、重疊現象。
6、解決兼容性問題常用CSS代碼有：
1）div對齊方式有居左、居中、居右三種方式，居中的要清除浮動：clear:both; 否則就會有重疊現象。
2）隱藏超出部分：overflow:hidden;
3）設置固定寬度：width:100px。除特殊需要外，div一般不設置高度，寬度、高度不能使用百分比，以免在各瀏覽器中出現較大誤差。
4）給div臨時加邊框：border:1px solid;
5）用!important;為IE和FF設置不同樣式，如：width:100px!important; width:102px; 前面是FF樣式，後面是IE樣式。
6）判斷IE瀏覽器版本調用不同的樣式表。
<!--[if lte IE 6]>
<LINK rel="stylesheet" type="text/css" href="images/css.css" />
<![endif]-->
<!--[if IE 7]>
<LINK rel="stylesheet" type="text/css" href="images/css2.css" />
<![endif]-->
<!--[if IE 8]>
<LINK rel="stylesheet" type="text/css" href="images/css3.css" />
<![endif]-->
7）屏蔽IE7。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
7、信息列表用ul,li形式，減少代碼冗余。如：
<div>
<ul>
<li></li>
</ul>
</div>
8、W3C驗證。通過W3C組織官方網站可以驗證CSS是否符合標準，網址是：
http://jigsaw.w3.org/css-validator/check/referer
1）所有標簽都必需使用小寫
2）所有標簽內之屬性都要有值且不可省略雙引號或單引號
3）所有標簽必須成對, 若非成對需加上/在最後
4）一個網頁最少要包含的標簽
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset= gb2312" />
<title>標題</title>
</head>
<body>
內容
</body>
</html>
5）若要顯示<、>、&的話, 需輸入：< >
若要顯示&於網頁中的話，則需輸入：&
6）標簽順序不可錯亂，應該是：<b><p>文字</p></b>
7）註釋文字中不可包含----，HTML註釋形式：<!--註釋文字-->，CSS註釋形式：/*註釋文字*/
在頁面中除了開始、結束、JavaScript代碼處需要加一些必要的註釋外，其他地方盡量少寫註釋，有時註釋太多也會引起一些問題。
在樣式表中可以適當加些註釋，簡要說明樣式的用途、範圍等。
8、頁面引用樣式時使用class=”style1”，而不是id=”style1”，把id留給程序員使用，提高樣式可重用性，減小CSS文件體積。
9、html代碼要適當縮進（可在代碼前按TAB鍵，或頁面全部做完後，在DW代碼視圖中執行“套用源格式”，不要有空白行。
10、網頁中圖片的使用。
1）網頁中最好使用gif、jpg格式圖片，由於png圖片在瀏覽器中的兼容性還有問題，故不建議使用。
2）欄目標題背景、圓角背景、邊框背景、標題前的icon圖標等可以寫在background:url( );裏。
3）網站logo、more、new、hot、廣告位等圖片需使用<img>標簽，以便為其添加鏈接。
11、網頁整體必須在瀏覽器中居中顯示，即：div{margin:0 auto;}。
12、如果網頁中同時有飄浮圖片、下拉菜單、彈出對話框、Flash，前三者要位於Flash上方。需在Flash中加以下透明代碼：
<param name="WMODE" value="transparent"> //IE
<embed wmode="transparent"> //Firefox
13、設置網頁滾動條的樣式：
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
14、英文、數字在FF下不自動換行，需加以下代碼：
word-wrap:break-word;
15、註意水平、垂直方向的對齊、留白問題。
16、網頁寬度。
一般窄屏寬為760px，寬屏為950px。
17、樣式的命名應該符合語義化要求，即一看樣式名就可知道這個樣式大概用在什麽地方、有什麽用途，方便以後調用、維護。如頂部樣式則為.header。
www.mini88s.com
www.xianhzw.com
mini88s.taobao.com
DIV+CSS網頁設計規範