今天還是來仿寫一個常用的登入介面，鞏固一下之前掌握的知識。
同樣的我們還是先構建一個項目，建立對應的css檔案和html檔案，then begin code~
首先是html：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>歡迎登入</title> <link href="css/index.css" rel="stylesheet"></head><body> <!--面板--> <div id="panel"> <!--面板的頭部--> <div class="panel-top"> <h2>歡迎登入CSDN官網</h2> </div> <!--面板的主要內容--> <div class="panel-content"> <div class="int"> <label><img src="images/icon_people.png"></label> <input type="text" placeholder="您的手機號/使用者名稱"> </div> <div class="int"> <label><img src="images/icon_password.png"></label> <input type="password" placeholder="輸入密碼"> </div> <div class="pwd-login"> <a href="#" class="pwd-login-left"><input type="checkbox"><span>下次自動登入</span></a> <a href="#" class="pwd-login-right"><span>忘記密碼?</span></a> </div> <div class="login"> <button>登入</button> </div> <div class="reg"> 還沒帳號。<a href="#">馬上註冊</a> </div> </div> <!--面板的底部--> <div class="panel-footer"> <span>社交帳號登入</span> <img src="images/sina.png"> <img src="images/weixin.png"> <img src="images/qq.png"> </div> </div></body></html>
搭建好基本骨架後，需要進行布局和裝修~
下面是CSS檔案:
a, body, title, header, span, div, p, label, img, input, button, img{ padding: 0px; margin: 0px;}body { background: #F2F2F2; text-align: center;}/*面板*/#panel { display: inline-block; margin-top: 100px; background: white; border: 1px solid #ddd; padding: 20px; border-radius: 6px; box-shadow: 0px 0px 6px #999; width: 260px;}/*面板頭部*/#panel .panel-top { font-size: 13px; font-family: Arial; padding: 5px 0px; border-bottom: 1px solid #ddd; margin: 0 auto;}/*面板內容*/#panel .panel-content{ margin-top: 20px;}#panel .panel-content .int { margin-bottom: 9px; height: 36px; position: relative;}#panel .panel-content .int label { position: absolute; top: 7px; left: 6px;}#panel .panel-content .int input { width: 100%; height: 100%; border: 1px solid #ddd; padding-left: 38px; box-sizing: border-box; border-radius: 5px;}#panel .panel-content .int input:focus { outline: none; border: 1px solid orangered; box-shadow: 0 0 2px orangered;}#panel .panel-content .pwd-login a { color: gray; font-size: 13px; margin-bottom: 10px; text-decoration: none; color: #999;}#panel .panel-content .pwd-login a.pwd-login-right { float: right;}#panel .panel-content .pwd-login a.pwd-login-left{ float: left;}#panel .panel-content .pwd-login a.pwd-login-left input{ margin-right: 3px;}#panel .panel-content .login button { width: 100%; height: 33px; border: 0; color: white; font-size: 17px; margin-bottom: 10px; border-radius: 5px; background: orange;}#panel .panel-content .reg { /*background: red;*/ height: 30px; line-height: 30px; font-size: 13px; text-align: center; border-bottom: 1px solid #ddd; margin-bottom: 10px;}#panel .panel-content .reg a { color: orange; text-decoration: none; margin-left: 3px;}/*面板底部*/#panel .panel-footer { height: 30px; line-height: 30px; text-align: center;}#panel .panel-footer img{ width: 30px; vertical-align: middle;}
具體的Demo，請移步 傳送門。記住一定要多多練習。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
