一.后台管理系统首页代码
1.html代码
<!DOCTYPE html>
<html lang="en">
<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">
</head>
<body>
<div id="container">
<div class="left">
<div>
<div class="logo">
<img src="../img/logo.png" alt="">
<span>OPENLAB管理系统</span>
</div>
<div class="header-img">
<img src="../img/tx.png" alt="">
<h2>管理员：星</h2>
</div>
<ul class="nav">
<li>首页</li>
<li>系统管理</li>
<li>用户管理</li>
<li>店铺管理</li>
<li>订单管理</li>
<li>积分管理</li>
</ul>
</div>
<div class="exit">
<span>安全退出</span>
</div>
</div>
<div class="right">
<div class="header">
<span>收起菜单</span>
<span>OPENLAB管理系统</span>
<span>管理员：星</span>
</div>
<div class="main">
<div class="content">
<h2>用户信息管理</h2>
<div class="line"><p></p><div>妖娆的分割线</div><p></p></div>
<div class="search-box">
<div>
<label for="username">账号：</label>
<input type="text" placeholder="请输入账号">
</div>
<div>
<label for="eamil">邮箱：</label>
<input type="email" placeholder="请输入邮箱">
</div>
<div>
<button>搜索</button>
</div>
</div>
<div class="line"><p></p><div>妖娆的分割线</div><p></p></div>
<div class="tb-title">
<div>ID</div>
<div>账号</div>
<div>密码</div>
<div>头像</div>
<div>邮箱</div>
<div>状态</div>
<div>操作</div>
</div>
<div class="tb-content">
<div>001</div>
<div>tom</div>
<div>******</div>
<div><img src="../img/tx.png" alt=""></div>
<div>tom@openlab.com</div>
<div><span class="s-active">启用</span></div>
<div>
<button class="edit">编辑</button>
<button class="disable">禁用</button>
<button class="delete">删除</button>
</div>
</div>
<div class="tb-content">
<div>002</div>
<div>jerry</div>
<div>******</div>
<div><img src="../img/tx.png" alt=""></div>
<div>jerry@openlab.com</div>
<div><span class="s-active">启用</span></div>
<div>
<button class="edit">编辑</button>
<button class="disable">禁用</button>
<button class="delete">删除</button>
</div>
</div>
</div>
</div>
<div class="footer">
<span>版权所有，翻版必究</span>
</div>
</div>
</div>
</body>
</html>
2.style.css代码
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
3.demo01.css代码
#container{
width: 100%;
height: 100%;
display: flex;
}
.left{
width: 300px;
height: 100%;
background-color: #203453;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.left > div:nth-of-type(1){
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.left .logo{
width: 100%;
height: 50px;
background-color: #f5f5f5;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo img{
width: 40px;
height: 40px;
}
.logo span{
font-size: 20px;
font-weight: 600;
letter-spacing: 3px;
}
.left .header-img{
width: 100%;
/* background-color: antiquewhite; */
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.left .header-img img{
width: 100px;
height: 100px;
border-radius: 50%;
}
.left .nav{
width: 90%;
list-style: none;
/* background-color: salmon; */
}
.nav li,
.exit{
width: 100%;
height: 50px;
font-size: 18px;
color: white;
cursor: pointer;
line-height: 50px;
text-align: center;
}
.nav li:hover,
.exit:hover{
background-color: white;
color: #203453;
font-weight: 600px;
}
.left .exit{
width: 100%;
height: 50px;
/* background-color: aquamarine; */
}
.right{
height: 100%;
flex: 1;
background-color: #f2f2f1;
display: flex;
flex-direction: column;
}
.right .header,
.right .footer{
height: 50px;
color: #333;
background-color: #f5f5f5;
}
.right .header{
border-bottom: solid 1px #ccc;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
.header span:nth-of-type(1){
display: inline-block;
width: 100px;
height: 30px;
background-color: #ddd;
border-radius: 8px;
line-height: 30px;
text-align: center;
font-size: 14px;
cursor: pointer;
}
.header span:nth-of-type(2){
font-size: 20px;
font-weight: 600;
}
.right .footer{
border-top: solid 1px #ccc;
font-size: 12px;
color: #ccc;
line-height: 50px;
text-align: center;
}
.main{
flex: 1;
padding: 10px;
}
.main .content{
width: 100%;
height: 100%;
padding: 30px;
background-color: white;
border-radius: 10px;
}
.main h2{
color: #444;
}
.main .line{
display: flex;
flex-direction: row;
align-items: center;
}
.line p{
flex: 1;
height: 2px;
background-color: #ccc;
}
.line div{
width: 120px;
font-size: 12px;
color: #ccc;
text-align: center;
}
.main .search-box{
padding: 10px;
display: flex;
gap: 50px;
}
.search-box label{
font-size: 20px;
font-weight: 500;
}
.search-box input{
width: 260px;
height: 30px;
outline: none;
border: solid 1px #888;
border-radius: 3px;
padding: 5px;
}
.search-box button{
width: 120px;
height: 30px;
border: none;
background-color: #1094d5;
color: white;
letter-spacing: 2px;
cursor: pointer;
border-radius: 3px;
}
.tb-title,
.tb-content{
width: 100%;
height: 80px;
font-weight: 700;
align-items: center;
display: flex;
justify-content: space-evenly;
border-bottom: solid 2px #555;
}
.tb-title >div:nth-of-type(1),
.tb-content >div:nth-of-type(1),
.tb-title >div:nth-of-type(3),
.tb-content >div:nth-of-type(3),
.tb-title >div:nth-of-type(4),
.tb-content >div:nth-of-type(4),
.tb-title >div:nth-of-type(6),
.tb-content >div:nth-of-type(6)
{
width: 120px;
}
.tb-title >div:nth-of-type(2),
.tb-content >div:nth-of-type(2){
width: 200px;
}
.tb-title >div:nth-of-type(5),
.tb-content >div:nth-of-type(5){
width: 220px;
}
.tb-title >div:nth-of-type(7),
.tb-content >div:nth-of-type(7){
flex: 1;
}
.tb-content{
font-weight: 500;
border-bottom: solid 1px #888;
}
.tb-content >div>img{
width: 50px;
height: 50px;
border-radius: 50%;
}
.edit,
.disable,
.delete{
width: 60px;
height: 20px;
border-radius: 9px;
border: none;
background-color: #555;
color: white;
cursor: pointer;
}
.edit{
background-color: rgb(19, 201, 19);
}
.delete{
background-color: rgb(237, 17, 17);
}
二.网页展示效果
