为了保持页面开发规范、避免错误，加快学习和开发效率，下面列出泽元软件前端开发中CSS的一些规范及注意事项，此规范适用于目前正在进行开发的系统（ZCMS、ZAS、ZShop）的后台页面。

1. web文件的“换行符类型”为“windows换行符-CR/LF”；编码为“UTF-8”（在GBK版本的ZCMS里或在需要与只支持GBK编码的控件交互的情况下，使用“GBK”编码）。

2. 不同的文档声明影响页面元素的渲染效果，第一行必须加文档声明 。以但证在IE6.0以上及非IE的现代浏览器里采用一致的“盒模型”。

　　HTML 4.01

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　　或 HTML5

　　<!doctype html>

 

3.  <meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10, chrome=1" />

<meta name="renderer" content="webkit" />

　　即使系统里安装有IE8或更高版本，一些以IE为内核的浏览器（如360浏览器早期版本），仍然采用IE7的内核渲染，使用上面这第一句设置，让IE以最高等级内核渲染页面，减少针对IE7作兼容处理的工作量。第二句使360极速浏览器使用webkit内核。

 

4. 大部份页面都需要有一定页边留白，使用以下HTML代码来页边留白

 

　　也可以使用DIV来页边留白：

 

5. 定义了class="js_layoutTable"的表格为布局表格，页面载入时查找所有className为js_layoutTable并且height为*的表格，对表格各个单元格进行调整，使表格内容适合父容器高度。请一定请保持表格只有一列，并且正确设置各td的height属性，以使正常完成布局。如：

 

 

6. dataTable的html结构如下

                其中有几处要注意的地方：

  • 第一行（即表头）的两个属性 ztype="head" 和 class="z-datagrid" 不能省略；
  • td的宽度应该以百分比来作单位；
  • 一般情况下不要给td设置高度属性如 height="22"，因为这种方式设置的td高度在ie和firefox下表现出来的效果并不一致，目前td的高度已经通过css调整统一了在各个浏览器下的表现；
  • 最后一行如果是翻页导航，只有一个单元格，这个单元格 colspan 属性的值一定要等于列数，如果超过列数，会撑开表格到宽于预期。

 

7. dataTable单元格的内容有两个特点要注意

  • 单元格内文字不会自动换行；
  • 超过单元格宽度的文字会被自动隐藏。

　　在需要显示所有内容，并自动换行时 必须给单元格设置属性style="white-space:normal"或class="wrap"，如下：

8. 原来textarea使用其rows属性来设置高度，经测试发现使用rows属性来设置高度的textarea在ie及firefox下的差距非常大，影响布局，现在在Default.css里已经把textarea的高度默认设为80px高（约为4行文字的高度），所以引用了Default.css的页面，不能再通过rows属性来设置textarea的高度，必须使用style属性如： <textarea cols=“60” style="height:150px;"></textarea>。

 

9.  在一般应用情况页面的基本HTML

代码如下：

 

10. 常见的HTML或CSS错误写法

　　html度量属性一般不带单位，css度量属性要带单位，如 <table width="200px" style="height:100"> 这样的写法是错误的，因为单位错误高宽设置会被忽略，应该写为 <table width="200" style="height:100px">。