管理系统开发

作业标题

模仿开发管理系统

网页效果

网页代码

使用VsCode工具编写代码如下：


guanli.png

xitong.png

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">
</head>
<body>
    <div class="baokuang">
        <div class="zuocebianlan">
            <div class="bianlan-header">
                <img src="./img/logo.png " alt="" width="170" height="70">
            </div>
            <ul class="bianlan-menu">
                <li><a href=""#>首页</a></li>
                <li><a href=""#>设置</a></li>
                <li class="xiadantiao">
                    <a href=""#>用户管理</a>
                    <ul class="xiadan-caidan">
                        <li><a href="#">管理员</a></li>
                        <li><a href="#">操作日志</a></li>
                        <li><a href="#">本站用户</a></li>
                    </ul>
                </li>
                <li><a href=""#>奖池管理</a></li>
                <li><a href=""# class="xianshi">主播认证</a></li>
                <li><a href=""#>主播管理</a></li>
                <li><a href=""#>视频管理</a></li>
                <li><a hrer=""#>财务管理</a></li>
                <li><a href=""#>家族管理</a></li>
                <li><a href=""#>道具管理</a></li>
                <li><a href=""#>红包管理</a></li>
                <li><a href=""#>守护管理</a></li>
                <li><a href=""#>等级管理</a></li>
                <li><a href=""#>邀请奖励</a></li>
            </ul>
        </div>
        <div class="zhuyao-neirong">
            <div class="toubu-biaoti">
                <h1>云端中国城后台管理系统</h1>
                <div class="daohang-lujing"><a href="#"> 云端中国城</a>/<span>主播管理</span></div>
            </div>
            <div class="xuanxiangka-quyu">
                <a href="#" class="xuanxiangka">网站数据大屏</a>
                <a href="#" class="xuanxiangka">网站设置-主页</a>
                <a href="#" class="xuanxiangka">设置-秘密设置</a>
                <a href="#" class="xuanxiangka">用户-管理员</a>
                <a href="#" class="xuanxiangka">用户-操作日志</a>
                <a href="#" class="xuanxiangka">用户-本站用户</a>
                <a href="#" class="xuanxiangka">主播管理</a>
            </div>
            <div class="sousuo-guolv">
                <div class="from-group">
                    <lable for="shenhe-zhuangtai">审核状态：</lable>
                    <select id="shenhe-zhuangtai">
                        <option value="">请选择</option>
                    </select>
                </div>
                <div class="from-group">
                    <lable for="tijiao-shijian">提交时间：</lable>
                    <input type="datetime-local" id="tijiao-shijian">
                    <span>To</span>
                    <input yupe="datetime-local" id="jieshu-shijian">
                </div>
                <div class="from-group">
                    <lable for="yonghu-id">用户ID:</lable>
                    <input tupe="text"  id="yonghu-id" placeholder="请输入会员ID、靓号">
                </div>
                <div class="from-group">
                    <lable for="guanjianzi">关键字:</lable>
                    <input type="text" id="guanjianzi" placeholder="请输入姓名、手机">
                </div>
                <button class="sousuo-an">搜索</button>
            </div>
            <div class="huiyuan-xinxi"></div>
        </div>
    </div>
</body>

</html>

css样式

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

