IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

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

大树底下 2010-10-02 08:18:51 累计浏览 3,314 次
本机暂存

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. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  2. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)
  3. 各公司对前端开发的职位描述 (累计阅读 10,405)
  4. iframe大小自适应 (累计阅读 10,057)
  5. 浏览器的渲染原理简介 (累计阅读 8,377)
  6. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,354)
  7. 程序员眼里IE浏览器是什么样的 (累计阅读 8,011)
  8. 2010网页设计趋势 (累计阅读 7,818)
  9. Web前端工程师编程能力飞升之路 (累计阅读 7,691)
  10. 颜色的代码表达式 (累计阅读 7,665)