技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> 网站css样式命名规范和应用原则

网站css样式命名规范和应用原则

浏览:2453次  出处信息

1.    CSS属性应用原则。
原则1:首页DIV最小块级单位须设置高度;子页可能添加资料的DIV块不应设置高度;
原则2:css 样式继承关系必须控制在三层以内;
原则3: 对于浮动所产生的IE6BUG,在全局样式里面应定义.clear{clear:both;height;0px; overflow: hidden;}
原则 4:所有页面文件的编码格式统一为:UTF-8;

2.    CSS命名规范。
全局样式 base.css 指所有页面通用的样式,或者公共块的样式;
首页样式 index.css
频道页面样式 channel.css
详 细页面样式 detail.css
如果有特殊单独页面样式,可另取样式命。

3.    页面框架结构保留字。
页面容 器:#wrap                             页面头部:#header
页面中心内 容:#maincontent             页面底部:#footer
横向方位容器1:main,side             横向方位容器2:leftframe,midframe,rightframe
横向分段容器:section,field,column 盒子内容属性:contentbg
盒子上方属性:topbg                             盒子下方属性:bottombg
盒子左边属性:leftbg                             盒子右边属性:rightbg

4.    导航保留字。
导航:nav    主导航:mainnav
子导 航:subnav    顶导航:topnav
边导航:sidebar    左导航:leftsidebar
右导 航:rightsidebar    菜单:menu
子菜单:submenu    下拉菜单:dropmenu
快速菜 单:quickmenu

5.    功能保留字。
列表:list                    标 题:title
摘要:intro    内容:text
按扭:btn                    搜索:search
登 陆:login    注册:regsiter
提示信息:msg    小技巧:tips
图标: icon                    滚动:scroll

6.    根目录文件夹命名存放方式。
例如:
总 网站文件存放于F盘web下;
Web下 应该包含
images    存放所有网站直接插入的图片;
imagestemp    存 放所有网站直接插入,但后期一定被程序替换的图片。
imagesad    存放网站所有的广告图片;
style    images    存 放公共或单独页面样式所涉及的样式图片;
存放公共样式表或单独页面样式表;
include    存放网站所有的包含页面;
js    存 放网站所有的JS效果文件
XXXX
频道页文件夹    style    存放所有频道页面所涉及到的样式图片和样式表;
存 放所有该频道下的子页面;

7.    注释。
页面和样式表里面 容易混淆,或比较重要的样式,框架样式 都应写注释

页 面内注释格式为
<!-header->     ――――――――-为开始
<!-//header->   ――――――――-为结束

样式表内注释格式为:
/*XXXX   样式开始*/

/*XXXX   样式结束*/

本文转载自:http://www.ilmilk.com/large-sites-and-application-of-the-principles-of-css-style-name.html

建议继续学习:

  1. 规范自己的JavaScript书写    (阅读:5969)
  2. PHP编码规范    (阅读:4350)
  3. 代码里的命名规则:错误的和正确的对比    (阅读:3558)
  4. 数据库开发规范    (阅读:3388)
  5. 分清“语言/规范”以及“平台/实现”,以及跨平台.NET开发    (阅读:3179)
  6. Android 4.0设计规范 优先导读 十大改变 (附全文翻译pdf)    (阅读:2738)
  7. 编码风格不是编码规范    (阅读:2603)
  8. phpDocumentor    (阅读:2511)
  9. 良好的书写规范提高PHP代码执行效率    (阅读:2571)
  10. ClassName的长命名 VS. 短命名(懒懒交流会记录)    (阅读:2020)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
后一篇:word wrap 解惑 >>
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1