通過這幾天對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>
效果圖示
創作不易，大佬們留步… 動起可愛的雙手，來個贊再走唄 (???￩?)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/197232.html
標籤：其他
上一篇：CSS提高篇（復合選擇器）
下一篇：vue 敏感詞過濾 前端