로그인 인터페이스 프론트 엔드:
<!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"/>이 코드는 사용할 HTML 페이지에 CSS 스타일을 참조하는 것입니다. 그렇지 않으면 CSS 스타일이 킥인하지 마세요.
CSS 스타일 파일을 참조할 때 파일 위치에 주의해야 합니다. CSS 파일과 HTML 파일이 동일한 수준이 아닌 경우 참조 방법에 주의해야 합니다. /folder/.../CSS 파일, 1단계 참조.
다음 단계는 페이지 레이아웃으로, 자신의 선호도나 고객 요구에 따라 구성할 수 있습니다. 이런 식으로 프런트엔드 로그인 페이지가 준비되었습니다.
다음 섹션