CSS样式框模式的应用——自己手写的,值得一看

来源:互联网 发布:大话西游男鬼加点数据 编辑:程序博客网 时间:2024/06/03 20:48
<!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>无标题文档</title>
<style>
tr{
background-color:#FFFFFF;
height:30px;
}
span{
color:red;
}
.l5{
margin-left:5px;
}
.r5{
padding-right:5px;
text-align:right;
}
.xh{
border:1px solid black;
}
</style>
</head>


<body>
<center>
<h2>请认真填写一下内容</h2>
<table border=0 style="margin-top:1cm;" cellspacing="1"  bgcolor="#000000" width="500px">
<tr style="background-color:#0000FF; color:#FFFFFF; text-align:center;">
<td colspan="2">
用户注册(带<span>*</span>必填)
</td>
</tr>
<tr>
<td class="r5">用户名</td>
<td align="left">
<input  class="l5 xh" type="text" /><span>*</span>(不得大于20个中文字)
</td>
</tr>
<tr>
<td class="r5">密码</td>
<td align="left">
<input  class="l5 xh" type="password" /><span>*</span>
</td>
</tr>
<tr>
<td class="r5">重复密码</td>
<td align="left">
<input  class="l5 xh" type="password" /><span>*</span>
</td>
</tr>
<tr>
<td class="r5">性别</td>
<td align="left">
<input  class="l5" type="radio" name="sex" checked="checked" />男<input  name="sex" type="radio" />女
</td>
</tr>
<tr>
<td class="r5">年龄</td>
<td align="left">
<select  class="l5">
<option>10</option>
<option>20</option>
<option>30</option>
</select>
</td>
</tr>
<tr>
<td  colspan="2" align="center">
<input type="reset" class="xh"  style="margin-right:50px" value="重置"/>
<input type="submit" class="xh"  value="注册"/>
</td>
</tr>


</table>
</center>
</body>
</html>