2025-03-22

作业分析：开发后台管理员系统页面：管理员登陆页面、后台管理系统主页

①管理员登陆页面

<!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="./css/demo01样式.css">
    <link rel="stylesheet" href="./css/demo01.css">
</head>
<style>
 

</style>
<body>
    <!-- 最上面的头部 -->
    <div class="header">
         <!-- LOGO -->
          <div class="logo">
            <img src="./images/小鹅通_logo_2020.svg" alt="">
          </div>
    </div>
    <!-- 下面的身体部分 -->
    <div class="main">
        <!--  -->
         <div class="login-box">
            <div class="head">欧鹏云平台管理系统-管理员登录窗口</div>
            <div class="login">
                <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>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
}
.header{
    width: 100%;
    height: 55px;
    /* 此处颜色需要删除 */
    /* background-color: rgb(155, 114, 61); */
}
.main{
    width: 100%;
    flex: 1;
    /* height: 100%; */
     /* 此处颜色需要删除 */
    background-color:antiquewhite;
}

/* 父标签 */
.header{
    display: flex;
    justify-content: start;
    align-items: center;
}

/* 对小鹅通的图标进行修饰 */
.header .logo img{
    width: 300px;
    height: 50px;
}

.main{
    display: flex;
    justify-content:space-around;
    align-items: center;
}
/* 对登录窗口外观还有表面进行修饰 */
.main .login-box{
    width: 400px;
    height: 240px;
    background-color:white;
    border-radius: 15px; 
    box-shadow: #888 10px 10px 20px;
}

.login-box{
    display:flex;
    flex-direction: column;
    /* justify-content:space-around; */
    align-items:center;
}
/* 对登录窗口内容的标题文字部分进行修饰 */
.head{
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
}

.login{
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items:center;
}
/* 对账号和密码的输入框进行调整修饰 */
.login p{
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items:center;
}

/* 对输入框的长度和宽度进行修饰 */
.login p input{
    width: 300px;
    height: 32px;
}

/* 对登录按钮进修修饰 */
.login p button{
    /* 消除外边框 */
    outline: none; 
    /* 消除边框 */
    border: none;
    width: 300px;
    height: 32px;
    border-radius: 13px;
    background-color: #5a7ceb;
    color: white;
}

/* 对按钮修饰以达到鼠标在其上方时变成小手＋大小变化 */
.login p button:hover{
    background-color: #4872f6;
    font-weight:600;
}

②管理员系统网页

<!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="./css/style.css">
    <link rel="stylesheet" href="./css/demo01.css">
    <link rel="stylesheet" href="./font_twdxco421lk/iconfont.css">
</head>
<body>
    <!-- ----------------左侧 START----------------------- -->
    <div class="left">
        <div class="tubiao">
            <!-- <div class="photo" ><img src="./images/小鹅通_logo_2020.svg" alt=""></div> -->
            云端中国城</div>
        <div class="liebiao"><span class="iconfont icon-zhuye">首页</span></div>
        <div class="liebiao"><span class="iconfont icon-shezhi"></span>设置</div>
        <div class="liebiao"><span class="iconfont icon-yonghuguanli"></span>用户管理</div>
        <div class="liebiao"><span class="iconfont icon-jiangchiguanli"></span>奖池管理</div>
        <div class="liebiao"><span class="iconfont icon-zhuborenzheng"></span>主播认证</div>
        <div class="liebiao"><span class="iconfont icon-shipinguanli"></span>视频管理</div>
        <div class="liebiao"><span class="iconfont icon-caiwuguanli"></span>财务管理</div>
        <div class="liebiao"><span class="iconfont icon-jiazuguanli"></span>家族管理</div>
        <div class="liebiao"><span class="iconfont icon-daojuguanli"></span>道具管理</div>
        <div class="liebiao"><span class="iconfont icon-hongbaoguanli"></span>红包管理</div>
        <div class="liebiao"><span class="iconfont icon-shehuibaozhangka"></span>守护管理</div>
        <div class="liebiao"><span class="iconfont icon-dengjiguanli"></span>等级管理</div>
        <div class="liebiao"><span class="iconfont icon-yaoqingguanli"></span>邀请奖励</div>
    </div>
    <!-- ------------------左侧 END----------------------- -->

     <!-- -----------------right  STAR------------------- -->
    <div class="right">
        <div class="head">云端中国城管理系统</div>
        <div class="body"></div>
        <div class="foot">
            <div class="banquan">云城中国云计算计算机科学与技术版权所有</div>
            <div class="banquan">2024EDUCoder公安备案</div>
        </div>
        <!-- <div class="foot">@2024EDUCoder公安备案</div> -->
    </div>
    <!-- ------------------right END--------------------- -->
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}
/* ----------------------------left START--------------------------------------------- */
.left{
    width: 225px;
    height: 100%;
    background-color:rgb(78, 74, 67);
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content:space-between;
}
.left .liebiao :nth-of-type(1){
    font-size: 25px;
}
.tubiao{
    width: 100%;
    height: 45px;
    background-color: black;
    color:white;
    font-size: 25px;
    justify-content: space-evenly;
    align-content: center;
    font-weight: 900;
}

   

