作业要求
开发后台管理系统页面：管理员登录页面、后台管理系统主页
图片示例
管理员登录页面
后台管理系统主页
代码演示-管理员登录页面
使用Trae CN工具进行编写，代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
body{
display: flex;
flex-direction: column;
background: linear-gradient(135deg,#abdcff,#0396ff);
}
.header{
width: 100%;
height: 72px;
display: flex;
justify-content: center;
}
.header .content{
width: 120px;
height: 50px;
display: flex;
align-items: center;
}
.header{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 18px;
letter-spacing: 3px;
}
.man{
width: 100%;
flex: 1;
}
.header .content img{
width: 100px;
height: 30px;
}
.man{
display: flex;
justify-content: center;
align-items: center;
}
.denglu{
width: 500px;
height: 240px;
background-color: #fff;
border-radius: 8px;
background-color: rgba(255,255,255,0.8);
box-shadow: #888 10px 10px 20px;
}
.logo{
height: 180px;
display: flex;
flex-direction: column;
justify-content: center;
}
.logo p{
height: 40px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.logo p input{
width: 260px;
height: 32px;
}
.logo p button{
outline: none;
border: none;
width: 300px;
height: 32px;
border-radius: 16px;
background-color: rgb(10, 87, 174);
color: #fff;
}
.logo p button:hover{
background-color: rgb(68, 117, 243);
font-weight: 600;
}
</style>
</head>
<body>
<div class="header">
<div class="content">
<img src="./img/小鹅通logo.png" alt="">
</div>
</div>
<div class="man">
<div class="denglu">
<div class="header">openAI 管理员登录</div>
<div class="logo">
<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>登录</button>
</p>
</div>
</div>
</div>
</body>
</html>
代码演示-后台管理系统主页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>云端中国城后台</title>
<link rel="stylesheet" href="./font_4867509_pfhb0tmnipf/iconfont.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
}
.sidebar {
width: 200px;
background: #333;
color: white;
padding: 10px 0;
}
.sidebar .logo {
display: flex;
align-items: center;
padding: 10px 15px;
background: #1a1a1a;
margin-bottom: 15px;
}
.logo img {
height: 24px;
margin-right: 10px;
}
.sidebar ul {
list-style: none;
}
.sidebar li {
padding: 12px 20px;
}
.sidebar a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.sidebar .active {
background: #6c757d;
color: white;
}
.main-content {
flex: 1;
padding: 60px 20px 20px; /* 增加顶部padding，避免内容被页头遮挡 */
}
.main-header {
position: fixed;
top: 0;
left: 200px;
right: 0;
font-size: 18px;
color: #333;
padding: 15px 20px;
background: white;
border-bottom: 1px solid #ddd;
z-index: 100;
}
.breadcrumb {
color: #666;
font-size: 14px;
}
.footer {
position: fixed;
bottom: 0;
left: 200px;
right: 0;
background: white;
border-top: 1px solid #ddd;
text-align: center;
padding: 10px;
font-size: 12px;
color: #666;
}
</style>
</head>
<body>
<div class="sidebar">
<div class="logo">
<img src="./img/def330e70b565324626c09cd7d2a3852.jpg" alt="图标">
<span>云端中国城</span>
</div>
<ul>
<li><a href="#"><span class="iconfont icon-gouwuche"></span> 首页</a></li>
<li><a href="#"><span class="iconfont icon-gouwuche"></span> 设置</a></li>
<li><a href="#"><span class="iconfont icon-gouwuche"></span> 用户管理</a></li>
<li><a href="#"><span class="iconfont icon-gouwuche"></span> 奖池管理</a></li>
<li class="active"><span class="iconfont icon-gouwuche"></span> 主播认证</a></li>
<li><a href="#"><span class="iconfont icon-gouwuche"></span> 直播管理</a></li>
<li><a href="#"><span class="iconfont icon-gouwuche"></span> 视频管理</a></li>
<li><a href="#"><span class="iconfont icon-gouwuche"></span> 财务管理</a></li>
<li><a href="#"><span class="iconfont icon-gouwuche"></span> 家族管理</a></li>
<li><a href="#"><span class="iconfont icon-gouwuche"></span> 道具管理</a></li>
<li><a href="#"><span class="iconfont icon-gouwuche"></span> 红包管理</a></li>
<li><a href="#"><span class="iconfont icon-gouwuche"></span> 守护管理</a></li>
<li><a href="#"><span class="iconfont icon-gouwuche"></span> 等级管理</a></li>
<li><a href="#"><span class="iconfont icon-gouwuche"></span> 邀请奖励</a></li>
</ul>
</div>
<div class="main-content">
<div class="main-header">云端中国城后台管理系统<br>
---------------------------------------------------------------------------
<div class="breadcrumb">云端中国城 / 主播管理</div><br>
</div>
</div>
<div class="footer">
云端中国城 延安大学 版权所有<br>
© 2024 EduCoder 公安网备43019002000962号
</div>
</body>
</html>
不足之处
图标显示不出来导致页面不够美观
