文档介绍：PC端规范代码
示例
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
——注:UTF-8 编码具有更广泛的适应性——
<meta name="robots" content="all">
<meta name="author" content="CBD-CP">
——注:作者统一公司名字——
<meta name="Copyright" content=" CBD">
<meta name="Keywords" content="装修CBD">
<title>装修CBD(标题)-装修攻略–装修日志</title>
——title注:产品中文全称-产品英文缩写-官方网站——
<meta name="keyworeds" content="家装商城、家装效果图、装修知识库、线下实体店">
<link href="" rel="stylesheet">
——样式注:求统一使用外链CSS文件方法——
<script src="域名/js/"></script>
</head>
<body>
</body>
</html>
页面注释说明
html <!-- 在区域中加上页面注释,方便查看页面代码-->
<!-- top start-à
内容区
<!-- top end-à
Css /*里面注释代码,方便查看及修改*/
/* Footer */
内容区
/* End Footer */
页面共用样式
页面公共部份由一个人编写(例如:公共头部,公共尾部)
CSS样式重置
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:0;padding:0}
body,button,input,select,textarea{ font:12px/ "宋体",arial, verdana, sans-serif}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
li{list-style:none}
fieldset,img{border:0}
table{border-collapse:collapse;border-spacing:0}
q:before,q:after{content:”}
button,input,select,textarea{font-size:100%}
legend{color:#000}
small{font-size:12px}
hr{border:none;height:1px}
a{text-decoration:none}
a:hover{text-decoration:underline}
.cle:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.cle{ display:inline-block}
.cle{ display:block}
.clear {clear: both;}
文件目录
存放其它图片文件夹命名规范:imgaes
存放广告图的文件夹banner_img
文件名应该全部小写,多个单词以下划线“_”分开
JS文件(非必须,框架、公用js的放到该目录):js
确保文档或模板中只包含html,把用到的样式都写到样式表文件中,把脚本都写到js文件中。这在多人协作时非常重要。
关于活动专题以专题名称命名为文件夹(方便查找修改)
样式规范化(红色为强制,绿色为建议)
{ 之间必须包含空格。
例:
.selector {
}s
……………………………………………………………………………………………………………………………………………………
4 个空格做为一个缩进层级,不允许使用 2 个空格或 tab 字符。
例:
.selector {
margin: 0;
padding: 0;
}
……………………………………………………………………………………………………………………………………………………
120 个字符,除非单行不可分割
/* 不同属性值按逻辑分组*/
background:
transp