作业分析
1、管理员登录页面
image.png
2、后台管理系统主页
image.png
代码实现
1、管理员登录页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理系统登录页面</title>
<style>
*{
margin: 0;padding: 0;box-sizing: border-box;
}
html,body{width: 100%;height: 100%;}
body{display:flex;flex-direction:column;}
.main{
width: 100%;height: 100%;background-color:aqua;
}
.main{ display: flex;
justify-content: center;
align-items: center;
}
.login-box{
width: 300px;
height: 200px;
background-color: rgb(250, 250, 255);
border-radius: 8px;
box-shadow: #888 10px 10px 20px;
}
.header{
width: 100%;
height: 45px;
line-height: 40px;
text-align: center;
font-size: 18px;
letter-spacing: 3px;
border-bottom: solid 1px#e8e5e5;
}
.login{
height: 100px;
display:flex;
flex-direction: column;
justify-content: space-evenly;
}
.login p{
height: 30px;
display: flex;
justify-content:space-evenly;
align-items: center;
margin-bottom: 20px;
}
.login p input{
width: 200px;
height: 30px;
}
.login p button{
outline: none;
border: none;
width: 150px;
height: 30px;
border-radius: 15px;
background-color: rgb(54, 54, 255);
color: white;
margin-top: 15px;
}
.login p button:hover{
background-color: rgb(3, 3, 203);
font-weight: 700px;
}
</style>
</head>
<body>
<div class="main">
<div class="login-box">
<div class="header">AI管理系统 管理员登陆页面</div>
<div class="login">
<div>
<P>
<label for="zhanghao">账号：</label>
<input type="text" name="zhanghao" id="zhanghao" placeholder="请输入账号">
</p>
<P>
<label for="mima">密码：</label>
<input type="password" name="mima" id="mima" placeholder="请输入密码">
</P>
<P>
<button>登录</button>
</P>
</div>
</div>
</div>
</body>
</html>
2、后台管理系统主页
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台管理系统主页</title>
<link rel="stylesheet" href="./font_8qv9ruosjw2/iconfont.css">
<link rel="stylesheet" href="./font_wqxzymjruz/iconfont.css">
<style>
*{margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
body{display: flex;}
.left{
width: 280px;
height: 100%;
background-color: rgb(54, 73, 111);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.side{
height: 400px;
width: 100%;
}
.side .nav-items{
width: 100%;
height: 50px;
color: white;
text-align: center;
line-height: 50px;
font-size: 18px;
cursor: pointer;
}
.side .nav-items:hover{
color: rgb(150, 150, 235);
}
.exit{
height: 30px;
width: 90px;
color:white;
}
.exit:hover{
color: rgb(150, 150, 230);
}
.right{
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
}
.header,
.foot{
width: 100%;
height: 40px;
background-color: #ddd4d4;
}
.right .header {
width: 100%;
height: 50px;
color: rgb(19, 17, 17);
line-height: 50px;
font-size: 18px;
cursor: pointer;
border-bottom: solid 2px #ddd;
}
.main{
flex: 1;
}
.container{
width: 100%;
height: 684px;
display:flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border-bottom: solid 2px #ddd;
}
.box{
border:solid 1px white;
width: 300px;
height: 300px;
color:rgb(44, 156, 112);
text-align: center;
line-height: 100px;;
background-color: rgb(250, 250, 255);
border-radius: 8px;
box-shadow: #bdbaba 10px 10px 20px;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.box .icon-yonghu ,
.icon-fenzuguanli,
.icon-lujing-6 {
font-size: 60px;
}
</style>
</head>
<body>
<div class="left">
<div class="side">
<div class="nav-items"><i class="iconfont icon-shouye-zhihui"></i>首页</div>
<div class="nav-items"><i class="iconfont icon-renyuan"></i>人员管理</div>
<div class="nav-items"><i class="iconfont icon-xitong"></i>系统管理</div>
<div class="nav-items"><i class="iconfont icon-guanli"></i>日志管理</div>
</div>
<div class="exit">安全退出</div>
</div>
<div class="right">
<div class="header"><i class="iconfont icon-shouye-zhihui"></i>首页</div>
<div class="main">
<div class="container">
<div class="box"><i class="iconfont icon-yonghu"></i>用户</div>
<div class="box"><i class="iconfont icon-fenzuguanli"></i>分组</div>
<div class="box"><i class="iconfont icon-lujing-6"></i>数据分析</div>
</div
</div>
<div class="foot"></div>
</div>
</body>
</html>
个人总结
重要：
加入图标时，网页跟font文件夹在一个文件夹里面，否则无法加入图标
