JavaWeb百度注册界面

本文介绍了使用HTML和CSS实现百度网页的基本布局和样式设计,包括头部logo、登录按钮、注册表单及其验证功能等核心元素的设计过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/BaiDu.css" />
	</head>
	<body>
		<div id="head">
			<!--百度logo-->
			<div id="head_logo">
				<a href="http://www.baidu.com">
					<img src="img/小图片2.png" />
				</a>
			</div>
			<!--百度登录-->
			<div id="head_login">
				<span>我已注册,现在就</span>
				<input type="button" value="登录" />
			</div>
			<!--百度导航-->
			<div id="nav">
				<img src="img/小图片2.png" />
			</div>
			<!--百度注册-->
			<div id="register">
				<!--注册表单-->
				<div id="reg_form">
					<form>
						<p><label>用户名</label><input placeholder="请设置用户名"/></p>
						<p><label>手机号</label><input placeholder="请设置手机号"/></p>
						<p><label>密码</label><input placeholder="请设置登陆密码" type="password"/></p>
						<p>
							<label>验证码</label><input placeholder="请输入验证码" style="width:160px ;" />
							
							<button id="reg_form_msg">获取短信验证码</button>
						</p>
						<div id="reg_form_isCheck">
							<input type="checkbox" style="" />
							阅读并接受<a href="http://www.baidu.com" target="_blank">百度用户协议</a><a href="http://www.baidu.com" target="_blank">百度隐私权保护声明</a>
						</div>
						<div id="reg_form_btn">
							<button type="button" style="width: 185px;">注册</button>
						</div>
					</form>
				</div>
				<!--注册二维码-->
				<div id="red_qrcode">
					<img src="img/小图片2.png" />
				</div>
			</div>
			<!--百度版权-->
			<div id="copyright">
				2018 &copy;Baidu
			</div>
		</div>
	</body>
</html>

CSS:

@charset "utf-8";
#head{
	width: 1000px;
	margin: 0px auto;/*上下边距为0px,左右边距自动计算居中*/
}

#head #head_logo{
	width: 330px;
	background: url(../img/小图片.jpg) right no-repeat;
	cursor: pointer;/*鼠标变手势*/
	float: left;/*左浮动*/
	/*内下间距,为了和导航之间保持距离*/
	padding-bottom: 5px;
}

#head #head_login{
	float: right;/*右浮动*/
	font-size: 10px;/*字体大小*/
	margin-top:10px ;/*上外间距10px*/
}

#head #head_login input{
	width: 64px;
	height: 32px;
	/*设置背景图片不重复并通过具体坐标获取显示部分*/
	background: url(../img/小图片.jpg) no-repeat 0px -48px;
	font-weight: 700;/*字体粗细*/
	color: #666;
	border: 0;/*边框为0*/
	font-family: "微软雅黑";
}

#nav{
	width: 1200px;
	margin: 0px auto;/*上下边距为0,左右边距居中*/
}
#register{
	width: 950px;
	margin:20px 0px auto ;
}

#register #reg_form{
	float: left;
	text-align: right;
	font-size: 14px;
	color: #666666;
	font-weight: 700;
}

#register #reg_form label{
	margin-right: 10px;/*右外间距10px*/
}
#register #reg_form p input{
	width: 328px;
	height: 30px;
	border: 1px solid #ddd;
	font-size: 14px;
	color: #666;
	text-indent: 10px;
	margin-bottom: 5px;
}

#register #reg_form #reg_form_msg{
	height: 42px;
	width: 160px;
	background: #f7f7f7;
	border: 1px solid #ddd;
	font-size: 14px;
	cursor: pointer;
}

#register #reg_form #reg_form_msg:hover{
	background-color: #eee;	
}

#register #reg_form_isCheck{
	font-size: 12px;
	font-weight: 400;
	margin-right:30px ;
}

#register #reg_form_isCheck a{
	text-decoration: none;
}

#register #reg_form_btn button{
	height: 50px;
	width: 350px;
	background-color: red !important;
	border: 0;
	color: white;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	border-radius: 3px;
	margin-top: 20px;
}

#copyright #reg_qrcode{
	float: right;
	margin-top: 15px;
	margin-right: -10px;
}

#copyright{
	font-size: 10px;
	margin-top: 500px;
	text-align: center;
	color: #7a77c8;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值