CSS 3之美化表格样式

最新推荐文章于 2022-06-29 22:08:19 发布

原创最新推荐文章于 2022-06-29 22:08:19 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

web 前端学习同时被 2 个专栏收录

90 篇文章

订阅专栏

CSS

34 篇文章

订阅专栏

美化表格样式

1. 美化表格中的元素
2. 美化下拉菜单

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>

20220512

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>

20220512