實現百度註冊界面
代碼實現
<!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>
實現效果