如何让一个html+css小white写出一个“注册”网页

最新推荐文章于 2023-10-09 21:25:06 发布

CtrlCVsix

最新推荐文章于 2023-10-09 21:25:06 发布

阅读量225

点赞数 5

分类专栏： html css 文章标签： html css 前端

本文链接：https://blog.csdn.net/wjx19149356703/article/details/132841634

版权

html 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

（注：此网站仅供学习，娱乐，没有用于盈利，商业用途，没有冒犯百度的意思！）

还是先展示出结果样式供观看：

步骤 1: 创建基本结构

1. 创建一个新的HTML文档，使用`<!DOCTYPE html>`声明。
2. 在`<html>`标签内，添加一个`<head>`部分，包括字符集声明`<meta charset="utf-8">`和网页标题`<title>`。
3. 在`<body>`标签内，创建一个`<form>`元素，用于包含注册表单的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
</head>
<body>
<form>

</form>
</body>
</html>

步骤 2: 创建表单结构

4. 在`<form>`元素内，使用`<label>`标签为每个表单字段添加标签，并使用`for`属性将标签与相应的表单元素关联。
5. 使用`<input>`标签创建各种表单元素，如文本框、密码框和提交按钮。为每个表单元素设置唯一的`id`属性以便与`label`标签关联。
6. 为表单元素添加`name`属性，以便在后端处理表单数据时能够识别每个字段。

步骤 3: 样式美化

7. 在`<head>`标签内的`<style>`部分中，添加CSS规则以美化表单和表单元素。这包括背景颜色、边框、字体等。

css
label {
display: block;
margin-bottom: 10px;
}

input[type="text"],
input[type="password"],
input[type="email"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}

input[type="submit"] {
background-color: #3F89EC;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}

最后将结构和样式结合，展示出完整代码，仅供参考，请勿抄袭！

（曾经有个id叫“伍925”的用户抄袭我的作品，导致下架删除，以儆效尤！！！！）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<style type="text/css">
			body {
				background-image: url(img/1.jpg);
				background-size: cover;
			}

			table {
				margin: 8px auto;
				height: 500px;
				width: 550px;
				background-color: white;
				border-radius: 15px;
				border: none;
				border-collapse: collapse;
				margin-top: 190px;
				margin-right: 150px;
				opacity: 0.9;
			}

			td {
				border: none;
				padding-left: 40px;
				/* 移除表格边框 */
			}

			td:first-child {
				padding-right: 20px;
				/* Adjust the padding for the first column */
			}

			.input {
				height: 40px;
				width: 200px;
				border-radius: 4px;
				border: 1px solid #ccc;
			}

			.input:focus {
				outline: 1px solid #2E58FF;
			}

			.btn {
				height: 50px;
				width: 399px;
				color: white;
				background-color: #3F89EC;
				border-radius: 25px;
				border: 1px solid #3F89EC;
			}

			.send-btn {
				width: 125px;
				height: 40px;
				background-color: #fff;
				color: #333;
				border: 1px solid #ccc;
				border-radius: 4px;
			}

			.send-btn:hover {
				border-color: #3F89EC;
				color: #3F89EC;
				cursor: pointer;
			}

			.td-center {
				text-align: center;
			}

			#zhuce1 {
				font-size: 40px;
				font-weight: 600;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="2">
					<div id="zhuce1">欢迎注册</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">已有账号? <a href="https://passport.baidu.com/v2/?login">登录</a></td>
			</tr>
			<tr>
				<td><label for="username">用户名</label></td>
				<td><input class="input" id="username" type="text" placeholder="请输入账户" /></td>
			</tr>
			<tr>
				<td><label for="phone">手机号</label></td>
				<td><input class="input" id="phone" type="text" placeholder="请输入手机号" /></td>
			</tr>
			<tr>
				<td><label for="pwd">密码</label></td>
				<td><input class="input" id="pwd" type="text" placeholder="请输入密码" /></td>
			</tr>
			<tr>
				<td><label for="code">验证码</label></td>
				<td>
					<input class="input" id="code" type="text" placeholder="请输入验证码" />
					<input class="send-btn" type="button" value="获取验证码" />
				</td>
			</tr>
			<tr>
				<td class="td-center" colspan="2"><input class="btn" type="button" value="注册" /></td>
			</tr>
			<tr>
				<td class="td-center" colspan="2">
					<input id="txt" type="checkbox" />
					<label for="txt">阅读并接受 <a
							href="https://passport.baidu.com/static/passpc-account/html/protocal.html">《百度用户协议》</a>、<a
							href="https://www.gov.cn/xinwen/2019-08/23/content_5423865.htm#:~">《儿童个人信息保护声明》</a>及 <a
							href="https://www.baidu.com/duty/yinsiquan.html">《百度隐私权保护声明》</a></label>
				</td>
			</tr>
		</table>
	</body>
</html>