body{
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

.baokuang{
    display: flex;
}

.zuocebianlan{
    width: 200px;
    background-color: #333;
    color: white;
    padding: 20px;
}

.bianlan-header{
    width: 100%;
    margin-bottom: 20px;
}

.bianlan-menu li{
    margin-bottom: 10px;
}

.bianlan-menu a{
    color: white;
    text-decoration: none;
    display: block;
    padding: 10px;
    border-radius: 5px;
}

.bianlan-menu{
    list-style-type: none;
    padding-left: 20px;
    display: block;
}

.xiadantiao:hover.xiadan-caidan{
    display: block;
}

.zhuyao-neirong{
    flex: 1;
    padding: 20px;
}

.toubu-biaoti{
    background-color: white;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
}

.toubu-biaoti h1{
    margin-bottom: 10px;
}

.daohang-lujing{
    font-size: 14px;
}

.xuanxiangka-quyu{
    background-color: white;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    margin-top: 10px;
}

.xuanxiangka{
    display: inline-block;
    padding: 8px 15px;
    margin-right: 10px;
    border:1px solid#ccc;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-decoration: none;
    color: #333;
    background-color: #f4f4f4;
}

.xuanxiangka.xianshi{
    background-color: white;
    border-bottom: 1px solid white;
}

.sousuo-guolv{
    background-color: white;
    padding: 20px;
    margin-top: 10px;
}

.form-group{
    margin-bottom: 15px;
}

.form-group label{
    display: block;
    margin-bottom: 5px;
}

.sousuo-an{
    background-color: #8cb9e8;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.huiyuan-xinxi{
    height: 600px;
    background-color: #ccc;
    margin-top: 20px;
}

.bgs{
    width: 100%;
    height: 1000px;
    background: linear-gradient(90deg,#f2fefe,#e2e2f1);
    display: flex;
    justify-content: center;
}

.contents{
    width: 1400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.tltlee{
    font-size: 38px;
    font-weight: 600;
}

.nave{
    width: 850px;
    height: 50px;
    border-radius: 25px;
    background-color: #fff;
    list-style: none;
    display: flex;
    justify-content: space-between;
}

.nave li{
    width: 130px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}

.nave li .active{
    background-color: #4872f6;
    color: white;
    border-radius: 25px;
}

.introe{
    width: 1400px;
    height: 600px;
    border-radius: 10px;
    border: solid 2px #fff;
    overflow: hidden;
    background-color: #fff;
    display: flex;
}

.lefts,
.lefts img{
    width: 700px;
    height: 600px;
}

.rights{
    width: 700px;
    height: 600px;
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.rights h3{
    font-size: 28px;
}

.rights h4{
    font-size: 26px;
    font-weight: 400;
}

.rights p{
    color: gray;
    background-image: url(./img/tubiao.png);
    background-repeat: no-repeat;
    background-position: 0 center;
    padding-left: 30px;
}

.rights .btns{
    display: flex;
    gap: 30px;
}

.rights .btns div{
    width: 100px;
    height: 38px;
    border: solid 1px #4872f6;
    border-radius: 5px;
    text-align: center;
    line-height: 38px;
    color: #4872f6;
    cursor: pointer;
}

.rights .btns div:nth-of-type(1){
    background-color: #4872f6;
    color: white;
}

.rights .btns div:nth-of-type(2){
}

管理登录页面

<!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;}
        .header{width: 100%;height: 72px;
            display: flex;
             justify-content: center;
        }
        .main{width: 100%;flex: 1;/*background-color: aquamarine;*/}
        .header .content {width: 1200px;height: 72px;
            display: flex;
        align-items: center;
    }
        .header .content img{width: 100px;height: 30px;}
        .main{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .login-box{
            width: 400px;
            height: 240px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: #888 10px 10px 20px;
        }
        .header{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            letter-spacing: 3px;
            border-bottom: solid 1px #eee;
        }
        .login{
            height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }
        .login p{
            height: 40px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        .login p input{
            width: 260px;
            height: 32px;
        }
        .login p button{
            outline: none;
            border: none;
            width: 300px;
            height: 32px;
            border-radius: 16px;
            background-color: #4872f6;
            color: white;
        }
        .login p button:hover{
            background-color: #143bbd;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="content">
            <img src="./img/logo.png" alt="">
        </div>
    </div>
    <div class="main">
        <div class="login-box">
            <div class="header">欧鹏AI管理系统 管理员登录</div>
        <div class="login">
            <p>
                <lable for="zhanghao">账号：</lable>
                <input type="text"  name="zhanghao" id="zhanghao" placeholder="=请输入账号">
            </p>
            <p>
                <lable for="mima">密码：</lable>
                <input type="password"  name="mima" id="mima" placeholder="=请输入密码"> 
            </p>
            <p>
                <button>登录</button>
            </p>
        </div>
        </div>
    </div>
</body>
</html>

登录页面网页效果


denglu.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容