管理员登陆页面&后台管理系统主页

作业分析

本次使用div+css等标签编写出如下的效果：

管理员登陆页面网页最终演示图：

image.png

代码展示入下（使用vscode编辑）

html代码展示如下:

<!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="./demo01.css">
<link rel="stylesheet" href="./登录界面/font_e3kfgupk7r/">
</head>
<body>
     <div class="content">
        <div class="nav">
            <h2>管理员登录</h2>
            <div class="input-group">
                <i class="iconfont &#xe614;"></i>
                <input type="text" id="zhanghao" placeholder="账号">
            </div>
            <div class="input-group">
                <i class="iconfont &#xe8b2;"></i>
                <input type="password" placeholder="密码">
            </div>
               <button type="submit">登录</button>
     </div>
</body>
</html>

css代码展示如下：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
.content{
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,#17ead9,#6078ea);
    align-items: center;
    display: flex;
    justify-content: center;
}
.nav{
    width: 380px;
    height: 300px;
   /* 添加毛玻璃效果 */
   background: rgba(255, 255, 255, 0.5); /* 背景半透明 */
   backdrop-filter: blur(100px); /* 模糊效果 */
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap:20px;
}
.button
{
    width: 180px;
    height: 38px;
    background: linear-gradient(135deg,#abdcff,#0396ff);
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}
button:hover {
    background-color: #0056b3;
    color:white;
}

本次使用div+css等标签编写出如下的效果：

后台管理系统主页网页最终演示图：

image.png

代码展示入下（使用vscode编辑）

html代码展示如下:

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D</title>
    <link rel="stylesheet" href="./demo03.css">
    <link rel="stylesheet" href="./font_hsj3ui3r2ji/iconfont.css">
</head>

<body>
    <div class="left">
        <div class="left-top">云端中国城</div>
        <div class="left-content">
            <div><i class="iconfont" style="font-size: 30px;">&#xe676;</i>首页</div>
            <div><i class="iconfont" style="font-size: 30px;">&#xe607;</i>设置</div>
            <div><i class="iconfont" style="font-size: 30px;">&#xe620;</i>用户管理</div>
            <div><i class="iconfont" style="font-size: 30px;">&#xe729;</i>奖池管理</div>
            <div><i class="iconfont" style="font-size: 30px;">&#xe67b;</i>直播认证</div>
            <div><i class="iconfont" style="font-size: 30px;">&#xe621;</i>视频管理</div>
            <div><i class="iconfont" style="font-size: 30px;">&#xe653;</i>财务管理</div>
            <div><i class="iconfont" style="font-size: 30px;">&#xe610;</i>家族管理</div>
            <div><i class="iconfont" style="font-size: 30px;">&#xe627;</i>道具管理</div>
            <div><i class="iconfont" style="font-size: 30px;">&#xe628;</i>红包管理</div>
            <div><i class="iconfont" style="font-size: 30px;">&#xe9c2;</i>守护管理</div>
            <div><i class="iconfont" style="font-size: 30px;">&#xe71e;</i>邀请管理</div>
        </div>
    </div>
    <div class="right">
        <div class="header">
            <div><i class="iconfont" style="font-size:35px;">&#xe601;</i>云端中国城后台管理系统</div>
        </div>
        <div class="topic">
            <div>云端中国城</div>
            <div>/ 主播管理</div>
        </div>
        <div class="main">
            内容
        </div>
        <div class="footer">
            <p>2025 云端中国城 延安大学 版权所有</p>
            <p>&copy; EduCoder 公网安备43019002000962号</p>
        </div>
    </div>
</body>

</html>

css代码展示如下：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    justify-content: space-between;
}

.left {
    width: 300px;
    height: 100%;
    background-color: #af8dce;
    display: flex;
    flex-direction: column;
    align-items: start;
}
.left-top {
   width: 300px;
   height: 200px;
   background-color: black; 
   color:white;
   font-size:38px;
   font-weight: 500;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
}


.left-content{
    width: 300px;
    height: 1200px;
    background-color: pink;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 30px;
    color:white;
}

.left-content div:nth-of-type(1),
.left-content div:nth-of-type(2),
.left-content div:nth-of-type(3),
.left-content div:nth-of-type(4),
.left-content div:nth-of-type(5),
.left-content div:nth-of-type(6),
.left-content div:nth-of-type(7),
.left-content div:nth-of-type(8),
.left-content div:nth-of-type(9),
.left-content div:nth-of-type(10),
.left-content div:nth-of-type(11),
.left-content div:nth-of-type(12){
    width: 300px;
    height: 110px;
    background-color: #545c6c;
    box-sizing: border-box;
    text-align: center;
    line-height: 95px;
}

.left-content div:nth-of-type(1):hover{
    width: 300px;
    height: 110px;
    background-color: #acccfc;
}
.left-content div:nth-of-type(2):hover{
    width: 300px;
    height: 110px;
    background-color: #acccfc;
}
.left-content div:nth-of-type(3):hover{
    width: 300px;
    height: 110px;
    background-color: #acccfc;
}
.left-content div:nth-of-type(4):hover{
    width: 300px;
    height: 110px;
    background-color: #acccfc;
}
.left-content div:nth-of-type(5):hover{
    width: 300px;
    height: 110px;
    background-color: #acccfc;
}
.left-content div:nth-of-type(6):hover{
    width: 300px;
    height: 110px;
    background-color: #acccfc;
}
.left-content div:nth-of-type(7):hover{
    width: 300px;
    height: 110px;
    background-color: #acccfc;
}
.left-content div:nth-of-type(8):hover{
    width: 300px;
    height: 110px;
    background-color: #acccfc;
}
.left-content div:nth-of-type(9):hover{
    width: 300px;
    height: 110px;
    background-color: #acccfc;
}
.left-content div:nth-of-type(10):hover{
    width: 300px;
    height: 110px;
    background-color: #acccfc;
}
.left-content div:nth-of-type(11):hover{
    width: 300px;
    height: 110px;
    background-color: #acccfc;
}
.left-content div:nth-of-type(12):hover{
    width: 300px;
    height: 110px;
    background-color: #acccfc;
}

.iconfont {
    padding-right:10px;
    color: white; /* 调整图标颜色 */
}


.main{
    font-size:800px;
    color: black;
    text-align: center;
    line-height: 1000px;
}
.right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.right .header {
    width: 100%;
    height: 100px;
    background-color: pink;
}

.right .main {
    width: 100%;
    height: 1700px;
    background-color: white;
    border-top: 10px solid #545c64;
    border-bottom: 10px solid #545c64;
    border-right: 10px solid #545c64;
}

.header{
    font-size: 38px;
    font-weight: 600;
    color:black;
}
.header .iconfont{
    font-size: 38px;
    font-weight: 600;
    color:black;
    padding-left:10px;
    
}


.topic{
    width: 100%;
    height: 90px;
    text-align: left;
    display: flex;
    justify-content: start;
    align-items: center;
    gap:30px;
}

.topic div:nth-of-type(1){
    color: black;
    font-size: 30px;
    font-weight: 800;
    padding-left:30px;
}

.topic div:nth-of-type(2){
    color: gray;
    font-size: 30px;
    font-weight: 350;
}

.right .footer {
    width: 100%;
    flex: 1;
    background-color: pink;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    font-size: 23px;
    font-weight: 400;
    color: gray;
}

管理员登陆页面&后台管理系统主页

推荐阅读更多精彩内容