css样式贪图蛇的编写,CSS样式规范

页面制作思想原则

始终保证HTML、CSS的轻量化，把复杂的事情简单化，把简单的事情模块化，用尽可能简洁的代码实现所需的页面。

页面制作布局规范

1．页面title格式

以下划线()分割，格式：内容标题栏目标题

2．页面分为Layout和Block两大类 Layout部分负责限定总体尺寸及构建页面基本轮廓。 Block部份依实际内容分别定制最外层以div标签包裹，尺寸一般不做限定，模块尽量设置overflow样式以控制出错成本。

3．关于重用 当页面中相似模块较多时，可考虑将其结构制作成公用模块，以方便重用。 重用模块主要以结构重用为目的，对于模块中的文字、链接等细节等的处理，可以通过给其附加额外的class进行扩展。

样式命名及参数规范

1．一律采用px为数值单位

2．按钮以btn开头命名

3．图标以ico开头命名

4．Layout模块的样式以la为前缀命名。

5．重用模块的命名以前缀re开头以方便识别，重用样式建立修改必需慎重。

6．样式继承的起始为点为该标签所在的Block，继承层级尽量控制在4个以内。

7．样式套用顺序：重用样式 预置样式 私有样式。

8．样式名以前缀+Camel风格命名，例：la_showDemo

9．大型项目时可考虑给body设置class以提供额外的全局判断，利于细节扩展。

图片文件命名整合规范

1.临时文件以下划线开头(_)开头，应确保在任何情况下该文件被删除时都不会影响到网页的设计需求。例：photo.jpg

2.背景图片以bg开头来命名

a．大图独立命名，体积以控制在70KB以内为宜。

b．有固定宽高之一的平铺图片根据轴向以bg_x.jpg或bgy.jpg命名整合在一起，以1px不同色块间隔，存储成质量为100的jpg。

(考虑到平铺图片的特性，若有尺寸上的修改，原则上以删除旧图，在图片末尾处添加新图为准，不要试图在原处修改，以免出现管理混乱。)

c．有延伸要求的平铺图片务必独立命名，不可贪图方便整合进其他图片。格式为：前缀轴向_实例名。例：bg_xpage.jpg

3．网站常规的样式图片可根据需求选择jpg或gif格式，以img.jpg或img.gif命名。

4．gif动画文件需同类整合，以m为前缀，注意控制图片体积。

5．现阶段尽量不用png。

常用hack

注意：良好的结构比任何hack都好，尽量少用。

width:1px;*width:1px;_width:1px; ff,ie7,ie6

附表

复制内容到剪贴板

代码:

样式命名规范表

类型 前缀 命名示例

网页结构 la_ lashowDemo

普通模块 无 showDemo

重用模块 re re showDemo

图标 ico ico showDemo

按钮 btn btn showDemo

复制内容到剪贴板

代码:

图片命名规范表

类型 规范 命名示例

普通图片 无 photo.jpg

整合图片 img+数字(可选) img.gif | img1.gif

gif动画 m前缀 mico.gif

大尺寸背景图 bg命名 bgtop.jpg

平铺图片(限定) bg轴向 bgx.jpg

平铺图片(延伸) bg轴向_命名 bg_xpage.jpg

临时图片 _photo.jpg