當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

替换表格布局

發布時間：2025/4/5 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了替换表格布局小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?平時我們一般都是對整體的布局用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

總結

以上是生活随笔為你收集整理的替换表格布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。