ログイン機能インターフェース制作

ログインインターフェースフロントエンド:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, 
              maximum-scale=1.0, user-scalable=no"> 
        <meta name="format-detection" content="telephone=no" /> 
    <title>登录页面实例展示</title>
    <link rel="stylesheet" type="text/css" href="/phpMyAdmin/regedit.css"/>
</head>
<body>
<div>
    <img src="http://keep60.com/Project/SxgAdmin/Public/images/platform_login_header_bg.png"/>
</div>
<div class="mt70 w432 mar_auto re min_h400">
    <form>
 <p><input type="text" class="pf_ipt_user" placeholder="请输入登录账号" 
        autocomplete="off" name="username" id="_username" tabindex="1"/></p>
        <p><input type="password" class="pf_ipt_pass pass_bg_1" 
        placeholder="请输入密码" autocomplete="off" name="password" id="_password" tabindex="2"/></p>
        <p>
            <span>
            <input type="text" name="_checkcode" id="code" 
            class="pf_ipt_verify w230"  placeholder="验证码" autocomplete="off" tabindex="3"/>
            <img src="/phpMyAdmin/code.php" 
            onClick="this.src='/phpMyAdmin/code.php?nocache='+Math.random()" style="cursor:hand">
        </span>
        </p>
        <p><a href="javascript:void(0)" onclick="login();" class="btn_1 w430">登录</a></p>
        <p><a>账号注册</a></p>
    </form>
</div>
</body>
</html>

这个是CSS文件
.mar_auto {
    margin-right: auto;
    margin-left: auto;
}
.re {
    position: relative;
}
.mt70 {
    margin-top: 70px;
}
.min_h400 {
    min-height: 400px;
}
.w432 {
    width: 432px;
}
.btn_1 {
    display: inline-block;
    line-height: 16px;
    padding: 15px 0;
    margin-bottom: 30px;
    border-radius: 3px;
    font-family: Microsoft YaHei,SimHei;
    background: #03a9f4;
    border: 1px solid #0398db;
    color: #fff;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
}
.w430 {
    width: 430px;
}
.pf_ipt_user, .pf_ipt_pass, .pf_ipt_verify{
    height: 20px;
    line-height: 20px;
    padding: 13px 20px;
    margin-bottom: 30px;
    width: 390px;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    color: #888;
    font-size: 16px;
    font-family: Microsoft YaHei,SimHei;
}
.w230{
    width: 230px;
}

分析例:

実際にページを作るとページスタイルが増えるため、CSSスタイルとHTMLコードを一緒にするとコードページが長くなり非常に不便なので、ページ上に個別に配置されます CSS スタイルを記述します。

CSSスタイルファイルを参照する場合、CSSファイルとHTMLファイルが同じレベルにない場合は、ファイルの場所に注意する必要があります。 /folder/.../CSS ファイル。一度に 1 レベルずつ参照されます。

次のステップはページレイアウトです。これは自分の好みや顧客のニーズに応じて作成できます。このようにして、フロントエンドのログインページが準備できました。

学び続ける

新しいファイル

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title>登录页面实例展示</title> <style> .mar_auto { margin-right: auto; margin-left: auto; } .re { position: relative; } .mt70 { margin-top: 70px; } .min_h400 { min-height: 400px; } .w432 { width: 432px; } .btn_1 { display: inline-block; line-height: 16px; padding: 15px 0; margin-bottom: 30px; border-radius: 3px; font-family: Microsoft YaHei,SimHei; background: #03a9f4; border: 1px solid #0398db; color: #fff; font-size: 20px; text-align: center; cursor: pointer; } .w430 { width: 430px; } .pf_ipt_user, .pf_ipt_pass, .pf_ipt_verify{ height: 20px; line-height: 20px; padding: 13px 20px; margin-bottom: 30px; width: 390px; border: 1px solid #d9d9d9; border-radius: 3px; color: #888; font-size: 16px; font-family: Microsoft YaHei,SimHei; } .w230{ width: 230px; } </style> </head> <body> <div> <img style="width:400px;height:150px" src="http://keep60.com/Project/SxgAdmin/Public/images/platform_login_header_bg.png"/> </div> <div class="mt70 w432 mar_auto re min_h400"> <form> <p><input type="text" class="pf_ipt_user" placeholder="请输入登录账号" autocomplete="off" name="username" id="_username" tabindex="1"/></p> <p><input type="password" class="pf_ipt_pass pass_bg_1" placeholder="请输入密码" autocomplete="off" name="password" id="_password" tabindex="2"/></p> <p> <span> <input type="text" name="_checkcode" id="code" class="pf_ipt_verify w230" placeholder="验证码" autocomplete="off" tabindex="3"/> <img src="/phpMyAdmin/code.php" onClick="this.src='/phpMyAdmin/code.php?nocache='+Math.random()" style="cursor:hand"> </span> </p> <p><a href="javascript:void(0)" onclick="login();" class="btn_1 w430">登录</a></p> <p><a>账号注册</a></p> </form> </div> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear