一、網站表單
<form>標籤
<form method="post" action="">
<table width="400px" align="center">
<tr>
<td><label for="txtName" accesskey="n">用戶名：</td>
<td><input id="txtName" name="txtname" type="text" size="20" readonly="readonly" value="123" ></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" size="20"></td>
</tr>
<tr>
<td>確認密碼：</td>
<td><input type="password" size="20"></td>
</tr>
<tr>
<td>性別：</td>
<td><input type="radio" name="sex" value="male"><label for=""></label></td>
</tr>
<tr>
<td>
<input type="checkbox">吃飯
<input type="checkbox">吃飯
<input type="checkbox">吃飯
</td>
</tr>
<tr>
<td><input type="submit" value="提交"/></td>
<td><input type="reset" value="重置"/></td>
</tr>
</table>
</form>
二、 用ul和li做菜單(橫向)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#navi
{
list-style-type:none;
cursor:pointer;
}
#navi li
{
margin-left:10px;
text-align:center;
float:left;
width:100px;
border-bottom:1px dashed red;
}
</style>
</head>
<body>
<ul id="navi">
<li>資源</li>
<li>博客</li>
<li>空間</li>
<li>論壇</li>
</ul>
</body>
</html>
三、DivCss佈局一個頁面框架
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
#container
{
margin:0px auto;/* margin屬性的auto值可以使控件居中顯示 */
background-color:Gray;
width:90%;
height:900px;
}
#header
{
background-color:Red;
height:150px;
}
#sideBar
{
background-color:Blue;
height:600px;
width:15%;
float:left;
}
#content
{
background-color:Green;
height:600px;
width:85%;
float:left;
}
#footer
{
background-color:Yellow;
height:150px;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="sideBar"></div>
<div id="content"></div>
</div>
<div style="clear:both"></div><!-- 用clear清除控件的float屬性 -->
<div id="footer"></div>
</div>
</body>
</html>
四、控件盒子模型
