代碼如下：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>by 阿會楠 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> <style type="text/css"> *{ font-size:12px; padding:0; margin:0; } body{ text-align:center; } #reg{ margin:0 auto; width:600px; background:#cccccc; height:500px; } h6{ background:black; height:28px; color:white; text-align:left; line-height:28px; padding-left:3px; } #menu{ height:30px; text-align:left; padding-top:15px; padding-left:10px; overflow:hidden; } li{ list-style-type:none; } #menu li{ float:left; color:green; height:30px; padding:0 5px; line-height:30px; margin-left:20px; position:absolute; } .current{ border:1px solid blue; border-bottom:0; background:white; } #content{ border:1px solid blue; height:400px; margin:8px; margin-top:0; background:white; padding:10px; } #content dl{ border-top:1px solid #ccc; border-left:1px solid #ccc; width:560px; height:116px; } #content dl dd,#content dl dt{ border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; height:28px; } #content dl dt{ width:200px; float:left; text-align:right; padding-right:3px; background:#F0F0F0; line-height:28px; } #content dl dd{ width:352px; float:left; text-align:left; padding-left:3px; } /*相容ie 6.0*/ #content dl dd p{ padding-top:3px; } </style> </head> <body> <p id="reg"> <h6>歡迎您註冊玩具購會員！</h6> <p id="menubox"> <ul id="menu"> <li style="left:200px;">確認服務條款</li> <li class="current" style="left:300px;">選擇使用者名稱</li> <li style="left:400px;">選擇使用者類型</li> <li style="left:500px;">填寫詳細資料</li> </ul> </p> <p id="content"> <form> <dl> <dt>使用者名稱</dt> <dd><p><input type="text" /></p></dd> <dt>密碼</dt> <dd><p><input type="text" /></p></dd> <dt>確認密碼</dt> <dd><p><input type="text" /></p></dd> <dt></dt> <dd><input type="button" value="註冊" /></dd> </dl> </form> </p> </p> </body> </html>
相關推薦：
p css表單布局的五個小技巧_html/css_WEB-ITnose
DIV+CSS表單布局的五個小技巧_html/css_WEB-ITnose
thinkphp表單上傳檔案並將檔案路徑儲存到資料庫中
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
