css规范.docVIP

经营频道CSS规范 前言 本规范主要描述：css文件命名规则、css类命名规则、通用的css头和html布局命名规则。 本规范适用范围：河北新闻网经营频道技术的频道和专题的制作。 本规范适用时间：2012年度 书写人：李琳 时间：2012-2-15 css文件命名 为了便于网页的管理，我们建议将页面的css文件统一命名为：style****.css，其中的****为日期编号（如：2月14号出的css文件命名为：style0214.css）。没有加上年份是因为我认为对于我们现有的频道1年内肯定会进行大规模的改版，没有必要加上年份标记。此css文件放在到网页模板文件相关文件夹的根目录中便于以后的查找。 html布局命名规则 分析现有的频道和专题我们可以看出常用的布局有：头尾中（左右）布局头尾中（左中右）布局左右（上中下）footer 中：center 左中右等级均分（左：area-rank、中：area-main、右：area-sub） 中右等级高左等级低（中右：area-main（中左：main-col-l、中右：main-col-r）、左：area-sub） 左等级高右等级低（左：area-main、右：area-sub） css类命名规则 css类的命名最好是描述性单词或者单词前缀，如果相同命名的可以在后面加上数字编号如（main-col-1，main-col-2）来区分。如果一个div上需要class和id分别描述的话，class的命名是以结构布局为主，id的命名是以功能说明为主（如：div?id=sports?class=mod wgt-tab）。对于网页中的各类型新闻块在拆分的时候需要单独处理，保证div一个分区中的新闻内容相对统一。 css通用头例子 a:link, a:visited {text-decoration:none;} a:hover, a:active {text-decoration:underline;} .fl {float:left;} .fr {float:right;} .mt5 {margin-top:5px;} .pr5 {padding-right:5px;} img {border:0;} a img {display:block;} dl, dt, dd, form, h1, h2, h3, h4, h5, legend, ol, ul, p, input, select, textarea {margin:0;padding:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal} ol li, ul li {list-style:none;} .clear {clear:both;} .hide {display:none;} input, select, textarea {color:#666;font-family:Microsoft yahei, Arial, Simsun, sans-serif;} a b, a strong {cursor:pointer;} body {margin:0 auto;}