一、前言
经过前面一个简单计算器的设计,我们已经对前端有了一个初步的了解,
接下来我们将继续使用前端知识设计一个登录界面(这个页面比较重要,后面很多东西还和这个登录页面有关)
二、设计登录界面
这是登录页面的简单代码,后台逻辑部分还未实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<style>
#box{
height: 900px;
background-image: url(../image/1.webp);
text-align: center;
}
#title{
width: 120px;
font-size: 50px;
text-align: center;
color: orangered;
float: left;
margin-top: 130px;
margin-left: 950px;
}
#user{
width: 350px;
height: 40px;
float: left;
margin-top: 20px;
margin-left:840px;
}
#passwd{
width: 350px;
height: 40px;
float: left;
margin-top: 10px;
margin-left:840px;
}
#qg{
width: 350px;
height: 40px;
float: left;
margin-top: 10px;
margin-left:840px;
}
input{
width: 350px;
height: 35px;
font-size: 20px;
text-align: center;
}
#btn{
width: 355px;
height: 45px;
float: left;
margin-top: 15px;
margin-left:840px;
background-color: rgb(129, 129, 255);
}
#btn button{
width: 355px;
height: 45px;
background-color: rgb(129, 129, 255);
font-size: 30px;
}
#def{
width: 350px;
height: 45px;
float: left;
margin-top: 350px;
margin-left:840px;
text-align: center;
}
#def span{
color: chartreuse;
font-size: 25px;
}
</style>
</head>
<body>
<div id="box">
<div id="title">登 录</div>
<form action="login.php" method="post">
<div id="user">
<input type="text">
</div>
<div id="passwd">
<input type="password">
</div>
<div id="qg">
<input type="text">
</div>
<div id="btn">
<button type="submit">登录</button>
</div>
</form>
<div id="def">
<span>最终解释权归您所有</span>
</div>
</div>
</body>
</html>
三、登录界面效果图
四、下一步学习准备
符合下面条件才适合继续学习下去
- php基础语法(后台功能实现)
- MySQL数据库基础(存储用户数据)
- Linux基础(搭建环境)
一开始我们会在Windows环境下搭建网页服务,后面会逐渐改在Linux环境下进行搭建网页服务,所以要提前准备好虚拟机或者服务器并安装好Linux系统配好环境。