css 表單效果_經驗交流

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>作者：阿會楠 2008-12-4</title> <script language="javascript" type="text/javascript"> //js辅助 window.onload = function(){ var initleft = 200;// 初始化第一个定位 var lis = document.getElementById("menu").getElementsByTagName("li"); for(var i = 0;i < lis.length;i++){ lis[i].style.left = initleft + i*100 + "px"; } } </script> *{ 字體大小：12px； 填充：0； 保證金：0； } 身體{ 文字對齊：居中； } #reg{ 保證金：0 自動； 寬度：600px； 背景：#cccccc； 高度：500px； } h6{ 背景：黑色； 高度：28px； 白顏色; 文字對齊：左對齊； 行高：28px； 左內邊距：3px； } ＃菜單{ 高度：30px； 文字對齊：左對齊； 頂部填充：15px； 左內邊距：10px； 溢出：隱藏； } 李{ 清單樣式類型：無； } #菜單裡{ 向左飄浮; 顏色：綠色； 高度：30px； 內邊距：0 5px； 行高：30px； 左邊距：20px； 位置：絕對； } 。當前的{ 邊框：1px 純藍色； 底部邊框：0； 背景：白色； } ＃內容{ 邊框：1px 純藍色； 高度：400px； 邊距：8px； 上邊距：0； 背景：白色； 內邊距：10px； } #內容dl{ 上邊框：1px實心#ccc； 左邊框：1px實心#ccc； 寬度：560px； 高度：116px； } #內容dl dd,#內容dl dt{ 右邊框：1px 實線#cccccc； 邊框底部：1px實心#cccccc； 高度：28px； } #內容dl dt{ 寬度：200px； 向左飄浮; 文字對齊：右； 右內邊距：3px； 背景：#F0F0F0； 行高：28px； } #內容dl dd{ 寬度：352px； 向左飄浮; 文字對齊：左對齊； 左內邊距：3px； } /*相容即6.0*/ #內容 dl dd div{ 頂部填充：3px； } 風格> 頭> <div id="reg"> <h6>歡迎註冊玩具購會員！</h6> <div id="選單框"> <ul id="菜單"> <li style="left:200px;">確認服務條款</li> <li class="current" style="left:300px;">選擇使用者名稱</li> <li style="left:400px;">選擇使用者類型</li> <li style="left:500px;">填寫詳細資料</li> </ul> </div> <div id="內容"> <dl> <dt>使用者名稱</dt> <dd><div><input type="text"></div></dd> <dt>密碼</dt> <dd><div><input type="text"></div></dd> <dt>確認密碼</dt> <dd><div><input type="text"></div></dd> <dt></dt> <dd><input type="button" value="註冊"></dd> </dl>形式> </div> </div> 正文>
[​​Ctrl A 全選注:如需引入外部Js需刷新才能執行]