实现百度注册界面
代码实现
<!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>
实现效果