로그인 기능 인터페이스 제작

로그인 인터페이스 프론트 엔드:

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