您的位置：首页 > Web前端 > CSS

表单的CSS设计

2015-07-26 22:14 591 查看
摘自《网页开发手记》

1、效果图：



2、html代码：

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>表单界面</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body, textarea{
font-size: 12px;
}
#all{
width: 400px;
height: 400px;
margin: 0px auto;
line-height: 1.8em;
background-color: #eee;
border: 1px solid #40984c;
}
#top{
background: #e9f6e5;
border-bottom: 1px solid #40984e;
text-align: center;
color: #40984e;
font-size: 14px;
font-weight: bold;
}
.left{
text-align: right;
width: 25%;
}
.tb{
width: 100%;
}
fieldset{
border: 1px solid #a3bfa8;
width: 90%;
margin-left: 20px;
}
.txt, textarea {
border: 1px solid #a3bfa8;
background: #e9f6e5;
}
.green{
background: #e9f6e5;
}
#bottom{
text-align: center;
}
.btn{
width: 80px;
background: url("bg.gif") repeat-x;
margin: 5px;
border: 1px solid #40984c;
}
</style>
</head>
<body>
<div id="all">
<div id="top">注册表单界面</div>
<form method="post" action="asp.asp">
<fieldset>
<legend>注册基本信息</legend>
<table border="0" cellpadding="5" cellspacing="5" class="tb">
<tr>
<td class="left">用户名</td>
<td>
<input type="text" class="txt" size="15"/>
</td>
</tr>
<tr>
<td class="left">密 码</td>
<td>
<input type="password" class="txt" size="15"/>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>个人纤细资料</legend>
<table class="tb" border="0" cellspacing="5" cellpadding="5">
<tr>
<td class="left">出生日期</td>
<td>
<input type="text" size="4" class="txt"/>年
<input type="text" size="2" class="txt"/>月
<input type="text" size="2" class="txt"/>日
</td>
</tr>
<tr>
<td class="left">性别</td>
<td>
<label>
<input type="radio" checked="checked" name="sex"/>男
</label>
<label>
<input type="radio" name="sex"/>女
</label>
</td>
</tr>
<tr>
<td class="left">最高学历</td>
<td>
<select>
<option value="研究生" selected="selected" class="green">研究生</option>
<option value="大学">大学</option>
<option value="高中/职高">高中/职高</option>
<option value="初中及以下">初中及以下</option>
</select>
</td>
</tr>
<tr>
<td class="left">业余爱好</td>
<td>
<select>
<option value="听音乐" selected="selected" class="green">听音乐</option>
<option value="玩游戏">玩游戏</option>
<option value="上网">上网</option>
<option value="体育运动">体育运动</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">服务条款</td>
</tr>
<tr>
<td colspan="2">
<textarea cols="55" rows="5" readonly="readonly">尊敬的用户，欢迎您注册并使用服务。在注册及使用前请您仔细阅读如下服务条款：本服务条款系由用户与本公司就服务所订立的相关权利义务规范。因此，请于注册成为用户前，确实详细阅读本服务条款的所有内容，当您点选同意键或定制、使用、接受服务即视为您已仔细阅读本条款，同意并接受本服务条款的所有规范并愿受其约束，本服务条款对您及本公司均具有法律效力。</textarea>
</td>
</tr>
</table>
</fieldset>
<div id="bottom">
<input type="submit" value="注册" class="btn"/>
<input type="reset" value="重设" class="btn"/>
</div>
</form>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航