百度注册界面

本文介绍了如何使用CSS语言来设计和实现百度的注册界面,包括相关代码展示及最终的效果呈现。

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

百度注册界面

用css语言编辑百度的注册界面

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#acc{
				background-image: url(./img/reg_bg_min.jpg);
				background-repeat: no-repeat;
				width: auto;
				height: auto;
				position: relative;
			}
			#acc1{
				width: 460px;
				height: 530px;
			    background-color:#F1F0F3 ;	
				border-radius: 10px;
				opacity:0.92;
				position: absolute;
				right: 300px;
				top: 200px;
			}
			#acc1-1{
				font-size: 30px;
				font-weight: bold;
				padding: 1px;
			}
			#acc1-1-1{
				padding: 1px;
				font-size: 1px;
			}
			.acc1-2-1{
				width: 300px;
				height: 10px;
				border-radius: 5px;
			}
			*{
				padding: 14px;
			}
			.acc1-1-1,.acc1-6{
				font-size: 1px;
			}
			.acc1-4-1{
				width: 173px;
				height: 10px;
				border-radius: 5px;
			}
			.acc1-4-2{
				background-color: #FFFFFF;
				font-weight: 500;
				margin-left: 5px;
				width: 115px;
				border-radius: 5px;
				line-height: 11px;
			}
			.acc1-5-1{
				width: 397px;
				border-radius: 30px;
				background-color: dodgerblue;
				margin: 15px;
			}
			.acc1-6{
				text-align: center;
			}
			#acc2{
				width: 100px;
				height: 200px;
				position: absolute;
				left:40px;
				top:30px;
			}
			.acc3{
				color: white;
				font-size: 80px;
				font-weight: bold;
				position: absolute;
				left: 250px;
				top: 360px;
			}
			.acc4{
				color: white;
				font-size: 50px;
				position: absolute;
				left: 250px;
				top: 470px;
			}
			.acc5{
				color: white;
				position: absolute;
				left:40px;
				top: 900px;
				opacity:0.7;
			}
			.acc5 img{
				width: 20px;
				height: 20px;
				position: absolute;
				left: 120px;
				top: 0px;
			}
			a{
				text-decoration: none;
				padding: 2px;
			}
		</style>
	</head>
	<body id="acc">
		<div id="acc1">
			<div id="acc1-1">
				欢迎注册 
			</div>
			<div id="acc1-1-1">
				已有账号?<a href="">登录</a>
			</div>
			<div ></div>
			<div id="acc1-2">
				用户名 &nbsp;&nbsp;&nbsp;<input class="acc1-2-1" type="text" placeholder="请设置用户名" />
			</div>
			<div id="acc1-2">
				手机号 &nbsp;&nbsp;&nbsp;<input class="acc1-2-1" type="text" placeholder="可用于登录和找回密码" />
			</div>
			<div id="acc1-3">
				密&nbsp;&nbsp;&nbsp;码 &nbsp;&nbsp;&nbsp;<input class="acc1-2-1" type="password" placeholder="请设置登录密码" />
			</div>
		    <div id="acc1-4">
			    验证码 &nbsp;&nbsp;&nbsp;<input class="acc1-4-1" type="text" placeholder="请输入验证码" />
				<input class="acc1-4-2" type="button" value="获取验证码"  />
		    </div>
			<div id="acc1-5">
				<input class="acc1-5-1" type="button" value="注册" />
			</div>
			<div class="acc1-6">
				<input type="checkbox" value="阅读并接受"  id="acc1-6"/>阅读并接受
				<a href="" >《百度用户协议》</a>及<a href="">《百度隐私权保护声明》</a>
			</div>
		</div>
		<div id="acc2">
			<img src="img/baidu.png" >
		</div>
		<div class="acc3">用科技</div>
		<div class="acc4">让复杂的世界更简单</div>
		<div class="acc5">帮助中心 &nbsp;&nbsp;&nbsp;&nbsp;| <a href=""><img src="img/service.png" ></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2020@Baidu  </div>
	</body>
</html>

结果展示:

在这里插入图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值