• CSS 3之美化表格样式

    美化表格样式

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

    20220512

  • 相关阅读:
    SSM+线上诊疗系统 毕业设计-附源码161711
    C#/.NET/.NET Core编程技巧练习集（学习，实践干货）
    spring cloud与加密库jasypt(ulisesbocchio)冲突问题定位
    transformers AutoModelForMaskedLM简单使用
    深入解析HTTP请求：了解请求特征与报文格式的关键秘密
    STM32 - FLASH 笔记
    全球十大即时通信软件最新排名
    10年经验总结：数据分析师7种工具，因果分析划重点！
    【leetcode】905. 按奇偶排序数组 （简单）
    【Azure上云项目实战】 合规性的身份验证与访问控制：在 Azure 中实现符合 PCI DSS 要求的架构设计
  • 原文地址：https://blog.csdn.net/weixin_43960383/article/details/125492021