大家好
我的公告
我的相册
最新留言
最新评论
友情链接
QQQQ
文章专辑
空白面板
小小
背景音乐
2007-02-27 10:51:22

form无论是在网站的制作中,还是在网站的重构中,我们都会频繁地“碰面”,当“碰面”的次数多了,反而觉得他更让人迷茫,有种熟悉的“陌生”,越来越把握不了他。下面我们将带大家走进form的世界,一起来熟悉、探讨、掌握他的“脾性”。对于简单form的设计图(如图一,yahoo注册页面的一部分),我们如何来做整体的布局呢?大体我们可以选用以下3种方式来做布局:1、使用table来布局这是大家最常用的方法,虽然现在到处都在谈标准化,甚至更多的在说div+css,但怿飞还是推荐大家使用table来布局form。对于标准,个人的另类理解“更符合逻辑,更效率快捷”。为什么推荐大家使用呢?table本就是用来显示二维数据,用table来布局form可以说是他的“老本行”。另外重要的一点是,对于复杂的form,table能更有效的进行布局和维护修改,体现了效率和易用。在布局之前,先温习一下table的部分标签:table:显示二维数据 summary:定义表格的用途 caption:定义表格的标题,在表格开始的地方使用,仅一次 tr:表格中的一行 th:表头单元格,定义一行或者一列的表头信息 td:数据单元格下面我们具体来对图一的设计图进行整体布局:XHTML部分:<form id="demoform" class="democss" action=""><table summary="使用table来布局的演示" id="demo"><caption>
Registration example form
</caption><tr>
<th><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></th>
<td><input type="text" id="fname" value="" /></td>
</tr>
<tr>
<th><span class="required">*<
2007-02-27 10:47:54
黑客帝国特效,跟电影一样酷!
<script language="JavaScript"> <!-- if (document.all){ Cols=6; Cl=24;//Space's are included so real length is 48! Cs=10; Ts=10; Tc='#008800'; Tc1='#00ff00'; MnS=20; MxS=30; I=Cs; Sp=new Array();S=new Array();Y=new Array(); C=new Array();M=new Array();B=new Array(); RC=new Array();E=new Array();Tcc=new Array(0,1); document.write("<div id='Container' style='position:absolute;top:0;left:-"+Cs+"'>"); document.write("<div style='position:relative'>"); for(i=0; i < Cols; i++){ Si]=I+=Cs; document.write("<div id='A' style='position:absolute;top:0;font-family:Arial;font-size:" +Ts+"px;left:"+Si]+";width:"+Ts+"px;height:0px;color:"+Tc+";visibility:hidden'></div>"); } document.write("</div></div>"); for(j=0; j < Cols; j++){ RCj]=1+Math.round(Math.random()*Cl); Yj]=0; Spj]=Math.round(MnS+Math.random()*MxS); for(i=0; i < RCj]; i++){ Bi]=''; Ci]=Math.round(Math.random()*1)+' '; M
<script language="JavaScript"> <!-- if (document.all){ Cols=6; Cl=24;//Space's are included so real length is 48! Cs=10; Ts=10; Tc='#008800'; Tc1='#00ff00'; MnS=20; MxS=30; I=Cs; Sp=new Array();S=new Array();Y=new Array(); C=new Array();M=new Array();B=new Array(); RC=new Array();E=new Array();Tcc=new Array(0,1); document.write("<div id='Container' style='position:absolute;top:0;left:-"+Cs+"'>"); document.write("<div style='position:relative'>"); for(i=0; i < Cols; i++){ Si]=I+=Cs; document.write("<div id='A' style='position:absolute;top:0;font-family:Arial;font-size:" +Ts+"px;left:"+Si]+";width:"+Ts+"px;height:0px;color:"+Tc+";visibility:hidden'></div>"); } document.write("</div></div>"); for(j=0; j < Cols; j++){ RCj]=1+Math.round(Math.random()*Cl); Yj]=0; Spj]=Math.round(MnS+Math.random()*MxS); for(i=0; i < RCj]; i++){ Bi]=''; Ci]=Math.round(Math.random()*1)+' '; M
