標籤：width ati mbed 高度 public enter border 解決 注釋
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網頁設計規範
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
