PC端规范代码.docx

PC端规范代码示例 注：UTF-8 编码具有更广泛的适应性 注：作者统一公司名字装修CBD（标题）-装修攻略 装修日志title注：产品中文全称-产品英文缩写-官方网站 样式注：求统一使用外链CSS文件方法页面注释说明html !- top start-内容区!- top end-Css /*里面注释代码，方便查看及修改 */ /* Footer */内容区/* End Footer */页面共用样式CSS共用样式放在base.css常见的样式 common.css 页面公共部份由一个人编写（例如：公共头部，公共尾部）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,hrmargin:0;padding:0body,button,input,select,textareafont:12px/1.5宋体,arial,verdana,sans-serifh1,h2,h3,h4,h5,h6font-size:100%;font-weight:normallilist-style:nonefieldset,imgborder:0tableborder-collapse:collapse;border-spacing:0q:before,q:aftercontent:”button,input,select,textareafont-size:100%legendcolor:#000smallfont-size:12pxhrborder:none;height:1pxatext-decoration:nonea:hovertext-decoration:underline.cle:aftercontent:.;display:block;height:0;clear:both;visibility:hidden.cledisplay:inline-block.cledisplay:block.clearclear:both; 文件目录（1） 存放其它图片文件夹命名规范：imgaes（2） 存放广告图的文件夹banner_img（3） 文件名应该全部小写，多个单词以下划线“_”分开（4） JS文件(非必须，框架、公用js的放到该目录)：js（5） 确保文档或模板中只包含html，把用到的样式都写到样式表文件中，把脚本都写到js文件中。这在多人协作时非常重要。（6） 关于活动专题以专题名称命名为文件夹（方便查找修改）样式规范化(红色为强制，绿色为建议)01.选择器 与 之间必须包含空格。例：.selector s02.使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。例：.selector margin: 0; padding: 0;03.每行不得超过 120 个字符，除非单行不可分割/* 不同属性值按逻辑分组 */background: transparent url(aVeryVeryVeryLongUrlIsPlacedHere) no-repeat 0 0;/* 可重复多次的属性，每次重复一行 */background-image: url(aVeryVeryVeryLongUrlIsPlacedHere) url(anotherVeryVeryVeryLongUrlIsPlacedHere);/* 类似函数的属性值可以根据函数调用的缩进进行 */background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, rgb(88,94,124), color-stop(0.52, rgb(115,123,162);04.属性定义必须另起一行漂亮统一的代码格式可以提高代码的可读性和可维护性，css的最佳代码格式主要有以下几点：定义顺序以字母序排列，不考虑浏览器前缀；定义以分号结束；属性名称定义的分号后添加一个空格；多个选择器定义时，每个定义单独占一行。例：/* 推荐 */.selector margin: 0; padding: 0;例：/* 不推荐 */.selector margin: 0; padding: 0; 05.当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行例：/* 推荐 */.post,.page,.comment line-height: 1.5;例：/* 不推荐 */.post, .page, .comment line-height: 1.5;06.为每个块级元素或表格元素标签新起一行，并且对每个子元素进行缩进如：MoeLarryCurly如果css属性的值为0,则后面不要带上单位。除非真的是需要。 margin: 0; padding:0;06.CSS书写顺序，以提高代码的可读性。1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等)07.清除浮动当元素需要撑起高度可以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC（block formatting context中文就是“块级格式化上下文”） 的方式进行 clearfix。尽量不使用增加空标签的方式。解释：触发 BFC 的方式很多，常见的有：float 非 noneposition 非 staticoverflow 非 visible另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。08.尽量不使用 !important 声明。当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。解释：必须注意的是，仅在设计上 确实不允许任何其它场景覆盖样式 时，才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。下面的 z-index 章节是其中一个特殊场景的典型样例。09. RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。带有alpha的颜色信息可以使用rgba()。使用rgba()时每个逗号后必须保留一个空格。颜色值可以缩写时，必须使用缩写形式/* 推荐*/.success box-shadow: 0 0 2px rgba(0, 128, 0, .3);border-color: #008000;/*不推荐*/.success box-shadow: 0 0 2px rgba(0,128,0,.3);border-color: rgb(0, 128, 0);10. 使用CSS缩写属性01）CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。03）去掉小数点前的“0”03）16进制颜色代码缩写（能缩写的情况下）04）连字符CSS选择器命名规范1.长名称或词组可以使用中横线来为选择器命名。2.不建议使用“_”下划线来命名CSS选择器，为什么呢？输入的时候少按一个shift键；浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）能良好区分JavaScript变量命名（JS变量命名是用“_”）04）不要随意使用Idid在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。05）不要随意使用Id11. 必须同时给出水平和垂直方向的位置。解释：2D 位置初始值为0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避免理解上的困扰，应同时给出两个方向的值。background-position属性值的定义例：/* 推荐 */body background-position: center top; /* 50% 0% */* 不推荐*/body background-position: top; /* 50% 0% */12. font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。统一使用推荐的字体定义写法。 说明：(推荐使用下面字体： body font-family:”Lucida Grande”,Verdana,Lucida,Arial,Helvetical,宋体,sans-serif; 字体按照所列出的顺序使用。其中中Lucida Grande字体适合Mac OS X；Verdana字体适合所有的Windows系统；Lucida适合UNIX用户；如果所列出的字体都不能用，则默认的sans-serif字体能保证调用。)字体操作系统Family Name宋体 (中易宋体)WindowsSimSun黑体 (中易黑体)WindowsSimHei微软雅黑WindowsMicrosoft YaHei微软正黑WindowsMicrosoft JhengHei华文黑体Mac/iOSSTHeiti冬青黑体Mac/iOSHiragino Sans GB文泉驿正黑LinuxWenQuanYi Zen Hei文泉驿微米黑LinuxWenQuanYi Micro Hei例：h1 font-family: Microsoft YaHei;font-family不区分大小写，但在同一个项目中，同样的Family Name大小写必须统一。例：/* 推荐*/body font-family: Arial, sans-serif;h1 font-family: Arial, Microsoft YaHei, sans-serif;/* 不推荐*/body font-family: arial, sans-serif;h1 font-family: Arial, Microsoft YaHei, sans-serif;13. 把多媒体元素可知化。像图片、视频、动画等多媒体元素，要有相关的文字来体现其内容，比如 可以使用alt属性来说明图片内容。标签中，必须包括alt元素。 说明：W3C XHTML1.0标准中规定，在标签中，必须包括alt元素。/* 推荐*/ /* 不推荐*/14. 按照XHTML规范，所有标签名及属性名必须全小写，属性值以双引号包裹，属性的等号两边禁止添加空格。所有标签必须闭合。例：“”必须写作“” 15. 所有被废弃的标签禁止使用，例如：，等16. 尽量减少行内CSS的使用，除一些类似规定表格栏位宽度等比较具有特殊性的位置，禁止在元素内使用行内CSS例： 17. 对内容型的图片和背景型的图片进行区分。对于网站LOGO，按钮图片以及边框样式等均属于背景型图片，而商品的图片，注册用户的头像等则属于内容型的图片。背景型图片应尽量避免使用标签显示在页面中，而是应该采用CSS，背景型图片应采用CSS Sprite技术，将零散的图片合成为一张图片，以减少请求。关于CSS Sprit技术，命名应该全小写，多个单词以下划线“_”分隔。18. CSS Hack CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法，利用了各个浏览器对CSS的支持和解析结果不一样的特点例如： IE6能识别下划线_和星号*，IE7能识别星号*，但不能识别下划线_，而Firefox两个都不能识别。书写顺序一般是将识别能力强的浏览器的CSS写在后面。比如： div background: green; /* for firefox */ *background: blue; /* for IE7 */ _background: red; /* for IE6 */ 这样在Firefox中看到的背景是绿色，在IE7中看到的是蓝色，而IE6中看到的是红色。 利用这种方式，可以解决多种由于IE独特的文档渲染方式造成的问题。19. /* Hide from IE Mac */ .clearfix display: block; /* End hide from IE Mac */ /* end of clearfix */ 或者这样设置： .hackbox display: table; /*将对象作为块元素级的表格显示*/ 20. 所有的特殊符号用转义编码表示21. 尽量利用继承属性，避免重复样式定义。 说明：子元素自动继承父元素的属性值，像颜色、字体等，所以对于可以继承的CSS规则，不需要重新定义。注意：1、如果某元素的样式是特定的，它必须定义不受继承影响的样式；22. 使用table标签时，请不要用widht、height、cellspacing、cellpadding等table属 性直接定义表现，应尽可能的利用table自身私有的属性分离结构与表现，如：thead、tr、th、td、tbody、tfoot、colgroup、scope。/* = 关于团队合作的css命名规范 = */常用的css命名规则头:header内容:content | 容器container尾:footer | 页脚:footer导航:nav | 子导航:subnav侧栏:sidebar栏目:column页面外围布局宽度:wrapper左右中:left right center广告:banner首页：homepage文章列表:list二级页面子页面：subpage页面主体:main菜单:menu | 子菜单:submenu下拉菜单dorpmenu栏目标题:title热点:hot标志:logo登录条:loginbar下载:download新闻:news状态:status搜索:search滚动:scroll版权:copyright友情链接:friendlink标签页:tab小技巧:tips提示信息:msg指南:guild合作伙伴:partner注册:regsiter投票:vote加入:joinus服务:service (二)注释的写法: (三)id的命名-页面结构:容器: container页头:header页面主体:main内容:content/container页尾:footer 导航:nav侧栏:sidebar栏目:column文章列表:list页面外围控制整体布局宽度:wrapper左右中:left right center二级页面子页面：subpage(1)导航导航:nav边导航:sidebar左导航:left