为了保持页面开发规范、避免错误,加快学习和开发效率,下面列出泽元软件前端开发中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">。