div+css站点书写规范.pdf

《div+css站点书写规范.pdf》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、div+css站点书写标准--HTMLCSS本标准分为四部分：严格遵循并符合W3C标准、HTML应用代码规范、CSS样式文件要求、六大原则；第一部分从理念思维方向确定代码书写规范，第二、三，HTML、CSS部分为标准具体代码应用标准，第四，为综合性应用的六个原则。简洁有效为主导。一、严格遵循并符合W3C标准结构化标准语言：XHTML和XML;表现标准语言：CSS;行为标准：W3CDOM、ECMAScript的集合。1.“网页结构、表现、行为分离，互不干涉抢功"是W3C标准的理念。HTML、CSS、JS的分离可以提高网页响应速度（CSS、JS可被缓存）,页面的文

2、档结构必须清晰。2.修饰性图片文本替换，JS、FLASH文字图片还原。将修饰性无意义图片变成背景图显示，用有意义的文字进行替换，这样便于搜索引擎的忽视，更好地做到精简。常用于logo，按钮，菜单3.必须添加链接标签的title、图片标签的alt属性（W3C本意是：提高亲和力）。4.合理安排使用h1-h6、文本加粗、斜体、下划线。5.网页板块布局随意性更强（重要的内容调前，之后使用CSS重新定位）。6.语义标签的合理运用。其他的字体（FONT）和格式化标签也尽量少用，建议采用CSS定义7.代码精简，嵌套层关系少于三层。8.ID与CLASS使用严谨（ID用在唯一结

3、构性布局，Class反之）9.CSS书写精简：a.颜色（color:#000;）b.盒尺寸（margin:1em02em0.5em;）c.边框(border:widthstylecolor;)d.背景(background:#f00url(background.gif)no-repeatfixed00;)e.字体(font:italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;)f.列表(ist-style:squareinsideurl(image.gif);)g.取消class和id前的元素限定(div

4、#id1{}可以写成#id1{})h.CSS的优先级行内样式>ID选择符>样式,伪类和属性选择符>类别,伪对象i.不需要重复定义可继承的值(父子级关系)j.多重CSS样式定义，属性追加重复最后优先原则k.使用子选择器(descendantselectors)l.不需要给背景图片路径加引号;m.使用条件注释运用csshack;10.命名规范,直意表达（英文）。Class文件命名:模块：module.css基本共用：base.css布局、版面：layout.css主题：themes.css专栏：columns.css文字：font.css表单：forms.css补

5、丁：mend.css打印：print.cssDiv命名:头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面整体布局宽度wrapper左右中：leftrightcenter登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页：tab

6、文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partner页面结构命名:容器:container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column外围整体布局宽度：wrapper左右中：leftrightcenter导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：left

7、sidebar右导航：rightsidebar菜单：menu子菜单：submenu标题:title摘要:summary+功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msgClass书写:颜色.red{color:red;}.f60{color:#f60;}.ff8600{color:#ff8600;}字体.f12p{font-size:12px;}.f

8、9p{font-size:9pt;}宽