通过这几天对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">密 码 </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>
效果图示
