替换表格布局

 平时我们一般都是对整体的布局用Div + Css，而对于一些输入和文字进行布局时，我们则选择了表格（大概是因为Div或用Span比较难控制吧）。不过今天我在网上发现了一个新的布局方式，就是用Ul Li方式了。效果还行。（暂放首页，如果觉得不合适，请撤下吧，我没关系）

先看看效果吧：

由于比较简直，没什么好说的，还是直接看代码吧：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
  < head >
   < title >  new document  </ title >

< style  type ="text/css"  title ="" >

body  { color : #333 ;  background-color :  #fff ;  font-size : 12px ; }
.input  { border :  #ccc 1px solid ;  padding :  0 0 0 4px ;  width :  180px ;  line-height :  20px ;  height :  20px ; }

ul.box  { width :  808px ;  margin :  0px auto ;  list-style : none ;   }
ul.box li  { float :  left ;  height :  24px ;  padding :  3px ; }
ul.box .col0  { width : 60px ;  text-align :  right ;  line-height :  24px ; }
ul.box .col1  { width :  210px ; }
ul.box .col2  { float : right ;  width :  500px ;  line-height :  24px ; }

</ style >

</ head >

  < body >

     < ul  class ="box" >         
         < li  class ="col0" > 帐号: </ li >
         < li  class ="col1" >< input  type ="text"  name ="userName"  class ="input"   /></ li >
         < li  class ="col2" > 只能是数字、字母和下划线的组合，首字符不可以为数字（3至18个字符） </ li >
        
         < li  class ="col0" > 昵称: </ li >
         < li  class ="col1" >< input  type ="text"  name ="nickName"  class ="input"   /></ li >
         < li  class ="col2" > 可以为中英文、数字和下划线的组合（1至18个字符） </ li >
        
         < li  class ="col0" > 密码: </ li >
         < li  class ="col1" >< input  type ="password"  name ="password"  class ="input"   /></ li >
         < li  class ="col2" > 6至18个任意字符，建议采用字符、数字、特殊符号的混和密码 </ li >
        
         < li  class ="col0" > 确认密码: </ li >
         < li  class ="col1" >< input  type ="password"  name ="rePassword"  class ="input"   /></ li >
         < li  class ="col2" > 必须和密码相同的字符组合 </ li >
        
         < li  class ="col0" > 邮箱: </ li >
         < li  class ="col1" >< input  type ="text"  name ="email"  class ="input"   /></ li >
         < li  class ="col2" ></ li >
        
         < li  class ="col0" ></ li >
         < li  class ="col1" >< input  type ="submit"  value =" 注册 "   /></ li >
         < li  class ="col2" ></ li >
     </ ul >

  </ body >
</ html >

转载于:https://www.cnblogs.com/dusonchen/archive/2008/07/25/1251027.html