一.后台管理系统主页
作业分析
本次使用html标签编写如下效果
image.png
代码实现
<!DOCTYPE html>
<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="./左边内容.css">
<link rel="stylesheet" href="./font_59egla46mxp/iconfont.css">
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
display: flex;
}
</style>
<body>
<div class="zuobiang">
<div class="zuoshang"><span>中国云端城</span></div>
<div class="zuoxiang">
<div class="nr">
<p><i class="iconfont icon-shouye"></i>首页</p>
</div>
<div class="nr">
<p><i class="iconfont icon-shezhi"></i>设置</p>
</div>
<div class="nr">
<p><i class="iconfont icon-yonghuguanli_huaban"></i>用户管理</p>
</div>
<div class="nr">
<p><i class="iconfont icon-wodejiangchi"></i>奖池管理</p>
</div>
<div class="nr">
<p><i class="iconfont icon-wodejiangchi"></i>主播认证</p>
</div>
<div class="nr">
<p><i class="iconfont icon-zhiboguanli"></i>直播管理</p>
</div>
<div class="nr">
<p><i class="iconfont icon-icon-shipinguanli"></i>视频管理</p>
</div>
<div class="nr">
<p><i class="iconfont icon-caiwuguanli"></i>财务管理</p>
</div>
<div class="nr">
<p><i class="iconfont icon-changyonglvyouyewutubiao_fuzhi_jiating"></i>家族管理</p>
</div>
<div class="nr">
<p><i class="iconfont icon-daojuguanli"></i>道具管理</p>
</div>
<div class="nr">
<p><i class="iconfont icon-hongbaoguanli"></i>红包管理</p>
</div>
<div class="nr">
<p><i class="iconfont icon-shouhu"></i>守护管理</p>
</div>
<div class="nr">
<p><i class="iconfont icon-dengjiguanli"></i>等级管理</p>
</div>
<div class="nr">
<p><i class="iconfont icon-yaoqingjiangli"></i>邀请奖励</p>
</div>
</div>
</div>
<div class="youbiang">
<div class="head">云端中国城管理系统</div>
<div class="body">空白</div>
<div class="end">云端中国城管理系统</div>
</div>
</body>
</html>
以下为css样式
.zuobiang {
width: 200px;
height: 100%;
background-color: antiquewhite;
display: flex;
flex-direction: column;
}
.zuoshang {
width: 200px;
height: 75px;
color: white;
background-color: #060606;
align-items: center;
line-height: 50px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.zuoxiang {
flex: 1;
width: 200px;
background-color: #4e5459;
}
.nr {
width: 200px;
height: 46px;
align-items: center;
line-height: 46px;
cursor: pointer;
color: white;
}
.nr :hover {
font-size: large;
transform: matrix(rgb(62, 142, 217));
}
.zuobiang ul {
list-style: none;
}
.youbiang {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
}
.youbiang .head {
height: 75px;
align-items: center;
line-height: 75px;
border-bottom: solid 2px #4e5459;
}
.youbiang .body {
flex: 1;
align-items: center;
border-bottom: solid 2px #4e5459;
}
.youbiang .end {
height: 100px;
align-items: center;
line-height: 100px;
border-bottom: solid 2px #4e5459;
}
二.管理员登录页面
本次使用html标签编写如下效果
image.png
代码实现
<!DOCTYPE html>
<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="./登入系统.css">
</head>
<body>
<div class="xt">
<div class="b"><span>登入管理系统</span></div>
<div class="content">
<p>
<label for="zhanghao">账号：</label>
<input type="text" name="zhanghao" id="zhanghao" placeholder="请输入账号">
</p>
<p>
<label for="mima">密码：</label>
<input type="text" name="mima" id="mima" placeholder="请输入密码">
</p>
<p>
<button class="c">登入</button>
</p>
</div>
</body>
</html>
以下是css样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #17ead9, #6078ea)
}
body {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.xt {
width: 300px;
height: 200px;
background-color: white;
border-radius: 15px;
display: flex;
flex-direction: column;
}
.xt .b {
width: 300px;
height: 50px;
display: flex;
justify-content: space-evenly;
align-items: center;
border-bottom: solid 3px #4e5459;
}
.xt .b span {
font-size: 20px;
font-weight: 5px;
align-items: center;
line-height: 50px;
}
.xt .content {
width: 300px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.c {
cursor: pointer;
}
.c :hover {
color: white;
background-color: #6078ea;
}
