demo01.css
#container{
width:100%;
height:100%;
/* background-color:antiquewhite; */
display:flex;
}
/* 左侧导航区域：宽度300px */
.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:white;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap:10px;
}
.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;
gap:10px;
justify-content: center;
align-items: center;
}
.header-img img{
width:100px;
height: 100px;
border-radius:50%;
}
.left .nav{
width: 90%;
list-style:none;
/* background-color:aqua; */
}
.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{
height:50px;
width:100%;
/* background-color:antiquewhite; */
}
/* 右侧内容区域：宽度-弹性盒子剩余所有宽度(flex:1) */
.right{
height:100%;
flex: 1;
background-color:#f2f2f1;
display:flex;
flex-direction: column;
}
.right .header,
.right .footer{
height:50px;
color:#333;
background-color: #fff;
}
.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:#eee;
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:#aaa;
line-height: 50px;
text-align:center;
}
.main{
flex:1;
padding:10px;
overflow-y:scroll;
}
.main .content{
background-color:white;
width:100%;
border-radius:10px;
padding:30px;
}
.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 lable{
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:rgb(1, 123, 145);
color:white;
letter-spacing: 2px;
cursor: pointer;
border-radius:3px;
}
.tb-title,
.tb-content{
height:80px;
display:flex;
width:100%;
font-weight:700;
justify-content: space-evenly;
align-items: center;
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:10px;
border:none;
background-color:#555;
color:white;
cursor:pointer;
}
.edit{
background-color: rgb(2, 145, 2);
}
.delete{
background-color: rgb(180, 0, 0);
}
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height:100%;
width: 100%;
}
后台管理系统
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台管理系统首页</title>
<!-- 引入外部css样式文件 -->
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/demo01.css">
</head>
<body>
<!-- 包含所有内容的容器 -->
<div id="container">
<!-- 左侧内容区域 -->
<div class="left">
<!-- 上侧内容 -->
<div>
<!-- logo -->
<div class="logo">
<img src="./images/logo.png">
<span>OPENLAB管理系统</span>
</div>
<!-- 头像 -->
<div class="header-img">
<img src="./images/th1.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="email">邮箱：</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="./images/th1.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="./images/th1.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 class="tb-content">
<div>002</div>
<div>jerry</div>
<div>******</div>
<div><img src="./images/th1.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 class="tb-content">
<div>002</div>
<div>jerry</div>
<div>******</div>
<div><img src="./images/th1.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 class="tb-content">
<div>002</div>
<div>jerry</div>
<div>******</div>
<div><img src="./images/th1.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 class="tb-content">
<div>002</div>
<div>jerry</div>
<div>******</div>
<div><img src="./images/th1.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 class="tb-content">
<div>002</div>
<div>jerry</div>
<div>******</div>
<div><img src="./images/th1.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 class="tb-content">
<div>002</div>
<div>jerry</div>
<div>******</div>
<div><img src="./images/th1.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 class="tb-content">
<div>002</div>
<div>jerry</div>
<div>******</div>
<div><img src="./images/th1.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 class="tb-content">
<div>002</div>
<div>jerry</div>
<div>******</div>
<div><img src="./images/th1.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 class="tb-content">
<div>002</div>
<div>jerry</div>
<div>******</div>
<div><img src="./images/th1.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>
展示
