div+css站点书写规范
css书写规则
css书写规则Div+css命名规范Css的命名是区分大小写的，建议全部使用小写。
下面总结一下最好的命名准则，好的命名不仅有利于维护人员阅读对搜索搜索引擎优化(seo)有很大的好处。
其中对代码的优化是一个很关键的步骤。
为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则，并做了些补充：1.1. div+css命名规范页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title友情链接:friendLink页脚:footer加入:joinus指南:guild服务:service热点:hot新闻:news下载:download注册:regsiter状态:status按钮:btn投票:vote合作伙伴:partner版权:copyRight产品管理1.2. CSS的Id命名规范外套:wrap主导航:mainNav子导航:subnav页脚:footer整个页面:content页眉:header页脚:footer商标:label标题:title主导航:mainNav(globalNav)顶导航:topnav边导航:sidebar左导航:leftsideBar右导航:rightsideBar旗志:logo标语:banner菜单内容1:menu1Content菜单容量:menuContainer子菜单:submenu边导航图标:sidebarIcon注释:note面包屑:breadCrumb(即页面所处位置导航提示) 容器:container内容:content搜索:search登陆:login功能区:shop(如购物车，收银台)当前的：current1.3. css样式文件命名主要的:master.css布局版面:layout.css专栏:columns.css文字:font.css打印样式:print.css主题:themes.css通用：basic.css上面的命名规范很直观，即使程序人员不添加注释，我们也会很清楚的知道是什么意思。
dic+css定义规范
注册：regsiter 提示信息：msg 小技巧：tips
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
尾：footer 合作伙伴：partner 登录条：loginbar
页面外围控制整体布局宽度：wrapper 左右中：left right center
搜索：search 页脚：footer 滚动：scroll
版权：copyright 友情链接：friendlink 子菜单：submenu
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
CSS与DIV构建网站(4)布局与定位
table-caption : 将对象作为表格标题显示
table-cell : 将对象作为表格单元格显示
table-column : 将对象作为表格列显示
table-column-group : 将对象作为表格列组显示
table-header-group : 将对象作为表格标题组显示
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
（12）设置对象是否及如何显示
格式：display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
可以单独设置对象各边的内部边距：padding-top（上边）、padding-bottom（下边）、padding-left（左边）、padding-right（右边）。格式参数同padding。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
超级牛最详细的Div+CSS布局案例
DIV固定宽度居中显示－超级牛最详细的Div+C SS布局案例这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px; height:500px; background:#CD5C5C;}页面代码如下：<div id="container"><p>1列固定宽度居中</p></div>效果下图显示：（点击看大图）其中居中的关键是“margin:0 auto;”代码例子由“标准之路”提供，感谢！序－经验之谈－超级牛最详细的Div+CSS布局案例最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。
大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。
在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。
我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。
CSS样式书写顺序及规范
CSS样式书写顺序及规范作者:WangMin格⾔:努⼒做好⾃⼰喜欢的每⼀件事在项⽬中，⼤部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是⽤到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对⽹页加载代码的影响。
后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的⼀种⽅式。
下⾯就开始学习吧！！各种类型属性的书写顺序及作⽤书写顺序优先级第⼀定位属性：position display float left top right bottom overflow clear z-index优先级第⼆⾃⾝属性：width height padding border margin background优先级第三⽂字样式：font-family font-size font-style font-weight font-varient color优先级第四⽂本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height优先级第五css3中新增属性：content box-shadow border-radius transform……书写顺序的作⽤减少浏览器reflow（回流），提升浏览器渲染dom的性能。
解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构构建render树：DOM树和CSS树合并之后形成的render树。
布局render树：有了render树，浏览器已经知道那些⽹页中有哪些节点，各个节点的css定义和以及它们的从属关系，从⽽计算出每个节点在屏幕中的位置。
DIV的使用
如何设计字体的大小以提高访客的用户体验？现在国内绝大多数的站点都用CSS把字体大小设定为12px，像素虽然也是相对尺寸单位，但只是相对于屏幕的分辨率，当屏幕的分辨率一定时，如果你感到字太小，阅读有困难，在非标准浏览器中就无能为力了，所以说，如果把单位改成em，那么就可以用CTRL+鼠标滚动把字放大，或者用菜单上的查看>文字大小来改变字的大小。
1.在body标签里将字体尺寸设为62.5%，如果在body里没有CSS设定，那么浏览器默认的大小是1 6px，设了62.5%，则字体尺寸=16px*62.5%=10px，这时你能用em方便地设大小了，比如你需要用12 px，只要设1.2em。
Example Source Code []body{font-size:62.5%;}h1{fong-size:1.4em;/*h1字的大小相当于14px*/}2.body里字体尺寸设为75%，则字体尺寸=16px*75%=12px，1em相当于12px.Example Source Code []body{font-size:75%;}h1{fong-size:1.5em;/*h1字的大小相当于18px*/}第一种方法更好些。
如果是英文网站的话，还可以设定为small、x-small......当然这样一来，对页面的设计要求会高一些。
div+css网页布局如何合理的运用html标签？div+css网页布局已逐渐流行，但面对所谓DIV+CSS布局的叫法让人更为担心，不要让DIV成为Tab le的替代品，多层嵌套的DIV会严重影响代码的可阅读性，活用HTML为我们提供的标签吧。
什么时候应该用DIV?虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位.例如我们要定义一块头部的区域,一般会这样定义一个DIV:Example Source Code []<div id="header">这里就是头部框架里要写的内容</div>当然,可以用class来定义,但一般来讲如不是在同一页面会重复的元素,用id能更好的区别开来.本人观察了下一个著名网站的首页代码,它的头部定义代码如下:Example Source Code []<ul id="navbar"><li id="articles"><a href="/articles/" title="Articles">Articles</a></li><li id="topics"><a href="/topics/" title="Topics">Topics</a></li><li id="about"><a href="/about/" title="About">About</a></li><li id="contact"><a href="/contact/" title="Contact">Contact</a></li><li id="contribute"><a href="/contribute/" title="Contribute">Contribute</a></li><li id="feed"><a href="/feed/" title="Feed">Feed</a></li></ul><h1 id="masthead"><a href="/"><img src="/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" /></a></h1>Example Source Code []<div id="ish"><a href="/issues/214" title="Issue 214">No. <em>214</em></a></div>定义了最上面的导航(ul部分),左边的大logo和那个圆圆的No.xxxx的标记.他没有使用DIV来做顶部的框架,但却很好的说明了这些代码的用途,为什么?因为他活用了HTML提供的标签,以及样式名称的定义其它最常用的布局标签h1这个标签或许真正会去用的人很少,因为它显示的字体真的是太"大"了,但我们是CSSer,有什么标签样式不能改呢?而且它所能表达的意思就如同它原先的作用一样明显(大标题)我想你已经知道怎么去用它了 ^_^ul这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分吧,所以还是用ul来的比较确切(去掉CSS后效果更明显)b这个已经不再推荐使用的标签,在布局上却能带来不少的方便(因为短),虽然我不是太赞成使用这个标签,但有些时候(比如细小地方的布局定义)还是不错的选择h2h2使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p如何用CSS控制图片自适应大小？图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢？我们想到了一个比较简单的解决方法，虽然不是非常的完美，如果您的要求不是非常高，已经可以满足你的需要了。
DIV+CSS布局积累
在写CSS的时候，经常为一些名字而发愁，比如说菜单后面的背景要用什么词来表示呢？大家都知道，菜单一般用menu来表示，那么菜单后面的背景我会用menubg，CSS里就写#menubg {…}。
还有一些其他的比如搜索框之类的应该怎么命名呢？下面有一些可以算得上是标准的命名吧。
如果有错误或者遗漏请朋友们帮忙补上，谢谢！[Copy to clipboard]CODE:页头：header登录条：loginbar标志：logo侧栏：sidebar广告：banner导航：nav子导航：subnav菜单：menu子菜单：submenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service热点：hot新闻：news下载：download注册：regsiter状态：status按钮：btn投票：vote合作伙伴：partner友情链接：friendlink页脚：footer版权：copyright提交：submit文本框：textbox统计：count以上结构可以组合使用，例如：左列标题lefttitle；底部导航footernav 书写原则是：1.一律小写；2.尽量用英文；3.不加中杠和下划线；4.尽量不缩写，除非一看就明白的单词。
11.17 网易的CSS写法[Copy to clipboard]CODE:/* 全局CSS定义*/body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}table,td,tr,th{font-size:12px;}/* 链接颜色*/a:link {color: #1f3a87; text-decoration:none;}a:visited {color: #83006f;text-decoration:none;}a:hover {color: #bc2931; text-decoration:underline;}a:active {color: #bc2931;}/* 颜色属性[定义规则，小写c加颜色名称] */.cRed,a.cRed:link,a.cRed:visited{ color:Red; }.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}.cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;}.cGray,a.cGray:link,a.cGray:visited{ color: #4F544D;}.cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}.cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}a.cBlack:hover{color:#bc2931;}.cYellow,a.cYellow:link,a.cYellow:visited{color:#ff0;}.cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}/* 字体属性[定义规则，小写f加属性名称] */.fB {font-weight: bold;}.fI {font-style: italic;}/* 字体大小*/.f12px{ font-size:12px;}.f14px{ font-size:14px;}/* 其他属性*/.left{ float: left;}.right{ float: right;}.clear{ clear: both; font-size:1px; width:1px; visibility: hidden; }.hidden {display: none;}.unLine ,.unLine a{text-decoration: none;}.noBorder{border:none; }页面上所有图片自动缩放的代码[Copy to clipboard]CODE:<script language="JavaScript">var imgObj;for(i = 0; i < document.all.length; i++){if(document.all(i).tagName.toLowerCase()=="img"){imgObj = document.all(i) //建议只判断高度或者宽度其中一个，那样可以自动按比例缩放if (imgObj.height>500) //判断图片的高度，如果大于500，则设置为500，值可以自己修改{imgObj.height=500}if (imgObj.width>700) //判断图片的宽度，如果大于700，则设置为700，值可以自己修改{imgObj.width=700}}}</script>滚动条的颜色定义[Copy to clipboard]CODE:scrollbar-face-color: #E0D5BE;<!--//滚动条页面颜色设定-->scrollbar-track-color: #EBE4D3;<!--//滚动条底版颜色设定-->scrollbar-highlight-color: #ffffff;<!--//滚动条斜面和左面颜色设定-->scrollbar-shadow-color: #ffffff;<!--//滚动条下斜面和右面颜色设定-->scrollbar-3dlight-color: #ffffff;<!--//滚动条上边和左边的边沿颜色设定-->scrollbar-dark-shadow-color: #ffffff;<!--//滚动条下边和右边的边沿颜色设定--> scrollbar-arrow-color: #978C71;<!--//滚动条两端箭头颜色设定-->给图片加边框在CSS文件中对img定义边界（border），例如我在CSS中定义了：[Copy to clipboard]CODE:img.framed {padding: 6px;border: 1px solid #CCC;background-color: #FFF; }那么在HTML文件中，针对嵌入的图片定义class="framed"就会有相应的边框效果。
div+css布局完整代码
3.CSS布局高级技巧
margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>
css:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
两列
单行两列
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
网上流传的，我觉得很经典了，你可以看原地址更清楚些。
CSS常用布局实例
一列
单行一列
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }