登录功能界面制作
登录界面前端：
<!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样式。
<link rel="stylesheet" type="text/css" href="/phpMyAdmin/regedit.css"/>这段代码就是将CSS样式引用到HTML页面中来使用，否则CSS样式不会起作用。
需要注意的是，引用CSS样式文件是一定要注意文件所在的位置，若CSS文件和HTML文件不在同一级，则需要注意引用的方法。/文件夹/.../CSS文件，一级一级引用。
接着就是页面布局，根据自己的喜好或者客户需求制作即可。这样，前端登录页面就做好了。
@韩尘
我
7年前 添加回复 0