PHP 登錄注冊之前端布局
下面我們來看以下登錄注冊，如下圖所示：
首先我們建立一個(gè)login.php的文件
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php 登錄與注冊 </title> </head> <body> <div id="div"> <h3>歡迎登陸后臺管理系統(tǒng)</h3> <div id="cnt"> <form method="post" action="main.php"> 用戶名：<input type="text" placeholder="請輸入用戶名" name="username"> <br><br> 密 碼：<input type="password" placeholder="請輸入用戶名" name="password"> <br><br> <input type="submit" value="登錄" class="sub"> <input type="button" value="注冊" class="sub" id="sub"> </form> </div> </div> </body> </html>
這樣的頁面 看起來就有點(diǎn)不美觀了,所以我們要寫上css
css可以放在外部也可以放在內(nèi)部
下面我們來建立一個(gè)style.css 的文件，這個(gè)文件里面存放我們的css 代碼：
代碼如下：
*{margin: 0px;padding: 0px;}
body{
background-image:url(image/4.jpg);
}
#div{width:300px;height:400px;
background:#B1FEF9;margin:0 auto;margin-top:150px;
border-radius:20px;
}
h3{margin-left:48px;padding-top:60px;}
h4{margin-left:120px;padding-top:60px;font-size: 18px;}
#cnt{width:280px;height:370px;margin-left:33px;padding-top:60px;}
.sub{width:70px;height:30px;border:1px solid #fff;background:#eee;
margin-left:28px;margin-top:20px;}
.sub1{
width:70px;height:30px;border:1px solid #fff;
background:#eee;margin-left:150px;margin-top:20px;
}當(dāng)我們建立好css 的文件時(shí)，我們的login.php文件需要把樣式引入進(jìn)來
<link rel="stylesheet" type="text/css" href="style.css">
大家看以下我們的login.php 文件，登錄按鈕時(shí),點(diǎn)擊跳轉(zhuǎn)到main.php? 但是你點(diǎn)擊button 是沒有反應(yīng)的，因?yàn)閎utton按鈕我們是需要通過腳本事件才可以實(shí)現(xiàn)想要的效果，下面我們看以下腳本代碼，首先引入jQuery 文件
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
然后我們來寫jquery 的代碼
<script>
$("#sub").click(function(){
location.href="reg.php";
});
</script>這段代碼也很簡單了，當(dāng)buttuon按鈕發(fā)生點(diǎn)擊事件，跳轉(zhuǎn)到reg 頁面，這樣我們就可以跳轉(zhuǎn)到注冊的頁面
通過以上的代碼，我們實(shí)現(xiàn)的效果：
點(diǎn)擊注冊頁面，跳轉(zhuǎn)到reg.php
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php 登錄與注冊 </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="div"> <h4>會(huì)員注冊</h4> <div id="cnt"> <form method="post" action="regin.php"> 用戶名：<input type="text" placeholder="請輸入用戶名" name="username"> <br><br> 密碼：<input type="password" placeholder="請輸入密碼" name="password"> <br><br> <input type="submit" value="注冊" class="sub1"> </form> </div> </div> </body> </html>
reg.php頁面如下圖所示
?
下一章我們將對數(shù)據(jù)庫進(jìn)行操作
