Production d'interface de fonction de connexion

Interface de connexion frontale :

<!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;
}

Exemple d'analyse :

Parce que lors de la création d'une page, il y aura plus de styles de page, donc combiner les styles CSS et le code HTML entraînera comparaison des pages de codes C'est long et très peu pratique, j'écrirai donc le style CSS dans une page séparée.

Il convient de noter que lors du référencement de fichiers de style CSS, vous devez faire attention à l'emplacement du fichier. Si le fichier CSS et le fichier HTML ne sont pas au même niveau, vous devez faire attention. à la méthode de référence. /folder/.../Fichiers CSS, référencés un niveau à la fois.

L'étape suivante est la mise en page, qui peut être réalisée selon vos propres préférences ou les besoins du client. De cette façon, la page de connexion frontale est prête.

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Production d'interface de fonction de connexion

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]