HTML+CSS实现小米账号注册界面
话不多说，先上图：
HTML部分源代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="login.css"> <title>小米账号-注册</title> </head> <body> <!-- 首部部分 start--> <div class="top"> <a href="index.html" class="title"></a> <h4>注册小米账号</h4> <div class="middle"> <form enctype="multipart/form-data"> <div style="width:500px;float:left;margin:0 20px;"> <br /> <span class="p">*</span> <label for="username" class="l">用户名:</label> <div style="position:relative;display:inline;"> <input id="username" type="text" style="height:30px;width:250px;padding-right:50px;"> </div> <br /><br /> <span class="p">*</span> <label for="phonenumber" class="l">手机号:</label> <div class="d"> <input id="phonenumber" type="text" class="i"> </div> <br /><br /> <span class="c">*</span> <label for="login_password" class="l">登录密码:</label> <div class="d"> <input id="login_password" type="text" class="i"> </div> <br /><br /> <span class="c">*</span> <label for="confirm_password" class="l">确认密码:</label> <div class="d"> <input id="confirm_password" type="text" class="i"> </div> <br /><br /> <span class="p">*</span> <label for="ver_code" class="l">验证码:</label> <div class="d"> <input id="ver_code" type="text" class="i"> </div> <br /><br /> <input type="checkbox" name="agree" style="margin-left:100px;display:inline-block;" value="1" /> <span style="font-size:10px;">我已阅读并同意《用户注册协议》</span> <br /><br /> <input type="submit" value="同意以上协议并注册" style="margin-left:100px;height:30px;width:300px;background-color:#FF6700;display:inline-block; border:none;color:white;font-size: 14px;" /> </div> </form> </div> </div> <!-- 首部部分 end --> <!-- 尾部部分 start --> <div class="footer"> <ul> <li><a href="#">简体</a><span>|</span></li> <li><a href="#">繁体</a><span>|</span></li> <li><a href="#">English</a><span>|</span></li> <li><a href="#">常见问题</a><span>|</span></li> <li><a href="#">隐私政策</a></li> </ul> </div> <!-- 尾部部分 end --> </body> </html>
CSS部分源代码如下：
*{ margin: 0; padding: 0; } a{ text-decoration: none; } li{ list-style: none; } body{ background-color: #F9F9F9; } .top{ width: 786px; height: 520px; background-color: white; margin: 0 auto; padding: 0 34px 30px 34px; } .title{ display: block; width: 55px; height: 55px; background-image: url(images/mi-logo.png); background-color: #FF6700; background-position: 50%; margin: 0 auto; margin-bottom: 40px; } .top h4{ display: block; color: #333; width: 786px; height: 45px; line-height: 45px; font-size: 30px; font-weight: normal; text-align: center; } .middle{ margin: 0 0 0 130px; color: #757575; } .middle input{ border:1px solid #757575; } .p{ color:red; margin-left:20px; display:inline-block; } .c{ color:red; margin-left:4px; display:inline-block; } .l{ font-size:18px; } .d{ display:inline; } .i{ height:30px; width:300px; } .footer{ display: block; height: 30px; margin: 100px 0 0 600px; } .footer li{ float: left; } .footer li a , .footer li span { color: #757575; font-size: 14px; } .footer li a{ display: inline-block; height: 19px; padding: 0 10px; text-align: center; } .footer li a:hover{ color: #FF6700; }
