2011最新整理div+css标准.docVIP

全局样式 body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;} ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;} ul { list-style:none;} img { border:0px;} a { color:#05a; text-decoration:none;} a:hover { color:#f00;} container {width:xxxpx; margin:0 auto} 清除浮动 div class=clearfloat/div .clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;} html body div id=”container” div id=”header” …… /div div id=”content” …… /* div标签以类别+功能命名（例如sidebar）、命名时尽量不要出现数字、一律小写字母 */ /* 结构层次要分明、尽量手写代码、因为可视化编辑会带来一些不必要的代码、不能做到代码的最优化 */ /div div id=”footer” …… /div /div /body /html 内容页面不能出现元素的样式 内容和样式要完全分离 图片如果能用属性种背景颜色代替 就不要出现图片 Div的float问题（margin和padding） Float的清除问题 最终的!important方法 float元素的宽度之和要小于100%float元素务必指定width属性ul标签在FF火狐中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}3像素文本偏移bug常用的CSS命名规则: 头：eader　　内容：ontent　　尾：ooter　　导航：　　侧栏：idebar 栏目：column　　页面外围控制整体布局宽度：wrapper　　左右中：left right center 登录条：loginbar　　标志：logo　　广告：banner　　页面主体：main　　热点：hot 新闻：news　　下载：download　　子导航：ubnav　　菜单：menu 子菜单：submenu　　搜索：search　　友情链接：friendlink　　页脚：footer 版权：copyright　　滚动：scroll　　内容：content　　标签页：tab 文章列表：list　　提示信息：msg　　小技巧：tips　　栏目标题：title 加入：joinus　　指南：guild　　服务：service　　注册：regsiter 状态：status　　投票：vote　　合作伙伴：partner (二)注释的写法: 　　/* Footer */ 　　内容区 　　/* End Footer */ (三)id的命名: (1)页面结构 　　容器: container　　页头：header　　内容：content/container 　　页面主体：main　　页尾：footer　　导航：nav 　　侧栏：sidebar　　栏目：column　　页面外围控制整体布局宽度：wrapper 　　左右中：left right center (2)导航 　　导航：nav　　主导航：mainbav　　子导航：subnav 　　顶导航：topnav　　边导航：sidebar　　左导航：leftsidebar 　　右导航：rightsidebar　　菜单：menu　　子菜单：submenu 　　标题: title　　摘要: summary (3)功能 　　标志：logo　　广告：banner　　登陆：login　　登录条：loginbar 　　注册：　　搜索：search　　功能区：shop 　　标题：title　　加入：joinus 　状态：status　　按钮：btn 　　滚动：scroll　　标签页：tab　　文章列表：list　　提示信息：msg 　　当前的: current　　小技巧：tips　　图标: icon　　注释：note 　　指南：guild　服务：service　　热点：hot　　新闻：news 　　下载：download　　投票：vote　　合作伙伴：partner 　　友情链接：link　　版权：copyright (四)class的命名:标题栏样式,使用’类别+功能’的方式命名,如 　　.barnews { } 　　.barproduct { } 注意事