百度注册界面
用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">
用户名 <input class="acc1-2-1" type="text" placeholder="请设置用户名" />
</div>
<div id="acc1-2">
手机号 <input class="acc1-2-1" type="text" placeholder="可用于登录和找回密码" />
</div>
<div id="acc1-3">
密 码 <input class="acc1-2-1" type="password" placeholder="请设置登录密码" />
</div>
<div id="acc1-4">
验证码 <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">帮助中心 | <a href=""><img src="img/service.png" ></a> 2020@Baidu </div>
</body>
</html>
结果展示:

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

被折叠的 条评论
为什么被折叠?



