CSS介绍及布局特点
层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
对于蜘蛛在爬行一个网站的页面时，若是有太多的垃圾代码，会使搜索蜘蛛对其产生不友好、不信任感，同时蜘蛛的爬行速度也会因此而减缓，对于网站SEO而言，可谓一大忌。就如传统的用table页面，对此我们就需要对网站进行代码优化，而这便需要动用CSS+div了，下面便来谈谈使用CSS+div进行代码优化的一些益处。
一.精简代码，降低重构难度。
网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。
二.网页访问速度
使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。
三.SEO优化
采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
四.浏览器兼容性
DIV+CSS相比TABLE布局，更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。国内主流是ie，firefox及chrome用的较少，在兼容性测试方面，首先需要保证在ie多版本不出现问题，这里涉及到一些方法和技巧，可以针对具体问题在网站查找解决办法。
五.CSS+DIV网页布局的时候常犯的小错误
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否书写正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。
3. 用删除法确定错误发生的位置
如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。
8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
9. 是否重设了默认的样式?
某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
10. 是否忘记了写DTD?
如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。
最后，需要注意的是，蜘蛛不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。而同时，若非必须太多花哨的网站，采用CSS布局，同样可以到达所想要的效果。如网站导航中的文字颜色变化、下拉菜单等。
代码实例
选项卡
参数设置>系统
基本设置颜色曲线及图形显示
报警设置
声音1
声音2
声音3
声音4
声音5
声音6
声音7
声音8
声音9
声音10
启动报警
报警项目声音选择
超上限
超下限
溢出
负漂
断线
变态
0态
1态
2态
联合控制
组合报警
中断
预警
逻辑报警
Ⅰ级报警
Ⅱ级报警
Ⅲ级报警
Ⅳ级报警
选择声音
声音1
声音2
声音3
声音4
声音5
声音6
声音7
声音8
声音9
声音10
发声次数
持续
1
2
3
4
5
6
7
安全生产天数
显示
起始统计日
系统退出保存的实时数据有效时长
小时
分钟
控制量显示带反馈异常状态
随机打印
状态颜色
文字色
背景色
模拟量正常量：
无
无
模拟量超预警：
无
无
模拟量下报警：
无
无
模拟量故障：
无
无
二态量0态：
无
无
二态量1态：
无
无
三态量0态：
无
无
三态量1态：
无
无
三态量2态：
无
无
其他故障：
无
无
静态文字：
无
无
页背景色：
无
无
通用曲线
缺省通用曲线文件名：
生成缺省通用曲线时间：
小时
最大最小平均值取样时间：
分钟
实时曲线
线宽：
细
中
粗
取样时间：
分钟
刷新周期：
秒
曲线时长：
小时
小时
1
2
3
4
5
条
系统自检图设置
图名称
图文件
公共页显示设置
先横后竖排列测点
先竖后横排列测点
列数
1
2
3
4
5
测点号
地点/名称
类型
单位
变化时刻显示
变态时刻
变值或变态时刻
报警解除
分
断电恢复
分
馈电恢复
分
状态变动
分
显示持续时间参数
负漂显示方式：
显示状态
显示数据
显示分站
名称
地点
地点\名称
异常数据表格显示窗口
总在最前面
自动弹出
自动启动设置
瓦斯抽放
实时列表显示
核子秤及提升
$(document).ready(function(){
// 改为鼠标移上的事件只需把click改为mousemove
$(".fortab").click(function(){
var number=$(".fortab").index(this);
$(this).addClass("checked");
$(this).siblings().removeClass("checked");
$(".tablelist:eq("+number+")").show();
$(".tablelist:eq("+number+")").siblings().hide();
});
});
效果图
