Zving前端页面规范及注意事项
为了保持页面开发规范、避免错误，加快学习和开发效率，下面列出泽元软件前端开发中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" "/TR/html4/loose.dtd">
或 HTML5
<!doctype html>
3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
即使系统里安装有IE8或更高版本，一些以IE为内核的浏览器（如360浏览器），仍然采用IE7的内核渲染，使用上面这一句设置，让IE以最高等级内核渲染页面，减少针对IE7作兼容处理的工作量。
4.大部份页面都需要有一定页边留白，使用以下HTML代码来页边留白
1
2
3
4
5
6
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="cellspacing">
<tr valign="top">
<td>栏目树</td>
<td>文档列表</td>
</tr>
</table>
也可以使用DIV来页边留白：
textarea中cols表示
1
<div >文档列表或表单</div>
5. 定义了class="js_layoutTable"的表格为布局表格，页面载入时查所有className为js_layoutTable并且height为*的表格，对表格各个单元格进行调整，使表格内容适合父容器高度。请一定请保持表格只有一列，并且正确设置各td的height属性，以使正常完成布局。如：
1
2
3
4
5
6
7
8
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="*" class="js_layoutTable">
<tr>
<td height="33"><z:toolbar></z:toolbar></td>
</tr>
<tr>
<td height="*"><z:datagrid></z:datagrid></td>
</tr>
</table>
6.dataTable的html结构如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table width="100%" class="z-datagrid">
<tr ztype="head" class="dataTableHead">
<td width="20%">列一</td>
<td width="40%">列二</td>
<td width="40%">列三</td>
</tr>
<tr>
<td>${列一}</td>
<td>${列二}</td>
<td>${列三}</td>
</tr>
<tr ztype="pagebar">
<td colspan="3">${PageBar}</td>
</tr>
</table>
其中有几处要注意的地方：
∙ 第一行（即表头）的两个属性ztype="head"和class="z-datagrid"不能省略；
∙ td的宽度应该以百分比来作单位；
∙ 一般情况下不要给td设置高度属性如height="22"，因为这种方式设置的td高度在ie和firefox下表现出来的效果并不一致，目前td的高度已经通过css调整统一了在各个浏览器下的表现；
∙ 最后一行如果是翻页导航，只有一个单元格，这个单元格colspan属性的值一定要等于列数，如果超过列数，会撑开表格到宽于预期。
7.dataTable单元格的内容有两个特点要注意
∙ 单元格内文字不会自动换行；
∙ 超过单元格宽度的文字会被自动隐藏。
在需要显示所有内容，并自动换行时 必须给单元格设置属性或class="wrap"，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
<table width="100%"  class="z-datagrid">
<tr ztype="head" class="dataTableHead">
<td width="40%">列一</td>
<td width="60%">列二</td>
</tr>
<tr>
<td >${列一内容}</td>
<td class="wrap">${列二内容}</td>
</tr>
<tr ztype="pagebar">
<td colspan="2">${PageBar}</td>
</tr>
</table>
8.原来textarea使用其rows属性来设置高度，经测试发现使用rows属性来设置高度的textarea在ie及firefox下的差距非常大，影响布局，现在在Default.css里已经把textarea的高度默认设为80px高（约为4行文字的高度），所以引用了Default.css的页面，不能再通过rows属性来设置textarea的高度，必须使用style属性如：<textarea cols=“60”></textarea>。
9. 在一般应用情况页面的基本HTML
代码如下：
1
2
3
4
5
6
7
8
9
<div id="header" class="pageWidth header">
……
</div>
<div id="main" class="pageWidth main">
……
</div>
<div id="footer" class="pageWidth footer">
……
</div>
10.常见的HTML或CSS错误写法
html度量属性一般不带单位，css度量属性要带单位，如<table width="200px" > 这样的写法是错误的，因为单位错误高宽设置会被忽略，应该写为 <table width="200" >。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。