作業(yè)要求
開發(fā)后臺管理系統(tǒng)頁面：管理員登錄頁面、后臺管理系統(tǒng)主頁
圖片示例
管理員登錄頁面
后臺管理系統(tǒng)主頁
代碼演示-管理員登錄頁面
使用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>
代碼演示-后臺管理系統(tǒng)主頁
<!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">云端中國城后臺管理系統(tǒng)<br>
---------------------------------------------------------------------------
<div class="breadcrumb">云端中國城 / 主播管理</div><br>
</div>
</div>
<div class="footer">
云端中國城 延安大學 版權所有<br>
? 2024 EduCoder 公安網備43019002000962號
</div>
</body>
</html>
不足之處
圖標顯示不出來導致頁面不夠美觀
