頁面內(nèi)的樣式加載必須用鏈接方式

注意細則：

1. 協(xié)作開發(fā)及分工: i會根據(jù)各個模塊, 同時根據(jù)頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實現(xiàn)內(nèi)部結(jié)構(gòu)&表現(xiàn)&行為; 共用css文件base.css由i書寫, 協(xié)作開發(fā)過程中, 每個頁面請務必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;

2. class與id的使用: id是唯一的并是父級的, class是可以重復的并是子級的, 所以id僅使用在大的模塊上, class可用在重復使用率高及子級中; id原則上都是由我分發(fā)框架文件時命名的, 為JavaScript預留鉤子的除外;

3. 為JavaScript預留鉤子的命名, 請以 js_ 起始, 比如: js_hide, js_show;

4. class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統(tǒng)一命名.其他樣式名稱由 小寫英文 & 數(shù)字 & _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.

5. 規(guī)避class與id命名(此條重要, 若有不明白請及時與i溝通):  

a, 通過從屬寫法規(guī)避, 示例見d;

b, 取父級元素id/class命名部分命名, 示例見d;

c, 重復使用率高的命名, 請以自己代號加下劃線起始, 比如i_clear;

d, a,b兩條, 適用于在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面代碼

按a命名法則:

樣式寫法:  #mainnav  .firstnav{.......}

按b命名法則:

6. css屬性書寫順序, 建議遵循 布局定位屬性-->自身屬性-->文本屬性-->其他屬性. 此條可根據(jù)自身習慣書寫, 但盡量保證同類屬性寫在一起. 屬性列舉: 布局定位屬性主要包括: margin、padding、float（包括clear）、position（相應的 top,right,bottom,left）、display、visibility、overflow等；自身屬性主要包括: width & height & background & border; 文本屬性主要包括：font、color、text-align、text-decoration、text-indent等；其他屬性包括: list-style(列表樣式)、vertical-vlign、cursor、z-index(層疊順序) 、zoom等.我所列出的這些屬性只是最常用到的, 并不代表全部;

7. 書寫代碼前, 考慮并提高樣式重復使用率;

8. 充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:

• 這兒是標題列表2010-09-15

定義ul.list li{position:relative}  ul.list li span{position:absolute; right:0}

即可實現(xiàn)日期居右顯示

9. 樣式表中中文字體名, 請務必轉(zhuǎn)碼成unicode碼, 以避免編碼錯誤時亂碼;

10. 背景圖片請盡可能使用sprite技術, 減小http請求, 考慮到多人協(xié)作開發(fā), sprite按模塊制作;

11. 使用table標簽時(盡量避免使用table標簽), 請不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現(xiàn), 應盡可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn), 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我會初始化表格樣式)

12. 杜絕使用 兼容ie8;

13. 用png圖片做圖片時, 要求圖片格式為png-8格式,若png-8實在影響圖片質(zhì)量或其中有半透明效果, 請為ie6多帶帶定義背景:

background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);

14. 避免兼容性屬性的使用, 比如text-shadow || css3的相關屬性;

15. 減少使用影響性能的屬性, 比如position:absolute || float ;

16. 必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;

17. 代碼縮進與格式: 建議單行書寫, 可根據(jù)自身習慣, 后期優(yōu)化i會統(tǒng)一處理;

命名規(guī)則：

頭：header

  內(nèi)容：content/container

  尾：footer

  導航：nav

  側(cè)欄：sidebar

  欄目：column

  頁面外圍控制整體布局寬度：wrapper

  左右中：left right center

  登錄條：loginbar

  標志：logo

  廣告：banner

  頁面主體：main

  熱點：hot

  新聞：news

  下載：download

  子導航：subnav

  菜單：menu

  子菜單：submenu

  搜索：search

  友情鏈接：friendlink

  頁腳：footer

  版權：copyright

  滾動：scroll

  內(nèi)容：content

  標簽頁：tab

  文章列表：list

  提示信息：msg

  小技巧：tips

  欄目標題：title

  加入：joinus

  指南：guild

  服務：service

  注冊：regsiter

  狀態(tài)：status

  投票：vote

  合作伙伴：partner

(二)注釋的寫法:

  /* Footer */

  內(nèi)容區(qū)

  /* End Footer */