.liebiao{
    font-size:25px;
    font-weight: 300;
    color: white;
    /* outline:rgb(10, 10, 9) solid thin; */
    /* border-color: rgb(86, 188, 235); */
    
    
    /* justify-content: center; */
    
    
}
.liebiao:hover{
    background-color: #8fa2e1;
    font-weight:600;
    color: #5f6576;
}

.tubiao .photo{
    width: 5px;
    height: 5px;
    border-radius: 15px;
}
/* ----------------------------left END----------------------------------------------- */


/* ----------------------------right  STAR---------------------------------------------*/
/* 背景底色 */
.right{
    flex: 1;
    height: 100%;
    /* background-color:rgb(103, 237, 193); */

    display: flex;
    flex-direction: column;
    

}
/* head部分底色 */
.head{
    width: 100%;
    height: 45px;
    /* background-color:rgb(10, 73, 52); */
}

/* body部分底色 */
.body{
    width: 100%;
    flex: 1;
    background-color:rgb(196, 128, 46);
}

/* foot部分底色 */
.foot{
    width: 100%;
    height: 45px;
    /* background-color:rgb(67, 153, 218); */
}
.right .foot{
    justify-content: space-evenly;
}


.head{
    font-size: 28px;
    font-weight: 600;
    display: flex;
    justify-content:space-between;
    align-items: center;
}
.foot{
    font-size: 15px;
    font-weight: 400;
}
.foot{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}


/* ------------------------------right END------------------------------------------- */
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 2025-03-22
    《第七日记忆》 作者：萍 短文 【1. 故障】 手术台的无影灯亮起时，林夏闻到了一股淡淡的铁锈味。 她记得自己应该...
    崩崩小圆帽_0cdd阅读 412评论 0赞 0
  • 2025-03-22
    好的，我现在需要帮用户整理一个关于绿色鼻涕的对照表格，方便他们自行排查原因。首先，我得回顾用户提供的搜索结果，看看...
    园中守望阅读 35评论 0赞 0
  • 方励《里斯本丸沉没》   电影带来的世界112 2025-03-22
    方励《里斯本丸沉没》电影带来的世界112 2024年6月14日10时，纪录电影《里斯本丸沉没》在第26届上海国际电...
    彭求实阅读 1,157评论 0赞 1
  • 2025-03-22
    帕金森吃玉米的好处 在探讨帕金森病患者享受玉米这一自然馈赠时，我们不得不提及它所带来的诸多积极生活影响，这些益处不...
    健康你我他0阅读 27评论 0赞 0
  • [原创文集]春泥
    教育科学学院 24预理2班 罗和丹 2024104105 三月的阳光像一把浸过蜂蜜的梳子，将沉睡的河面梳出粼...
    啦啦哩哩阅读 694评论 0赞 2

友情链接更多精彩内容