利用 HBuilderX 设置CSS样式会员注册页面

听风者i

已于 2022-10-26 12:50:58 修改

阅读量4.8k

点赞数 4

分类专栏： HBuilderX 文章标签： css html 前端 1024程序员节 web

于 2022-10-11 00:37:21 首次发布

本文链接：https://blog.csdn.net/weixin_67632468/article/details/127250564

版权

HBuilderX 专栏收录该内容

8 篇文章 5 订阅

订阅专栏

打开任务“web”(项目实名称)项目中的公司简介网页register.html,并对其设置CSS样式。
在这里插入图片描述
表格样式和表单样式：
表格样式：

表格边框：
使用CSS样式中的border属性来设置表格边框样式

table,th,td {border: 1px solid #000;}

border-collapse属性值有collapse（合并）和separate（分离），默认的属性值为 separate。

table{border-collapse: collapse;} 
table,th,td {border: 1px solid #000;}

在这里插入图片描述
表格宽度和高度：
通过 width 和 height 属性定义表格的宽度和高度。

table{border-collapse: collapse;} 
table,th,td {border: 1px solid #000;} 
table{width: 400px;height: 200px;}

在这里插入图片描述
表格文本对齐：

table{border-collapse: collapse;} 
table,th,td {border: 1px solid #000;} 
table{width: 400px;height: 200px;} 
td{text-align: center;vertical-align: bottom;}

在这里插入图片描述
表格颜色：
文字颜色使用color属性 n
表格边框颜色使用border属性 n
背景色使用background(或background-color)属性

table{border-collapse: collapse;} 
table,th,td {border: 1px solid #000;} 
table{width: 400px;height: 200px;} 
td{text-align: center;vertical-align: bottom;} 
table,th,td{border: 1px solid #ccc;} 
th{background-color: #666666;color: #fff;}

在这里插入图片描述
表单样式：
使用边框、背景、高度、宽度、文字颜色等样式属性直接应用到对应的表单对象上对于元素，如果只想设置特定输入类型的样式，则可以使用属性选择器。
input[type=text]，表示仅选择文本字段。 input[type=password]，表示仅选择密码字段。 input[type=number]，表示仅选择数字字段。
在这里插入图片描述
表单样式：
表单案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
	</head>
	<body>
		<form action="action_page.php">
			<label for="aname">用户名</label>
			<input type="text" id="aname">
			<label for="pw">密码</label>
			<input type="password" id="pw">
			<input type="submit" value="登陆">
		</form>

	</body>
</html>

在这里插入图片描述

input[type=text]{ 
background: #fff url(img/icon.png) no-repeat 10px center;}

设置用户名输入框背景色和图标

input[type=password]{ 
background: #fff url(img/mima.png) no-repeat 10px center;}

设置密码输入框背景色和图标
register.html源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>会员注册</title>
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
	</head>
	<body>
		<div  class="ad-register">
		<h2>会员注册</h2>
		<form action="#" method="get">
			<table class="reg_form">
				<tr>
					<td colspan="2" class="tb_bit">账户信息</td>
				</tr>
				<tr>
					<td><span>*</span>用户名：</td>
					<td><input type="text" placeholder="由字母组成，长度3-12位"></td>
				</tr>
				<tr>
					<td><span>*</span>密码：</td>
					<td><input type="password" placeholder="密码由字母开头，6-18位"></td>
				</tr>
				<tr>
					<td><span>*</span>确认密码</td>
					<td><input type="password" placeholder="密码由字母开头，6-18位"></td>
				</tr>
				<tr>
					<td><span>*</span>电子邮箱：</td>
					<td><input type="email"></td>
				</tr>
				<tr>
					<td colspan="2">个人基本信息</td>
				</tr>
				<tr>
					<td><span>*</span>国家/地区</td>
					<td><select name="ad_nationality">
						<option value="">请选择</option>
						<option value="中国" selected>中国</option>
						<option value="美国">美国</option>
						<option value="英国">英国</option>
					</select></td>
				</tr>
				<tr>
					<td><span>*</span>真实姓名：</td>
					<td><input type="text"></td>
				</tr>
				<tr>
					<td><span>*</span>证件类型：</td>
					<td>
						<select id="ad_cert_type" name="ad_cert_type">
							<option value="">请选择</option>
							<option value="4529" selected>中国居民身份证</option>
							<option value="4530">护照</option>
						</select>
					</td>
				</tr>
				<tr>
					<td><span>*</span>证件号码：</td>
					<td><input type="text"></td>
				</tr>
				<tr>
					<td><span>*</span>性别：</td>
					<td>
						<input type="radio" name="gender" value="1" checked="checked">男
						<input type="radio" name="gender" value="0" checked="checked">女
					</td>
				</tr>
				<tr>
					<td><span>*</span>出生日期：</td>
					<td><input type="date"></td>
				</tr>
				<tr>
					<td><span>*</span>服务区域：</td>
					<td><input type="text"></td>
				</tr>
				<tr>
					<td rowspan="2">服务类别：</td>
					<td>
						<input type="checkbox" value="青年志愿者">青年志愿者
						<input type="checkbox" value="医疗志愿者">医疗志愿者
						<input type="checkbox" value="文化志愿者">文化志愿者
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" value="社区志愿者">社区志愿者
						<input type="checkbox" value="教育志愿者">教育志愿者
						<input type="checkbox" value="巾帼志愿者">巾帼志愿者
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="申请成为会员"></td>
				</tr>
			</table>
		</form>
		</div>
	</body>
</html>

同web项目目录下新建register.css项目：
在这里插入图片描述
其中register.css源代码：

*{
	margin: 0;
	padding: 0;
}
.ad-register{
	width: 1170px;
	margin: 20px auto;
}
.ad-register h2{
	text-align: center;
	font-weight: 400;
	margin: 20px 0;
}
.reg_form{
	width: 600px;
	margin: 0 auto;
	font-size: 16px;
	border-collapse: collapse;
}
tr{height: 40px;}
.tb_tit{
	width: 100%;
	background-color: rgba(202, 202, 202, 1);
	color: #000;
	font-size: 16px;
	font-weight: normal;
	line-height: 30px;
	padding-left: 20px;
	box-sizing: border-box;
	border-radius: 3px;
}
.td.left{
	width: 180px;
	text-align: right;
}
.td_left span{
	color: #ff0000;
	margin-right: 5px;
}
tr:last-child{text-align: center;}
.bt_suc{
	width: 250px;
	height: 40px;
	background-color: #0072c6;
	border-radius: 3px;
	border:none;
	color: #fff;
	font-size: 18px;
	margin: 20px 0;
}