本案例基本上没有复杂的布局,读者可以参阅css/style.css,这里就不再重复说明。在style.css文件中主要包含下面几部分样式:
- 网站基本结构布局。
- 网站透明效果设计。
- 网站菜单基本样式。
- 网站常用类。
- 表单基本样式。
- 表格基本样式。
- 数据表格中各个字段列样式。
- 数据表格页脚样式。
为了能够兼容IE不同版本对于文本区域在单元格中的显示一致性,这里使用了IE条件语句,分别为不同版本进行设计。
<!--[if lte IE 7]> <link href="css/ie7.css" rel="stylesheet" type="text/css" /> <![endif]--> <!--[if gt IE 7]> <link href="css/ie8.css" rel="stylesheet" type="text/css" /> <![endif]-->
另外,本网站还包含一个动态样式表文件(style.js),在该文件中使用脚本动态控制页面Tab选项卡样式,以及动态设置数据表格的动态交互效果。主要包含下面几个功能函数:
- tablebg(fcolor,bcolor,table):为指定的表格设置表格行动态背景色。
- menustyle(showmenubox):定义导航菜单动态效果。
- resetmenu():恢复导航菜单默认样式。