實作百度注冊界面
代碼實作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#box {
background-image: url(img/reg_bg_min.jpg);
background-repeat: no-repeat;
width: 2880px;
height: 1600px;
}
#Nei {
border-radius: 20px;
width: 850px;
height: 1100px;
background-color: white;
opacity: 0.9;
position: relative;
left: 1800px;
top: 300px;
}
.th1 {
font-weight: 200;
font-size: 35px;
color: #333;
line-height: 170px;
padding-left: 50px;
text-align: left;
font-weight: 30;
}
h1 {
font-size: 100px;
text-align: left;
padding-left: 50px;
padding-top: 50px;
}
h3 {
font-size: 30px;
text-align: left;
color: gray;
padding-left: 50px;
padding-bottom: 40px;
}
.th2 {
font-weight: 200;
margin-left: 20px;
width: 550px;
height: 60px;
padding-left: 10px;
border-radius: 10px;
font-size: 35px;
opacity: 0.4;
border: 1px solid #E0E0E0;
}
.Yan {
font-weight: 200;
margin-left: 20px;
width: 320px;
height: 60px;
padding-left: 10px;
border-radius: 10px;
font-size: 35px;
opacity: 0.4;
border: 1px solid #E0E0E0;
}
.YanZheng {
background-color: #FFFFFF;
font-weight: 200;
margin-left: 10px;
width: 220px;
height: 70px;
border-radius: 10px;
font-size: 25px;
}
.th3 {
margin-left: 90px;
width: 650px;
height: 80px;
padding-left: 10px;
border-radius: 10px;
font-size: 40px;
opacity: 0.4;
background: #BDCEFC;
color: white;
font-weight: 700;
}
.YueDu {
padding-top: 30px;
text-align: center;
font-size: 20px;
padding-bottom: 20px;
}
.Choose {
width: 18px;
height: 18px;
}
a{
text-decoration: none;
}
.KeFu a {
text-decoration: none;
color: white;
}
.BaiDu {
position: absolute;
left: 200px;
top: 150px;
}
.Text h1 {
position: absolute;
left: 300px;
top: 500px;
color: white;
font-size: 130px;
}
.Text h2 {
position: absolute;
left: 350px;
top: 720px;
color: white;
font-size: 50px;
letter-spacing: 3.81px;
font-weight: 300;
}
.KeFu{
position: absolute;
left: 150px;
top: 1420px;
color: white;
font-size: 30px;
letter-spacing: 3.81px;
font-weight: 300;
}
</style>
</head>
<body>
<div id="box">
<div id="Nei">
<div>
<h1>歡迎注冊</h1>
<h3>已有賬號?<a href="">登錄</a></h3>
</div>
<div>
<label for="用戶名" class="th1">用戶名</label>
<input class="th2" type="text" id="用戶名" placeholder="請設定用戶名" />
</div>
<div>
<label for="手機號" class="th1">手機號</label>
<input class="th2" type="text" id="手機號" placeholder="可用于登錄和找回密碼" />
</div>
<div>
<label for="密碼" class="th1">密 碼</label>
<input class="th2" type="password" id="密碼" placeholder="請設定登錄密碼" />
</div>
<div>
<label for="驗證碼" class="th1">驗證碼</label>
<input type="text" class="Yan" placeholder="請輸入驗證碼" />
<input class="YanZheng" type="button" value="獲取驗證碼" />
</div>
<div>
<input type="button" value="注冊" class="th3" />
</div>
<div class="YueDu">
<input type="checkbox" class="Choose" /> 閱讀并接受<a href="">《百度用戶協議》</a>及<a href="">《百度隱私權保護宣告》</a>
</div>
</div>
<div class="BaiDu"><img src="img/baidu.png" /></div>
<div class="Text">
<h1>用科技</h1>
<h2>讓復雜的世界更簡單</h2>
</div>
<div>
<div class="KeFu"><a href="http://www.baidu.com">幫助中心</a> | <a href="http://www.baidu.com"><img src="img/service-2x.png"/></a></div>
</div>
</div>
</body>
</html>
實作效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/199190.html
標籤：java
上一篇：事件流