管理系统
效果如下
{28CCB926-7A13-462A-AC93-8D414A28B60F}.png
网页代码
使用VsCode工具编写代码，如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./lesson09/font_p90tkk727m/iconfont.css">
<title>管理系统页面</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
html,body{width: 100%;height: 100%;}
body{display: flex;}
.left{
width: 200px;
height: 100%;
background-color: rgb(136, 135, 135);
display: flex;
flex-direction: column;
}
.leftheader{
width: 200px;
height: 60px;
padding: 20px;
color: #fcfafa;
align-items: center;
background-color: black;
display: flex;
flex-direction: column;
}
.leftmain{
list-style: none;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.h3:hover{background-color: #fff;}
li a{
display:block;
color:#fcfafa;
text-decoration:none;
}
li:hover{
background-color:#aaa;
}
.right{
width: 100%;
height: 100%;
background-color:white ;
display: flex;
flex-direction: column;
}
.header{
display: flex;
flex-direction: column;
}
.right{
display:flex ;
justify-content: space-between;
}
.rightheader{
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 50px;
border-bottom:dashed;
}
.content{
margin-left: 40px;
}
.header2{
display: flex;
color: rgb(58, 54, 54);
border-bottom:solid #aaa;
}
.footer{
display: flex;
flex-direction: column;
align-items: center;
border-top: dashed;
}
</style>
</head>
<body>
<!--左侧-->
<div class="left">
<div class="leftheader">
<h3><span class="iconfont icon-denglong"></span>云端中国城</h3>
</div>
<div class="leftmain">
<li><a href="#"><span class="iconfont icon-shouye"></span>首页</a></li>
<li><a href="#"><span class="iconfont icon-shezhi"></span>设置</a></li>
<li><a href="#"><span class="iconfont icon-congratulate"></span>用户管理</a></li>
<li><a href="#"><span class="iconfont icon-xiaoshoujiangchi"></span>奖池管理</a></li>
<li><a href="#"><span class="iconfont icon-zhubo"></span>主播认证</a></li>
<li><a href="#"><span class="iconfont icon-zhibo"></span>直播管理</a></li>
<li><a href="#"><span class="iconfont icon-shipin"></span>视频管理</a></li>
<li><a href="#"><span class="iconfont icon-caiwu-xianxing"></span>财务管理</a></li>
<li><a href="#"><span class="iconfont icon-jiazu"></span>家族管理</a></li>
<li><a href="#"><span class="iconfont icon-daoju"></span>道具管理</a></li>
<li><a href="#"><span class="iconfont icon-tuikuan"></span>红包管理</a></li>
<li><a href="#"><span class="iconfont icon-shouhu"></span>守护管理</a></li>
<li><a href="#"><span class="iconfont icon-dengji"></span>等级管理</a></li>
</div>
</div>
<!--右侧-->
<div class="right">
<div class="header">
<div class="rightheader"> <h4 class="content"><span class="iconfont icon-a-108_gouwuqingdan"></span>云端中国城后台管理系统</h4></div>
<div class="header2">
<h4>云端中国城/</h4>
<div>主播管理</div>
</div>
</div>
<div class="main"></div>
<div class="footer">
<h6>云端中国城·延安大学·版权所有</h6>
<h6>©2024EduCoder公网安备43019002000962号</h6>
</div>
</div>
</body>
</html>
