一.后臺管理系統(tǒng)主頁
作業(yè)分析
本次使用html標簽編寫如下效果
image.png
代碼實現(xiàn)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理系統(tǒng)</title>
<link rel="stylesheet" href="./左邊內(nèi)容.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">云端中國城管理系統(tǒng)</div>
<div class="body">空白</div>
<div class="end">云端中國城管理系統(tǒng)</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
代碼實現(xiàn)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登入系統(tǒng)</title>
<link rel="stylesheet" href="./登入系統(tǒng).css">
</head>
<body>
<div class="xt">
<div class="b"><span>登入管理系統(tǒng)</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;
}
