美化表格样式
1. 美化表格中的元素
使用background-color
属性定义表单元素背景色;
例子1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<style type="text/css">
input{
color: #429DDD;
}
input .text{
border: 1px inset #cad9ea;
background-color: #D9EDF7;
}
input .bb{
color: #00008B;
background-color: #9f79ee;
border: 1px outset #CAD9EA;
padding: 1px 2px 1px 2px;
}
select{
width: 80px;
color: #00008B;
background-color: #9F79EE;
border: 1px inset #CAD9EA;
}
textarea{
width: 200px;
height: 40px;
color: #00008B;
background-color: #9F79EE;
border: 1px inset #CAD9EA;
}
</style>
</head>
<body>
<table border="1" width="48%">
<tr>
<td>称谓:</td>
<td><input type="text" name="" id="" value="" />1~12个字符
<div id="cw"></div>
</td>
</tr>
<tr>
<td width="35%">密码:</td>
<td><input type="password" src="" />长度为8~10位</td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" /></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td>性别:</td>
<td><select>
<option>男</option>
<option>女</option>
</select></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="" name="" id="" value="" /></td>
</tr>
<tr>
<td>备注:</td>
<td><textarea rows="15" cols="40"></textarea></td>
</tr>
<tr>
<td><input type="button" value="提交" class="bb"/></td>
<td><input type="reset" value="重填" class="cc"/></td>
</tr>
</table>
</body>
</html>
2. 美化下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美化下拉菜单</title>
<style type="text/css">
.green{
background-color: #0785D1;
color: #000;
font-size: 15px;
font-weight: bolder;
font-family: 楷体;
}
.red{
background-color: #e20a0a;
color: #ffffff;
font-size: 15px;
font-weight: bolder;
font-family: 楷体;
}
.yellow{
background-color: #ffff6f;
color: #000;
font-size: 15px;
font-weight: bolder;
font-family: 楷体;
}
.orange{
background-color: orange;
color: #000;
font-size: 15px;
font-weight: bolder;
font-family: 楷体;
}
</style>
</head>
<body>
<form action="" method="post">
<p>
<label for="co">选择证件类型:</label>
<select name="co" id="co">
<option value ="">请选择:</option>
<option value ="red" class="red">身份证</option>
<option value ="green" class="green">军官证</option>
<option value ="yellow" class="yellow">学生证</option>
<option value ="orange" class="orange">其他证件</option>
</select>
</p>
<p><input type="submit" value="提交" /></p>
</form>
</body>
</html>