php+html+css制作非常好看网站登录与注册界面
php版本：5.2.17
phpstudy版本：v8.0
首先看一下效果图：
登录界面：
(输入密码也是一样的！)
注册页面：
以上就是效果图
代码：
index.php
<!DOCTYPE html>
<!-- saved from url=(0053)http://ceshi2/member/register_include.php?lang=cn -->
<html class=" met-web oxh js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex,nofllow">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,minimal-ui">
<meta name="format-detection" content="telephone=no">
<title>会员注册-会员中心-网站名称</title>
<link rel="stylesheet" type="text/css" href="https://weui.io/style/weui.css">
<link rel="stylesheet" type="text/css" href="https://weui.io/example.css">
<script type="text/javascript" src="https://weui.io/zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="https://res.wx.qq/open/libs/weuijs/1.2.1/weui.min.js"></script>
<script type="text/javascript" src="https://weui.io/example.js"></script>
<style type="text/css">
* ::before {
content: '';
}
</style>
<script type="text/javascript" class="toast js_show">
// toast
$(function(){
var $toast = $('#toast');
$('#showToast').on('click', function(){
if ($toast.css('display') != 'none') return;
$toast.fadeIn(100);
setTimeout(function () {
$toast.fadeOut(100);
}, 2000);
});
});
// loading
$(function(){
var $loadingToast = $('#loadingToast');
$('#showLoadingToast').on('click', function(){
if ($loadingToast.css('display') != 'none') return;
$loadingToast.fadeIn(100);
setTimeout(function () {
$loadingToast.fadeOut(100);
}, 2000);
});
});</script>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="MetInfo 7.2.0" data-variable="../|cn|cn|metv7|10|1|0" data-user_name="">
<link href="http://ceshi2/favicon.ico?1560821434" rel="shortcut icon" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="public/web/css/basic.css">
<link rel="stylesheet" type="text/css" href="index/metinfo.css">
<style>
body{
background-color: !important;font-family: !important;}
h1,h2,h3,h4,h5,h6{font-family: !important;}
</style>
<script src="index/hm.js"></script><script>(function(){var t=navigator.userAgent;(t.indexOf("rv:11")>=0||t.indexOf("MSIE 10")>=0)&&document.write("<script src=\"../public/plugins/html5shiv.min.js\"><\/script>")})();</script>
<link href="index/online.css" type="text/css" rel="stylesheet"></head>
<!--[if lte IE 9]>
<div class="text-xs-center m-b-0 bg-blue-grey-100 alert">
<button type="button" class="close" aria-label="Close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
你正在使用一个 的浏览器。请以提高您的体验。</div>
<![endif]-->
<body>
<header class="met-head" m-id="met_head" m-type="head_nav">
</header>
<div class="met-banner-ny vertical-align text-center" m-id="banner">
<h3 class="vertical-align-middle">会员中心</h3>
</div>
<section class="met-column-nav" m-id="subcolumn_nav" m-type="nocontent">
<div class="container">
<div class="row">
</div>
</div>
</section>
<link href="index/metinfo(1).css" rel="stylesheet" type="text/css">
<style>
.met-member{background:;}
</style>
<div class="register-index met-member page p-y-50 bg-pagebg1">
<div class="container">
<form class="form-register met-form met-form-validation panel panel-body fv-form fv-form-bootstrap4" method="post" data-validate_order="0" novalidate="novalidate"><button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<?php
if (isset($_POST['button'])) {
$username=$_POST['username'];
$pwd=$_POST['pwd'];
//连接数据库
mysql_connect('127.0.0.1','root','AAaa1234') or die(mysql_error());
mysql_select_db('data'); //选择数据库
mysql_query('set names utf8');
$sql="select * from user where username='$username' and password='$pwd'";
$rs=mysql_query($sql);
mysql_num_rows($rs);
if (mysql_num_rows($rs)==1) {
echo "登录成功！尊敬的$username";
}
else{
echo "登录失败";
}
}
?>
<h1 class="m-t-0 m-b-20 font-size-24 text-xs-center">会员登录</h1>
<div class="form-group required">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" name="username" required="" class="form-control" placeholder="会员名" data-fv-remote-message="" data-fv-notempty-message="此项不能为空" data-fv-stringlength="true" data-fv-stringlength-min="4" data-fv-stringlength-max="30" data-fv-stringlength-message="用户名必须在4-30个字符之间" data-fv-field="username">
</div>
<span class="small-fixed"><small class="form-control-label" data-fv-validator="notEmpty" data-fv-for="username" data-fv-result="NOT_VALIDATED" style="display: none;">此项不能为空</small><small class="form-control-label" data-fv-validator="stringLength" data-fv-for="username" data-fv-result="NOT_VALIDATED" style="display: none;">用户名必须在4-30个字符之间</small></span></div>
<div class="form-group required">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-unlock-alt"></i></span>
<input type="password" name="pwd" required="" class="form-control" placeholder="密码" data-fv-notempty-message="此项不能为空" data-fv-identical="true" data-fv-identical-field="confirmpassword" data-fv-stringlength="true" data-fv-stringlength-min="6" data-fv-stringlength-max="30" data-fv-stringlength-message="密码必须在6-30个字符之间" data-fv-field="password">
</div>
<span class="small-fixed"><small class="form-control-label" data-fv-validator="identical" data-fv-for="password" data-fv-result="NOT_VALIDATED" style="display: none;">两次密码输入不一致</small><small class="form-control-label" data-fv-validator="notEmpty" data-fv-for="password" data-fv-result="NOT_VALIDATED" style="display: none;">此项不能为空</small><small class="form-control-label" data-fv-validator="stringLength" data-fv-for="password" data-fv-result="NOT_VALIDATED" style="display: none;">密码必须在6-30个字符之间</small></span></div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-squared btn-block" type="submit" name="button" id="button">登录</button>
<div class="login_link m-t-10 text-xs-right"><a href="login.php">没有账号？前去注册！</a></div>
</form>
</div>
</div>
<input type="hidden" name="met_lazyloadbg" value="">
<script src="index/lang_json_cn.js"></script>
<script src="index/basic.js" data-js_url="../templates/metv7/cache/metinfo.js?1604380309" id="met-page-js"></script><script src="index/metinfo.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu/hm.js?520556228c0113270c0c772027905838";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script src="index/app.js"></script>
<script src="index/own.js"></script><div class="xl-chrome-ext-bar" id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
<div class="xl-chrome-ext-bar__logo"></div>
<a id="xl_chrome_ext_download" href="javascript:;" class="xl-chrome-ext-bar__option">下载视频</a>
<a id="xl_chrome_ext_close" href="javascript:;" class="xl-chrome-ext-bar__close"></a>
</div><style type="text/css">
.onlinebox_one{background-color: transparent;box-shadow: none;}
.onlinebox_one .online-item{width: 68px;height: 60px;margin-bottom: 2px; padding-top: 12px; position: relative;display: block;color: #ffffff;}
.onlinebox_one .online-item:first-child{height: 20px;padding-top: 0px;}
.onlinebox_one .online-item:nth-child(2){border-radius: 5px 5px 0px 0px;}
.onlinebox_one .online-item:last-child{border-radius: 0px 0px 5px 5px;}
.onlinebox_one .online-item i{font-size: 18px;}
.onlinebox_one .onlinebox-open{border-radius: 5px;font-size: 22px;}
.onlinebox_one .close{font-style: initial;color: #fff;opacity: 1;position: absolute; right: -7px; top: -7px; border-radius: 50%; width: 15px;
height: 15px; display: block;font-size: 14px !important; font-family: arial; }
.onlinebox .onlinebox-open {display: block; cursor: pointer; padding: 0 10px; font-size: 18px; line-height: 40px; color: #fff; }
@media (min-width: 768px){
.onlinebox_one .onlinebox-open{display: none;}
.onlinebox_one .online-item:first-child{display: none;}
}
@media (max-width: 767px){
.onlinebox_one .online-item:first-child{border-radius: 5px 5px 0px 0px;}
.onlinebox_one .onlinebox_one_list{display: none;}
.onlinebox_one .online-item{width: 54px;height: 50px;font-size: 12px;padding-top: 6px;}
.onlinebox_one .online-item i{font-size: 14px;}
}
</style>
<div id="onlinebox" class="onlinebox onlinebox_one" m-type="online" m-id="online" style="position: fixed; top: 300px; bottom: auto; right: 10px; left: auto;">
<div class="onlinebox-open text-xs-center" id="onlinebox-open" style="background:#1baadb;"> <i class="fa fa-comments-o"></i>
</div>
<script>
$(function(){
metFileLoadFun([
'http://ceshi2/public/plugins/webui-popover/webui-popover.min.css',
'http://ceshi2/public/plugins/webui-popover/jquery.webui-popover.min.js',
'http://ceshi2/public/web/plugins/register/webui-popover.min.js'
],function(){
return typeof $.fn.webuiPopover=='function';
},function(){
$('.met-online-weixin').webuiPopover();
});
$("#onlinebox-open").click(function(){
$("#onlinebox").find(".onlinebox_one_list").show();
$(this).hide();
});
$(".close").click(function(){
$("#onlinebox").find(".onlinebox_one_list").hide();
$("#onlinebox-open").show();
});
});
</script>
<div id="toast" style="opacity: 0; display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-warn weui-icon_msg"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</body>
</html>
login.php
<!DOCTYPE html>
<!-- saved from url=(0053)http://ceshi2/member/register_include.php?lang=cn -->
<html class=" met-web oxh js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex,nofllow">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,minimal-ui">
<meta name="format-detection" content="telephone=no">
<title>会员注册-会员中心-网站名称</title>
<link rel="stylesheet" type="text/css" href="https://weui.io/style/weui.css">
<link rel="stylesheet" type="text/css" href="https://weui.io/example.css">
<script type="text/javascript" src="https://weui.io/zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="https://res.wx.qq/open/libs/weuijs/1.2.1/weui.min.js"></script>
<script type="text/javascript" src="https://weui.io/example.js"></script>
<script type="text/javascript" class="toast js_show">
// toast
$(function(){
var $toast = $('#toast');
$('#showToast').on('click', function(){
if ($toast.css('display') != 'none') return;
$toast.fadeIn(100);
setTimeout(function () {
$toast.fadeOut(100);
}, 2000);
});
});
// loading
$(function(){
var $loadingToast = $('#loadingToast');
$('#showLoadingToast').on('click', function(){
if ($loadingToast.css('display') != 'none') return;
$loadingToast.fadeIn(100);
setTimeout(function () {
$loadingToast.fadeOut(100);
}, 2000);
});
});</script>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="MetInfo 7.2.0" data-variable="../|cn|cn|metv7|10|1|0" data-user_name="">
<link href="http://ceshi2/favicon.ico?1560821434" rel="shortcut icon" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="public/web/css/basic.css">
<link rel="stylesheet" type="text/css" href="login/metinfo.css">
<style>
body{
background-color: !important;font-family: !important;}
h1,h2,h3,h4,h5,h6{font-family: !important;}
</style>
<script src="login/hm.js"></script><script>(function(){var t=navigator.userAgent;(t.indexOf("rv:11")>=0||t.indexOf("MSIE 10")>=0)&&document.write("<script src=\"../public/plugins/html5shiv.min.js\"><\/script>")})();</script>
<link href="login/online.css" type="text/css" rel="stylesheet"></head>
<!--[if lte IE 9]>
<div class="text-xs-center m-b-0 bg-blue-grey-100 alert">
<button type="button" class="close" aria-label="Close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
你正在使用一个 的浏览器。请以提高您的体验。</div>
<![endif]-->
<body>
<header class="met-head" m-id="met_head" m-type="head_nav">
</header>
<div class="met-banner-ny vertical-align text-center" m-id="banner">
<h3 class="vertical-align-middle">会员中心</h3>
</div>
<section class="met-column-nav" m-id="subcolumn_nav" m-type="nocontent">
<div class="container">
<div class="row">
</div>
</div>
</section>
<link href="login/metinfo(1).css" rel="stylesheet" type="text/css">
<style>
.met-member{background:;}
</style>
<div class="register-index met-member page p-y-50 bg-pagebg1">
<div class="container">
<form class="form-register met-form met-form-validation panel panel-body fv-form fv-form-bootstrap4" method="post" data-validate_order="0" novalidate="novalidate"><button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<?php
if (isset($_POST['button']))
{
$username=$_POST['username'];
$pwd=$_POST['pwd'];
//连接数据库
$con = mysql_connect('127.0.0.1','root','AAaa1234') or die(mysql_error());
mysql_select_db('data'); //选择数据库
mysql_query('set names utf8');
$sql="insert into user (username,password) values('$username','$pwd')";
$sql2="select * from user where username='$username' and password='$pwd'";
$rs=mysql_query($sql2);
mysql_num_rows($rs);
if (mysql_num_rows($rs)==1)
{
echo "<center style='color:#FF0000;'><h1>用户名已存在!</h1></center>";
}
else
{
if(mysql_query($sql))
{
echo "<center style='color:#FF0000;'><h1>注册成功!正在转跳中</h1></center>";
}
}
}
?>
<h1 class="m-t-0 m-b-20 font-size-24 text-xs-center">会员注册</h1>
<div class="form-group required">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" name="username" required="" class="form-control" placeholder="会员名" data-fv-remote-message="" data-fv-notempty-message="此项不能为空" data-fv-stringlength="true" data-fv-stringlength-min="4" data-fv-stringlength-max="30" data-fv-stringlength-message="用户名必须在4-30个字符之间" data-fv-field="username">
</div>
<span class="small-fixed"><small class="form-control-label" data-fv-validator="notEmpty" data-fv-for="username" data-fv-result="NOT_VALIDATED" style="display: none;">此项不能为空</small><small class="form-control-label" data-fv-validator="stringLength" data-fv-for="username" data-fv-result="NOT_VALIDATED" style="display: none;">用户名必须在4-30个字符之间</small></span></div>
<div class="form-group required">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-unlock-alt"></i></span>
<input type="password" name="pwd" required="" class="form-control" placeholder="密码" data-fv-notempty-message="此项不能为空" data-fv-identical="true" data-fv-identical-field="confirmpassword" data-fv-identical-message="两次密码输入不一致" data-fv-stringlength="true" data-fv-stringlength-min="6" data-fv-stringlength-max="30" data-fv-stringlength-message="密码必须在6-30个字符之间" data-fv-field="password">
</div>
<span class="small-fixed"><small class="form-control-label" data-fv-validator="identical" data-fv-for="password" data-fv-result="NOT_VALIDATED" style="display: none;">两次密码输入不一致</small><small class="form-control-label" data-fv-validator="notEmpty" data-fv-for="password" data-fv-result="NOT_VALIDATED" style="display: none;">此项不能为空</small><small class="form-control-label" data-fv-validator="stringLength" data-fv-for="password" data-fv-result="NOT_VALIDATED" style="display: none;">密码必须在6-30个字符之间</small></span></div>
<div class="form-group required">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-unlock-alt"></i></span>
<input type="password" name="confirmpassword" required="" data-password="password" class="form-control" placeholder="重复密码" data-fv-identical="true" data-fv-identical-field="password" data-fv-identical-message="两次密码输入不一致" data-fv-notempty-message="此项不能为空" data-fv-field="confirmpassword">
</div>
<span class="small-fixed"><small class="form-control-label" data-fv-validator="identical" data-fv-for="confirmpassword" data-fv-result="NOT_VALIDATED" style="display: none;">两次密码输入不一致</small><small class="form-control-label" data-fv-validator="notEmpty" data-fv-for="confirmpassword" data-fv-result="NOT_VALIDATED" style="display: none;">此项不能为空</small></span></div>
<button class="btn btn-lg btn-primary btn-squared btn-block" type="submit" name="button" id="button">立即注册</button>
<div class="login_link m-t-10 text-xs-right"><a href="index.php">已有账号？前去登录！</a></div>
</form>
</div>
</div>
<input type="hidden" name="met_lazyloadbg" value="">
<script src="login/lang_json_cn.js"></script>
<script src="login/basic.js" data-js_url="../templates/metv7/cache/metinfo.js?1604380309" id="met-page-js"></script><script src="login/metinfo.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu/hm.js?520556228c0113270c0c772027905838";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script src="login/app.js"></script>
<script src="login/own.js"></script><div class="xl-chrome-ext-bar" id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
<div class="xl-chrome-ext-bar__logo"></div>
<a id="xl_chrome_ext_download" href="javascript:;" class="xl-chrome-ext-bar__option">下载视频</a>
<a id="xl_chrome_ext_close" href="javascript:;" class="xl-chrome-ext-bar__close"></a>
</div><style type="text/css">
.onlinebox_one{background-color: transparent;box-shadow: none;}
.onlinebox_one .online-item{width: 68px;height: 60px;margin-bottom: 2px; padding-top: 12px; position: relative;display: block;color: #ffffff;}
.onlinebox_one .online-item:first-child{height: 20px;padding-top: 0px;}
.onlinebox_one .online-item:nth-child(2){border-radius: 5px 5px 0px 0px;}
.onlinebox_one .online-item:last-child{border-radius: 0px 0px 5px 5px;}
.onlinebox_one .online-item i{font-size: 18px;}
.onlinebox_one .onlinebox-open{border-radius: 5px;font-size: 22px;}
.onlinebox_one .close{font-style: initial;color: #fff;opacity: 1;position: absolute; right: -7px; top: -7px; border-radius: 50%; width: 15px;
height: 15px; display: block;font-size: 14px !important; font-family: arial; }
.onlinebox .onlinebox-open {display: block; cursor: pointer; padding: 0 10px; font-size: 18px; line-height: 40px; color: #fff; }
@media (min-width: 768px){
.onlinebox_one .onlinebox-open{display: none;}
.onlinebox_one .online-item:first-child{display: none;}
}
@media (max-width: 767px){
.onlinebox_one .online-item:first-child{border-radius: 5px 5px 0px 0px;}
.onlinebox_one .onlinebox_one_list{display: none;}
.onlinebox_one .online-item{width: 54px;height: 50px;font-size: 12px;padding-top: 6px;}
.onlinebox_one .online-item i{font-size: 14px;}
}
</style>
<div id="onlinebox" class="onlinebox onlinebox_one" m-type="online" m-id="online" style="position: fixed; top: 300px; bottom: auto; right: 10px; left: auto;">
<div class="onlinebox-open text-xs-center" id="onlinebox-open" style="background:#1baadb;"> <i class="fa fa-comments-o"></i>
</div>
<script>
$(function(){
metFileLoadFun([
'http://ceshi2/public/plugins/webui-popover/webui-popover.min.css',
'http://ceshi2/public/plugins/webui-popover/jquery.webui-popover.min.js',
'http://ceshi2/public/web/plugins/register/webui-popover.min.js'
],function(){
return typeof $.fn.webuiPopover=='function';
},function(){
$('.met-online-weixin').webuiPopover();
});
$("#onlinebox-open").click(function(){
$("#onlinebox").find(".onlinebox_one_list").show();
$(this).hide();
});
$(".close").click(function(){
$("#onlinebox").find(".onlinebox_one_list").hide();
$("#onlinebox-open").show();
});
});
</script>
<div id="toast" style="opacity: 0; display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-warn weui-icon_msg"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</body>
</html>
javascript and css 我就不提供了！可以看下面的网盘链接进行下载！
作者并没有使用header转跳
剩下的内容请大家自己开发！
| 网盘链接： | 戳一下我 |
|---|
更多推荐
php+html+css制作非常好看网站登录与注册界面
发布评论