CSS 3之美化表格样式

美化表格样式

  • 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>

CSS 3之美化表格样式_第1张图片

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>

CSS 3之美化表格样式_第2张图片

你可能感兴趣的:(web,前端学习,#,CSS,css,前端,javascript)