登录功能界面制作

登录界面前端：

<!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文件不在同一级，则需要注意引用的方法。/文件夹/.../CSS文件，一级一级引用。

接着就是页面布局，根据自己的喜好或者客户需求制作即可。这样，前端登录页面就做好了。

新建文件

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

提交重置代码

自动运行

全屏