(三)id的命名:

  (1)頁面結(jié)構(gòu)

  容器: container

  頁頭：header

  內(nèi)容：content/container

  頁面主體：main

  頁尾：footer

  導航：nav

  側(cè)欄：sidebar

  欄目：column

  頁面外圍控制整體布局寬度：wrapper

  左右中：left right center

  (2)導航

  導航：nav

  主導航：mainbav

  子導航：subnav

  頂導航：topnav

  邊導航：sidebar

  左導航：leftsidebar

  右導航：rightsidebar

  菜單：menu

  子菜單：submenu

  標題: title

  摘要: summary

  (3)功能

  標志：logo

  廣告：banner

  登陸：login

  登錄條：loginbar

  注冊：regsiter

  搜索：search

  功能區(qū)：shop

  標題：title

  加入：joinus

  狀態(tài)：status

  按鈕：btn

  滾動：scroll

  標簽頁：tab

  文章列表：list

  提示信息：msg

  當前的: current

  小技巧：tips

  圖標: icon

  注釋：note

  指南：guild

  服務：service

  熱點：hot

  新聞：news

  下載：download

  投票：vote

  合作伙伴：partner

  友情鏈接：link

  版權：copyright

基本樣式：

/* CSS Document */

body {margin:0; padding:0; font:12px "5B8B4F53",san-serif;background:#fff;}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}   

table,td,tr,th{font-size:12px;}

li{list-style-type:none;}

img{vertical-align:top;border:0;}

ol,ul {list-style:none;}

h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}

address,cite,code,em,th {font-weight:normal; font-style:normal;}

.fB{font-weight:bold;}

.f12px{font-size:12px;}

.f14px{font-size:14px;}

.left{float:left;}

.right{float:right;}

a {color:#2b2b2b; text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {color:#ba2636;text-decoration:underline;}

a:active {color:#ba2636;}

重定義的最先，偽類其次，自定義最后，便于自己和他人閱讀！

    不同瀏覽器上字號保持一致，字號建議用點數(shù)pt和像素px來定義，pt一般使用中文宋體的9pt 和11pt，px一般使用中文宋體12px 和14.7px 這是經(jīng)過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用11pt 和14.7px 的字號比較合適。中英文混排時，我們盡可能的將英文和數(shù)字定義為verdana 和arial 兩種字體。

2.4  html 書寫規(guī)范

1. 網(wǎng)頁制作細節(jié) ---- head區(qū)代碼規(guī)范

head區(qū)是指HTML代碼的和之間的內(nèi)容。

必須加入的標簽

a) 公司版權注釋  

b) 網(wǎng)頁顯示字符集

簡體中文：

繁體中文：

英 語：

c) 網(wǎng)頁制作者信息   

d) 網(wǎng)站簡介  

e) 搜索關鍵字  

f) 網(wǎng)頁的css規(guī)范  

g) 網(wǎng)頁標題  

可以選擇加入的標簽

a) 設定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，必須到服務器上重新調(diào)閱。

b) 禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容。

c) 用來防止別人在框架里調(diào)用你的頁面。

d) 自動跳轉(zhuǎn)。

  5指時間停留5秒

e) 網(wǎng)頁搜索機器人向?qū)АＳ脕砀嬖V搜索機器人哪些頁面需要索引，哪些頁面不需要索引。

CONTENT的參數(shù)有all,none,index,noindex,follow,nofollow。默認是all。

f) 收藏夾圖標  

g) 所有的javascript的調(diào)用盡量采取外部調(diào)用.

h) 附標簽：

標簽不屬于head區(qū)，這里強調(diào)一下，為了保證瀏覽器的兼容性，必須設置頁面背景

1. 網(wǎng)頁制作細節(jié) ---- 字體
   1. 在設定字體樣式時對于文字字號樣式和行間距應必須使用CSS樣式表。禁止在頁面中出現(xiàn) 標記。
   
   2.在網(wǎng)頁中中文應首選使用宋體。英文和數(shù)字首選使用verdana 和arial 兩種字體。一般使用中文宋體的9pt 和11pt 或12px 和14.7px 這是經(jīng)過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用11pt 和14.7px 的字號比較合適。
   
   3. 為了最大程度的發(fā)揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用
   來人工干預分段。
   
   4.不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號之后除外，漢字之間的標點要用全角標點，英文字母和數(shù)字周圍的括號應該使用半角括號。
   
   5. 請不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個的   也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現(xiàn)。
   
   6. 行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.
   
   7. 排版中我們經(jīng)常會遇到需要進行首行縮進的處理，不要使用   或者全角空格來達到效果，規(guī)范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上

   標記，注意，一般情況下，請不要省略

   結(jié)束標記 。