替换表格布局
?平時(shí)我們一般都是對整體的布局用Div + Css，而對于一些輸入和文字進(jìn)行布局時(shí)，我們則選擇了表格（大概是因?yàn)镈iv或用Span比較難控制吧）。不過今天我在網(wǎng)上發(fā)現(xiàn)了一個(gè)新的布局方式，就是用Ul Li方式了。效果還行。（暫放首頁，如果覺得不合適，請撤下吧，我沒關(guān)系）
先看看效果吧：
由于比較簡直，沒什么好說的，還是直接看代碼吧：
<!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">只能是數(shù)字、字母和下劃線的組合，首字符不可以為數(shù)字（3至18個(gè)字符）</li>
????????
????????<li?class="col0">昵稱:</li>
????????<li?class="col1"><input?type="text"?name="nickName"?class="input"?/></li>
????????<li?class="col2">可以為中英文、數(shù)字和下劃線的組合（1至18個(gè)字符）</li>
????????
????????<li?class="col0">密碼:</li>
????????<li?class="col1"><input?type="password"?name="password"?class="input"?/></li>
????????<li?class="col2">6至18個(gè)任意字符，建議采用字符、數(shù)字、特殊符號的混和密碼</li>
????????
????????<li?class="col0">確認(rèn)密碼:</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>
先看看效果吧：
由于比較簡直，沒什么好說的，還是直接看代碼吧：
<!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">只能是數(shù)字、字母和下劃線的組合，首字符不可以為數(shù)字（3至18個(gè)字符）</li>
????????
????????<li?class="col0">昵稱:</li>
????????<li?class="col1"><input?type="text"?name="nickName"?class="input"?/></li>
????????<li?class="col2">可以為中英文、數(shù)字和下劃線的組合（1至18個(gè)字符）</li>
????????
????????<li?class="col0">密碼:</li>
????????<li?class="col1"><input?type="password"?name="password"?class="input"?/></li>
????????<li?class="col2">6至18個(gè)任意字符，建議采用字符、數(shù)字、特殊符號的混和密碼</li>
????????
????????<li?class="col0">確認(rèn)密碼:</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>
轉(zhuǎn)載于:https://www.cnblogs.com/dusonchen/archive/2008/07/25/1251027.html
總結(jié)
- 上一篇： 这里天刚黑，而家里都已经后半夜了
- 下一篇： JS检测上传类型