網(wǎng)站制作css書(shū)寫(xiě)規(guī)范
2012/7/27 14:43:51
    1. 代碼縮進(jìn)與格式: 建議網(wǎng)站制作單行書(shū)寫(xiě), 可根據(jù)自身習(xí)慣, 后期優(yōu)化i會(huì)統(tǒng)一處理;
    2. 協(xié)作開(kāi)發(fā)及分工: i會(huì)根據(jù)各個(gè)模塊, 同時(shí)根據(jù)頁(yè)面相似程序, 事先寫(xiě)好大體框架文件, 分配給前端人員實(shí)現(xiàn)內(nèi)部結(jié)構(gòu)&表現(xiàn)&行為; 共用css文件base.css由i書(shū)寫(xiě), 協(xié)作開(kāi)發(fā)過(guò)程中, 每個(gè)頁(yè)面請(qǐng)務(wù)必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
    3. class與id的使用: id是唯一的并是父級(jí)的, class是可以重復(fù)的并是子級(jí)的, 所以id僅使用在大的模塊上, class可用在重復(fù)使用率高及子級(jí)中; id原則上都是由我分發(fā)框架文件時(shí)命名的, 為JavaScript預(yù)留鉤子的除外;
    4. 編碼統(tǒng)一為utf-8;
    5. class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類(lèi)的在2中由i統(tǒng)一命名.其他樣式名稱(chēng)由 小寫(xiě)英文 & 數(shù)字 & _ 來(lái)組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡(jiǎn)易的單詞組合; 總之, 命名要語(yǔ)義化, 簡(jiǎn)明化.
    6. 規(guī)避class與id命名(此條重要, 若有不明白請(qǐng)及時(shí)與i溝通):
    a) 通過(guò)從屬寫(xiě)法規(guī)避, 示例見(jiàn)d;
    b)取父級(jí)元素id/class命名部分命名, 示例見(jiàn)d;
    c)重復(fù)使用率高的命名, 請(qǐng)以自己代號(hào)加下劃線起始, 比如i_clear;
    d)a,b兩條, 適用于在2中已建好框架的頁(yè)面, 如, 要在2中已建好框架的頁(yè)面代碼<div id="mainnav"></div>中加入新的div元素,
    按a命名法則: <div id="mainnav"><div class="firstnav">...</div></div>,
    樣式寫(xiě)法: #mainnav .firstnav{.......}
    按b命名法則: <div id="mainnav"><div class="main_firstnav">...</div></div>,
    樣式寫(xiě)法: .main_firstnav{.......}
    7. 為JavaScript預(yù)留鉤子的命名, 請(qǐng)以 js_ 起始, 比如: js_hide, js_show;
    8. 網(wǎng)站制作書(shū)寫(xiě)代碼前, 考慮并提高樣式重復(fù)使用率;
    9. 充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:
    <ul class="list"><li>這兒是標(biāo)題列表<span>2010-09- 15</span></ul>
    定義
    ul.list li{position:relative} ul.list li span{position:absolute; right:0}
    即可實(shí)現(xiàn)日期居右顯示
    10. 樣式表中中文字體名, 請(qǐng)務(wù)必轉(zhuǎn)碼成unicode碼, 以避免編碼錯(cuò)誤時(shí)亂碼;
    11. 背景圖片請(qǐng)盡可能使用sprite技術(shù), 減小http請(qǐng)求, 考慮到多人協(xié)作開(kāi)發(fā), sprite按模塊制作;
    12. 使用table標(biāo)簽時(shí)(盡量避免使用table標(biāo)簽), 請(qǐng)不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現(xiàn), 應(yīng)盡可能的利用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文件中我會(huì)初始化表格樣式)
    13. 杜絕使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容 ie8;
    14. 用png圖片做圖片時(shí), 要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果, 請(qǐng)為ie6單獨(dú)定義背景:
    _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=crop, src=’img/bg.png’);
    15. 避免兼容性屬性的使用, 比如text-shadow || css3的相關(guān)屬性;
    16. 減少使用影響性能的屬性, 比如position:absolute || float ;
    17. 必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;
    18. 網(wǎng)站制作css屬性書(shū)寫(xiě)順序, 建議遵循: 布局定位屬性-->自身屬性-->文本屬性-->其他屬性. 此條可根據(jù)自身習(xí)慣書(shū)寫(xiě), 但盡量保證同類(lèi)屬性寫(xiě)在一起.

下一頁(yè)
返回列表
返回首頁(yè) 主站蜘蛛池模板: 国产又粗又长又更又猛的视频| 小雄和三个护士阅读| 亚洲狠狠ady亚洲精品大秀| 美女邪恶色动图gig27报| 国产日韩在线亚洲字幕中文| 92国产精品午夜福利| 婷婷久久综合网| 丰满少妇被猛男猛烈进入久久| 极品美女aⅴ高清在线观看| 国产精品美女久久久久| а√天堂资源官网在线8| 欧美国产精品不卡在线观看| 伊人久久综合谁合综合久久| 美女脱个精光让男人桶爽| 国产午夜精品一区二区| 中文字幕在线色| 国产综合色在线视频区| a毛片全部播放免费视频完整18| 欧洲精品码一区二区三区免费看 | 欧美人xxxx| 亚洲欧美综合网| 狂野猛交xxxx吃奶| 内射一区二区精品视频在线观看 | 精品国产va久久久久久久冰| 国产aⅴ激情无码久久久无码| 黑人xxxx日本| 国产激情久久久久影院小草| 18禁高潮出水呻吟娇喘蜜芽| 无遮挡韩国成人羞羞漫画视频| 乱e伦有声小说| 欧美一区二区三区婷婷月色 | 国内色综合精品视频在线| chinesektv直男少爷| 小兔子好大从衣服里跳出来| 中国娇小与黑人巨大交| 我要看a级毛片| 中文字幕永久在线| 无遮挡h肉动漫在线观看日本| 久久人妻夜夜做天天爽| 给我看播放片免费高清| 日本理论片午夜论片|