用户信息管理
妖娆的分隔线
妖娆的分隔线
ID
账号
密码
头像
邮箱
状态
操作
后台管理系统的开发
代码
HTML部分：
OPENLAB管理系统
管理员：杰斯
安全退出
收起菜单
OPENLAB管理系统
管理员：杰斯
CSS部分：
style01：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
style02：
/* 后台管理系统样式文件 */
#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: #fff;
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;
}
.main .content {
background-color: aliceblue;
height: 100%;
width: 100%;
border-radius: 10px;
padding: 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 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);
}
最终效果
