简单制作一个百度注册页面

这篇博客展示了作者如何运用这几天学习的CSS知识,简单制作了一个百度注册页面。文章包含代码展示和实际效果的截图。

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

通过这几天对css(级联样式表)的理解,简单制作一张百度注册页面
话不多说代码奉上

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#img{
				background-image: url(img/reg_bg_min.jpg);
				background-repeat: no-repeat;
			}
			*{
				margin: 0px;
				padding: 0px;
			}
			#box{
				width:400px;
				height: 500px;
				background-color: white;
				border-radius: 20px;
				opacity: 0.8;
				position: absolute;
				right :100px;top: 100px;
			}
			#box2{
				position: absolute;
				left: 50px;top: 100px;
			}
			#box3{
				font-size: 40px;
				color: white;
				position: absolute;
				left: 200px;top: 400px;
			}
			#d1{
				padding: 15px 20px 0px 20px;
			}
			#d2{
				padding: 0px 20px;
				color: #BEA5A6;
			}
			#d3{
				padding: 20px 0px 20px 20px;
			}
			#d4{
				font-size: 12px;
				text-align: center;
			}
			.t1{
				width:300px;
				height: 30px;
				border-radius: 10px;
				margin: 10px 0px;
				padding-left: 5px;
			}
			.t2{
				width: 200px;
				height: 30px;
				border-radius: 10px;
				padding-left: 2px;
			}
			.t3{
				width: 100px;
				height: 30px;
				border-radius: 5px;
			}
			.t4{
				width: 350px;
				height: 40px;
				border-radius: 30px;
				color: white;
				background-color:deepskyblue;
				
			}
			a{
				text-decoration: none;
				color: blue;
			}
		</style>
	</head>
	<body id="img">
		<div id="box2">
			<img src="img/baidu.png" >
		</div>
		<div id="box3">
			<h3>用科技</h3>
			<p>让复杂的世界更简单</p>
		</div>
		<div id="box">
		    <div id="d1"><h1>欢迎注册</h1></div>
			<div id="d2">已有账号?<a href="京东.html" style="color:blue;"> 登录</a> </div>
			<div id="d1"><label for="name">用户名</label><input type="text"placeholder="请设置用户名"
			              id="name" class="t1"/> </div>
			<div id="d1"><label for="tn">手机号</label><input type="text"placeholder="可用于登录和找回密码"
			              id="tn" class="t1"/> </div>
			<div id="d1"><label for="keyword">密&nbsp;&nbsp;&nbsp;码 </label><input type="password"
			              placeholder="请设置登录密码" id="keyword" class="t1"/> </div>
			<div id="d1"><label for="yzm">验证码</label><input type="text"placeholder="请输入验证码"/ id="yzm"class="t2"> 
			    <input type="button" value="获取验证码" class="t3"/>
				</div>
			<div  id="d3"> <input type="button" value="注册" class="t4"/> </div>
			
			<div id="d4"><input  type="checkbox" />阅读并接受<a href="">《百度用户协议》</a>及<a href="">《百度隐私权保护声明》</a></div>
		</div>
	</body>
</html>


效果图示

在这里插入图片描述
创作不易,大佬们留步… 动起可爱的双手,来个赞再走呗 (๑◕ܫ←๑)

评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值