第一次做前端登陆页面
博客记录生活，First ~
话不多说上代码
-html代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 下方语句是导入 jQ 包 -->
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var username = $("#username").val();
var password = $("#password").val();
// alert(typeof password+'\rpassword);
if(!username){
alert("用户名必填!");
$("#username").focus();//获取焦点
return ;
}
if(!password){
alert("密码必填!");
$("#password").focus();//获取焦点
return ;
}
$.post(
"../php/web_init.php",
{
username:username,
password:password
},
function(data){
alert( data);
});
// 第一个是php地址 第二个是传过去的数据 第三个是接收的传回来的数据的方法 function
});
});
</script>
<!-- 下方语句是从外部导入js文件，jq可以在js中写 -->
<!-- <script type="text/javascript" src="page1.js"></script> -->
<!-- <script type="text/javascript">
$(document).ready(function () {
XXXXXXX,这是一个模式
})
</script> -->
<!-- 下方语句是 导入字体包 -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<title></title>
<!-- <script type="text/javascript">
function buttonClick(){
var no_1=document.getElementById("no_1");
var no_2=document.getElementById("no_2");
alert("登陆成功!\r用户名为："+no_1.value+"\r密码为："+no_2.value);
}
//js 按钮提交部分
</script> -->
<link rel="stylesheet" type="text/css" href="web_init.css"/>
<!-- 此处从外部导入css文件 -->
</head>
<body>
<!-- <p class=".123">hello</p> -->
<main>
<lift>
<img src="QQ图片20191013124823.jpg" >
</lift>
<right>
<div class="action">
<div class="h">
<h3>欢迎回来！</h3>
</div>
<div class="user">
<i class="fa fa-envelope fa" aria-hidden="true"></i>
<input type="text" placeholder="请输入邮箱:" id="username" name="username"/>
</div>
<div class="pass">
<i class="fa fa-lock fa-lg" aria-hidden="true"></i>
<input type="password" placeholder="请输入密码:" id="password" name="password"/>
</div>
<div class="forget">
<a href="">忘记密码?</a>
</div>
<div class="inweb">
<button>登陆</button>
</div>
<div class="notid">
<a href="">没有账号？立即注册</a>
</div>
<div class="muchways">
<!-- <a href=""><i class="fa fa-qq" aria-hidden="true"></a> -->
<!-- <a href=""><i class="fa fa-weixin" aria-hidden="true"></a> -->
<!-- <a href=""><i class="fa fa-weibo" aria-hidden="true"></a> -->
<!-- <a href="">qq</a>
<a href="">qq</a>
<a href="">qq</a>
-->
<a href="https://www.hao123.com/"><i class="fa fa-qq" aria-hidden="true"></i></a>
<a href="https://www.hao123.com/"><i class="fa fa-weixin" aria-hidden="true"></i></a>
<a href="https://www.hao123.com/"><i class="fa fa-weibo" aria-hidden="true"></i></a>
</div>
</div>
</div>
</right>
</main>
</body>
</html>
—接下来是css代码
*{
padding: 0;
margin: 0;
}
body{
/* background: lightskyblue;*/
background-image: url("QQ图片20191013125036.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center center;
/* height: 100vh; */
/* display: flex; */
/* flex-direction: row;
/* justify-content: center;
align-items: center; */
}
main{
position: absolute;
left: 50%;
margin-left: -400px;
top:50%;
margin-top: -250px;
/* 上面是居中语句 */
opacity:0.9;
/* background: transparent; */
/* 上面语句是透明设置 */
/* border: aqua 1px solid; */
/*
第一种使用opacity：0~1，这个方法有个缺点，就是内容也会跟着透明；第二种方法就是background-color:rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容。
*/
background: white;
/* background-color: rgba(214, 176, 145, 0.8); */
width: 800px;
height: 500px;
/* margin: 100px 30px; */
display: flex;
flex-direction: row;
border-radius: 15px;
}
main lift{
margin: 5px 5px 5px 10px;
padding-top: 10px;
width: 450px;
height: 470px;
/* border: chartreuse 1px solid; */
/* flex: 1.5; */
/* background: transparent; */
box-shadow: 0 0 20px ghostwhite;
display: flex;
border-radius: 15px;
justify-content: center;
align-items: center;
}
main lift>img{
height: 100%;
width: 100%;
border-radius: 15px;
}
main right{
margin: 10px;
/* border: chartreuse 1px solid; */
border-left:whitesmoke 5px solid;
/* flex: 1; */
width: 350px;
height: 470px;
/* border-radius: 15px; */
display: flex;
flex-direction: column;
/* 主轴 */
justify-content: center;
align-items: center;
/* 副轴居中 */
}
.action{
border-radius: 15px;
/* border: #66CDAA 1px solid; */
width: 220px;
height: 430px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* justify-content: center;
align-content: center; */
box-shadow: 0 0 50px aliceblue;
}
.h{
text-align: center;
margin-top: -30px;
font-size: 30px;
color: #87CEFA;
margin-bottom: 20px;
}
.h>h3{
text-shadow:0 0 3px #87CEFA;
}
.user,.pass{
width: 190px;
height: 35px;
margin: 5px 0;
/* flex: 0 0 30px; */
border-bottom: #87CEFA 2px solid;
/* border: mediumaquamarine 1px solid; */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/* align-content: center; */
}
.user>i,.pass>i{
/* margin-top: 5px; */
margin-right: 5px;
color: #00BFFF;
}
.user>input,.pass>input{
border-radius: 5px;
width: 150px;
height: 16px;
font-size: 13px;
box-shadow: 2px 2px 10px aliceblue;
border-style: none;
}
.forget{
/* border: mediumaquamarine 1px solid; */
margin: 5px 0;
/* padding-left:60% ; */
padding-left: 120px;
/* width: 20%; */
height: 20px;
width: 70px;
/* display: flex;
justify-content: flex-start;
flex-direction: row;
*/}
.forget>a{
font-size: 13px;
text-decoration: none;
color: blueviolet;
position: relative;
}
.inweb{
/* border: mediumaquamarine 1px solid; */
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 27px;
width: 160px;
}
.inweb>button{
/* height: 15%; */
border-radius: 10px;
color: #FFFFFF;
font-size: 15px;
background: dodgerblue;
width: 100%;
height:100%;
box-shadow:2px 3px 5px #F0F8FF;
}
.notid{
margin-top: 10px;
/* border: mediumaquamarine 1px solid; */
display: flex;
justify-content: center;
align-items: center;
}
.notid>a{
font-size: 13px;
color: deepskyblue;
text-decoration: none;
}
.muchways{
margin-left: 20px;
margin-top: 10px;
height: 40px;
width: 140px;
/* border: #00BFFF 1px solid; */
display: grid;
grid-template-columns: 33% 33% 33%;
justify-items: center;
/* justify-content: space-around; */
/* 运用了 栅格 */
/* grid-template-rows: repeat(3 1fr); */
/* flex-direction: row; */
/* justify-content: space-evenly; */
/* justify-content: center;
align-items: center; */
}
.muchways>a{
color: darkgrey;
width: 16px;
height: 16px;
padding: 10px;
/* border: aqua 1px solid; */
text-decoration: none;
}
–接下来是PHP部分，很简单的php验证返回数据
<?php
$username = $_POST['username'];
$password = $_POST['password'];
if($username =="laobai" && $password =="123"){
echo "登陆成功";
}else{
echo "登陆失败";
}
?>
程序效果图
- 第一次做，还有很多欠缺，还可以更加完善。
- 作为一名小白，会变强的！
