## 小米登錄頁面制作 >#### 最終呈現效果  > #### html代碼 ``` <div class="login"> <a href="#" class="choose left">賬號登錄</a> <span style="color: #e0e0e0">|</span> <a href="#" class="choose right">掃碼登錄</a> <form> <input type="text" placeholder="郵箱/手機號/小米賬號" id="login-text"> <input type="password" placeholder="密碼" id="login-pwd"> <input type="submit" value="登錄" id="login-sub"> </form> <span class="forget"> <a href="#">注冊小米賬號</a> <span>|</span> <a href="#">忘記密碼?</a></span> <fieldset> <legend>其他方式登錄</legend> </fieldset> <div class="icon"> <a href="#" class="qq"></a> <a href="#" class="weibo"></a> <a href="#" class="pay"></a> <a href="#" class="wechat"></a> </div> </div> ``` >#### css代碼 ``` /* ----------元素位置布局---------- */ * { margin: 0; padding: 0; } .login { width: 400px; height: 500px; box-shadow: 0 0 15px 3px rgba(51, 51, 51, 0.53); margin: 20px auto 0 auto; /* border: 1px solid aqua; */ text-align: center; } #login-text, #login-pwd { width: 350px; height: 30px; display: inline-block; margin-left: auto; margin-right: auto; } #login-sub { width: 364px; height: 30px; display: inline-block; margin-left: auto; margin-right: auto; } /* ----------樣式設計---------- */ a { color: black; text-decoration: none; } .choose { display: inline-block; margin-top: 30px; font-size: 22px; } .left { color: #f56600; margin-right: 15px; } .right { margin-left: 15px; } #login-text, #login-pwd { padding: 8px 5px; font-size: 16px; /* box-sizing: border-box; */ outline: none;; } #login-text { margin-top: 35px; } #login-pwd { margin-top: 15px; } #login-sub { height: 50px; margin-top: 15px; border: none; outline: none; font-size: 20px; background-color: #f56600; color: white; } .forget { display: inline-block; margin-top: 15px; font-size: 13px; color: #e0e0e0; } .forget a { color: #999; } .forget a:hover { text-decoration: underline; } fieldset { display: inline-block; width: 364px; margin-top: 80px; color: #999; border: none; border-top: 1px solid #999 } /* ------------icon---------- */ .icon { margin: 30px auto; } .qq,.weibo,.pay,.wechat { width: 18px; height: 18px; display: inline-block; margin: 0 20px; border-radius: 50%; background: gray url("images/icons_type.png"); } .qq { background-position-x: -19px; } .weibo { background-position-x: -38px; } .pay { background-position-x: -59px; } .wechat { background-position-x: -87px; } .qq:hover, .weibo:hover, .pay:hover, .wechat:hover{ background-color: black; } ``` --------- 整個demo包括所含圖片已上傳至[github](https://github.com/MrXuxu/H5_demo/tree/master/%E5%B0%8F%E7%B1%B3%E7%99%BB%E5%BD%95%E6%A0%8F)