css制作表單效果_CSS進階教程

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> css制作表單效果

css制作表單效果

編輯：CSS進階教程

<!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 div{
 padding-top:3px;
}
</style>
</head>
<body>
<div id="reg">
    <h6>歡迎您注冊玩具購會員！</h6>
    <div 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>
    </div>
    <div id="content">
    <form>
    <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>
 </form>
    </div>
</div>
</body>
</html>

提示：您可以先修改部分代碼再運行，復制代碼和保存代碼功能在Firefox下無效。
編緝: 破洛洛 http://www.poluoluo.com

CSS進階教程

浮動菜單是如何作出來的mouse事件: 這個問題由我來做一個最終解答吧。我以前也同樣驚異於閃光地帶的這個特效，苦惱於不知如何實現。我在經典
寫出更輕巧、更快並且更不會讓你頭疼的CSS: 為什麼我們的CSS變得一團糟——我們真的很容易陷入這樣的困惑中。有時這是一開
SEO入門教程:自然搜索結果PPC廣告和熱圖: 網頁制作poluoluo文章簡介：以下是一個典型的Google搜索結果，它包含自然搜索結果以及按點擊

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章