登录功能界面制作
登录界面前端：
<!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文件，一级一级引用。
接着就是页面布局，根据自己的喜好或者客户需求制作即可。这样，前端登录页面就做好了。
neue Datei
<!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>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)