iOS轉前端之仿寫登入頁面__iOS

來源:互聯網
上載者:User

今天還是來仿寫一個常用的登入介面,鞏固一下之前掌握的知識。

同樣的我們還是先構建一個項目,建立對應的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;}

OK~ 搞定,下面看效果圖:



具體的Demo,請移步 傳送門。記住一定要多多練習。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.