20100329更新
目 錄
第一章 XHTML標準... 2
一、 XHTML文檔結構... 2
1、 定義文檔類型：... 2
2、 聲明命名空間：... 2
3、 編碼類型：... 2
二、 XHTML書寫規范... 3
1、 語法規范：... 3
2、 注釋規范：... 3
第二章 CSS標準化及CSS框架... 4
一、 CSS文檔統籌與編碼規范... 4
1、 CSS文檔統籌：... 4
2、 CSS書寫的規范：... 5
3、 屬性的組織：... 6
4、 A屬性排列順序：... 6
5、 CSS命名規則：... 7
6、 CSS命名方法：... 7
二、 Reset CSS. 10
三、 清除浮動方法... 11
第三章 通用規范... 12
一、 文檔結構和命名規范... 12
1、 Style文件命名規范：... 13
2、 Images規范：... 13
3、 Javascript規范：... 14
第四章 項目制作完成... 15
一、 代碼的優化（制作部分）... 15
二、 夸瀏覽器兼容性... 16
1、 測試代碼在各主流瀏覽器兼容性：... 16
三、 項目的上傳... 16
第五章 頁面制作中的SEO規范... 17
一、 頁面制作中的SEO規范... 17
附錄：設計規范... 18
一、 頁面設計尺寸... 18
二、 字體規定... 18
三、 字號規定... 18
四、 行高規定... 18
五、 圖片尺寸規范... 19
六、 文本顏色... 20
七、 切圖規則... 20
第一章 XHTML標準過渡型DTD（XHTML 1.0 Transitional）是比較理想的選擇。因為這種DTD允許使用描述性的元素和屬性，也比較容易通過W3C的代碼校驗。
| 定義文檔類型：過渡型（Transitional） |
xmlns是XHTML NameSpace的縮寫，中文翻譯為命名空間。命名空間是收集元素類型和屬性名字的一個詳細DTD，如果不指明各自的命名空間，機會出現語義混淆現象。
| 聲明命名空間 |
編碼類型：GB2312
| 語法規范 |
| 1、 XHTML對大小寫敏感，所有的元素和屬性都必須小寫。 2、 所有的屬性必須用引號””括起來。 3、 XHTML要求有嚴謹的結構，因此所有的標簽都必須合理嵌套 4、 所有的屬性必須被賦值 5、 所有的特殊符號都用編碼表示，例如小于號必須被編碼為“<” 6、 不要在注釋內容中使用“--”， “--”只能出現在XHTML注釋的開頭和結結。 7、 XHTML規范廢除了name屬性，而使用id屬性作為統一的名稱。 |
| 代碼的注釋規范舉例 |
| 內容 |
| CSS文檔統籌(產品類) |
| 1、 Reset樣式表：重設瀏覽器的樣式 2、 Base樣式表：頁面公共的布局樣式 3、 Module樣式表：小模塊、小版塊樣式表的制定。 |
| CSS文檔統籌(發布頁面類) |
| 1、 重設瀏覽器的樣式、頁面公共的布局樣式、小模塊、小版塊樣式表，全部寫入style.css一個文件中。 |
每個版塊用注釋加以說明，對日后維護提供很大的方便。
| 代碼的注釋規范 |
| /*d1注釋說明*/ #id1{ } #id1 .class{ } /* id2注釋說明*/ #id2{ } #id2 .class{ } |
根據屬性在布局中的重要性，建議先聲明布局屬性，然后定義盒模型屬性，最后定義排版屬性。
| 按主次關系組織 |
| 第一步：如果需要的話，先聲明布局屬性（確定元素的顯示），例如這些屬性： float display position … 第二步：如果需要的話再聲明盒模型屬性（確定元素的形狀），例如這些屬性： width height margin padding border background… 第三步：如果需要的話最后聲明版式屬性（確定元素的內容顯示），例如這些屬性： color font font-size font-weight text-align… |
A的屬性按照：
a{}
a:link{}
a:visited{}
a:hover{}
a:active{}
這種排列順序
CSS命名規則應該遵循一定規則，簡單的說就是要求直觀、簡潔、一目了然，方便后期維護和交流。
| CSS命名規則 |
| 1、 要區分大小寫：在命名CLASS和ID時全部使用小寫字母 2、 要注意合法性：CSS命名以字母開頭，可以連接數字、字母、下劃線、連接符。 3、 語義定義明確易懂：CSS命名要詞必達意，名稱要反映用途和相關信息，同時要簡短，不要附帶任何冗余信息。 |
下表為常用命名舉例：
| 布局常用名稱： | |||
| 名稱 | 說明 | 名稱 | 說明 |
| wrap | 外套 | container | 容器 |
| site | 站點 | content | 內容塊 |
| nav | 導航 | column | 欄 |
| main | 主體 | left | 左 |
| layout | 布局 | center | 中 |
| sidebar | 側欄 | right | 右 |
| 模塊常用名稱： | |||
| 名稱 | 說明 | 名稱 | 說明 |
| logo | 標志 | banner | 廣告條 |
| login | 登錄 | loginbar | 登錄條 |
| regsiter | 注冊 | search | 搜索 |
| shop | 購物車 | list | 列表 |
| tool/toolbar | 工具條 | service | 服務 |
| tab | 標簽頁 | hot | 熱點 |
| source | 資源 | news | 新聞 |
| site_map | 網站地圖 | download | 下載 |
| about_us | 關于我們 | copyright | 版權 |
| partner | 合作伙伴 | friendlink | 友情鏈接 |
| guide | 指南 | vote | 投票 |
| joinus | 加入 | header | 頁眉 |
| footer | 頁腳 | homepage | 首頁 |
| 類常用名稱： | |||
| 名稱 | 說明 | 名稱 | 說明 |
| title | 標題 | current | 當前 |
| label | 標簽 | spec | 特別 |
| note | 注釋 | red | 紅色 |
| summary | 摘要 | submit | 提交 |
| msg | 提示信息 | textbox | 文本框 |
| status | 狀態 | drop | 下拉 |
| tips | 小技巧 | btn | 按鈕 |
| scroll | 滾動 | form | 表單 |
| icon | 圖標 | count | 統計 |
| arr/arrow | 箭頭 | crumb | 導航 |
| cor/corner | 轉角/圓角 | breadcrumb | 導航提示 |
| 導航常用名稱： | |||
| 名稱 | 說明 | 名稱 | 說明 |
| nav | 導航 | menu | 菜單 |
| mainnav/globalnav | 主導航 | topnav | 頂導航 |
| subnav | 子導航 | sidebar | 邊導航 |
| leftsidebar | 左導航 | rightsidebar | 右導航 |
| submenu | 子菜單 | dropmenu | 下來菜單 |
| sidebaricon | 邊導航圖標 | menucontainer | 菜單容器 |
| 文件常用名稱： | |||
| 名稱 | 說明 | 名稱 | 說明 |
| master.css | 主要文件 | themes.css | 主體文件 |
| layout.css | 布局、版面文件 | base.css | 基本公共文件 |
| columns.css | 專欄文件 | module.css | 模塊文件 |
| font.css | 文字樣式文件 | forms.css | 表單文件 |
| print.css | 打印樣式文件 | mend.css | 補丁文件 |
CSS Reset是指重設瀏覽器的樣式。在各種瀏覽器中，都會對CSS的選擇器默認一些數值，譬如當h1沒有被設置數值時，顯示一定大小。但并不是所有的瀏覽器都使用一樣的數值，所以有了CSS Reset，以讓網頁的樣式在各瀏覽器中表現一致。
CSS Reset的代碼。
| CSS Reset |
| html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0; } a img, iframe { border: none; } ol, ul { list-style: none; } input, textarea, select, button { font-size: 100%; font-family: inherit; } select { margin: inherit; } /* Fixes incorrect placement of numbers in ol’s in IE6/7 */ ol { margin-left:2em; } |
建議將Reset CSS代碼保持為reset.css上傳服務器。所有設計制作人員統一引用這個文件。管理員在需要的時候可以維護更新此文件。（發布類頁面，將CSS Reset代碼寫在style.css中。）
使用代碼中的ClearFix的方法清除浮動，不會像傳統方法清楚浮動時，在頁面中增加無用的空div，破壞文檔的結構。
ClearFix的使用方法，在需要清除浮動的父級菜單，添加class屬性clearfix
| ClearFix的CSS代碼 |
| /* == clearfix == */ .clearfix:after { /*/*/ content: "."; /* IE8 hack */ display: block; height: 0; clear: both; visibility: hidden; } /* IE7 hack */ .clearfix { display: inline-block; } /* IE-mac, IE5, IE6 */ * html .clearfix { height: 1%; } .clearfix { display: block; } |
| ClearFix的用法 |
| class="clearfix"> |
| 文檔結構規范 |
Style文件命名規范詳見第二章
| Images命名規范 |
| 1、CSS切圖文件按照下列命名規范：（XXX為自定義名稱） l b01.png l b02.png l … l bN.png 2、頁面中的其他照片類圖片引用絕對地址的圖片，不做切圖處理。 |
| Images切圖規范 |
| 1、 采用jpg、gif、png作為切圖輸出格式。 2、 切圖圖片大小根據具體項目制定，要求盡量優化圖片。 3、 CSS背景圖片輸出為PNG 8。PNG 8除了不支持動畫外，PNG8有GIF所有的特點，但是比GIF更加具有優勢的是它支持alpha透明和更優的壓縮。所以，大多數情況下，都應該用 PNG8不是GIF（除了非常小的圖片GIF會有更好的壓縮外）。 4、 同類型的圖片進行CSS Sprites優化。減少http請求。 |
| Javascript規范 |
| 1、 統一采用jquery框架，建立常用JavaScript庫和使用文檔 2、 Js命名規范：jquery-XXXX.pack.js（XXXX為自定義功能模塊名稱） |
1、 CSS代碼進行整理，優化文檔結構：
l 選擇符頂行書寫，所有屬性都在一行內；
l 使用外部樣式表，盡量不使用
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
