web基准页面制作细则.ppt

注释的修改注意 修改项目公共样式时，修改注释信息 /* ************************************ * 文件名称：common.css * 编 写 者：***（修改人） * 编写日期：20012-08-08（修改日期） * 内容概要：页面基础公共样式（修改内容简单描述） ************************************ */ 代码书写格式 /* 内容部分样式 */ .content { width：100%；（前面空白的地方使用TAB空一格） } Hack使用规则 由于不同的浏览器，比如IE 6,IE7,IE8 ,Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。如 .top{ width:200px/*IE8*/; *width:210px;/*IE7*/ _width:208px;/*IE6*/ } 通用样式定义标准 整个站点的背景色（background）：缺省时定义为白色； 中文大小(font-size)：12px； 中文字体(font-family)：宋体； 英文字体(font-family)：Arial； 空白(margin)：0px； 间隙(padding)：0px； 字体链接颜色：a:link、a:visited、a:active、a:hover 图片边框(border)：0px； 输入框定义(input) 按钮定义(button) 注：在定义样式文件时，一定要注意默认值这个问题，因为不同浏览器对默认值的解释都不一样，所以在定义属性时，一定要慎重考虑并定义标签元素的默认值。 按web页面的结构布局位置命名。网站整体通用的命名规则以网页顶部、中部、底部三个大区块位置及其内部位置进行划分与命名。 网页顶部定义的样式命名为：class=”header”； 网页中部定义的样式命名为：class=”middle”； 网页底部定义的样式命名为：class=”footer”； 按照web页面的区块命名。在网页中部定义中，我们应当按其位置划分为左右两个区块或者左、中、右三个区块： 网页中部左侧运用的样式命名为：class=”left”； 网页中部中间运用的样式命名为：class=”middle”； 网页中部右侧运用的样式命名为：class=”right”； 按功能模块命名。对于web网站中模块样式定义，我们应当按照模块名称定义模块的布局样式。例如： 登录模块，我们应当这样命名：class=”login” 按照组件名称命名。使用组件制作的网站，对于组件的样式，我们通常采用组件的名称命名样式的名称；如果一个组件有多个样式，我们可以在名称的后面加上数字以示区分，例如： 某组件的第一种样式命名为：class=” xxx1”； 它组件的第二种样式命名为：class=” xxx2”； 在定义css中的class时，建议使用层次分时的方式来描述语句。 示例结构： div class=”menu” div class=”menulist” div class=”selectit”/div /div /div 示例Css: .menu { …… } .menu .menulist { …… } .menu .menulist .selectit { …… } 在上例中，从最终效果来看，.menu没有必要重复出现，但是实际上如果在前面加上.menu，将会让文档的层次更加明了，更利于查找和阅读 class命名规范 class命名要用英文单词作为其名称，如果需要加数字表述的，可以在单词后面添加数字，禁止用数字开头为其名称，禁止用中文为其名称，禁止用特殊字符为其名称。 首字母小写第二个单词首字母大写，不要超过四个单词，如果单词太长，取其前三位字母。例如：两个单词class名称：.productlist 三个单词class名称：.productlistleft id和class命名采用所定义内容的英文单词或组合命名。 不建议使用id来定义样式，因与后期开发人员建立的id名称有预期冲突，尽可能使用class来定义，而且class有更多的资源重复利用的可能。 同一类型的class名称第一个单词要一致。例如：字体， 红色字体：.fontRed 绿色字体：.fontGreen 加粗字体：.fontBold 页面内容说明 class名称 页面内容说明 class名称 页面内