- 设置
- 个人中心
- 退出
- 部门名称
- 部门代码
- 修改时间
- 修改人
- 操作
- 斗鱼
- 01
- 修改时间
- 修改人
- 编辑 删除
- 百里半
- 02
- 修改时间
- 修改人
- 编辑 删除
- 虎牙
- 03
- 修改时间
- 修改人
- 编辑 删除
- 百度
- 04
- 修改时间
- 修改人
- 编辑 删除
- 阿里
- 05
- 修改时间
- 修改人
- 编辑 删除
- 腾讯
- 06
- 修改时间
- 修改人
- 编辑 删除
body {
margin: 0;
padding: 0;
}
.container {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex: 1;
flex-basis: auto;
box-sizing: border-box;
min-width: 0;
width: 100%;
height: 900px;
border: 1px solid;
color: #fff;
}
.container .left {
height: 100%;
width: 240px;
min-width: 240px;
background-color: #334157;
margin: 0;
border: solid 1px;
padding: 30px 0;
}
.container .left ul li {
margin: 20px auto;
}
.container .right {
display: flex;
flex-direction: column;
flex: 1;
flex-basis: auto;
box-sizing: border-box;
padding: 0;
margin: 0;
width: 100%;
}
.head {
width: 100%;
height: 60px;
background-color: #334157;
position: relative;
}
.head .super {
float: right;
line-height: 60px;
margin-right: 30px;
background-color: #334157;
color: #fff;
}
.head .select {
border: 1px solid;
position: absolute;
top: 62px;
right: 10px;
background-color: #334157;
width: 170px;
display: none;
}
.head .select ul {
margin: 10px;
padding-left: 0;
list-style: none;
float: left;
}
.head .select ul li {
margin: 10px;
}
.container .right .main {
flex: 1;
flex-basis: auto;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
color: #2c3e50;
width: 100%;
height: 100%;
}
.container .right .main .findAdd {
min-width: 500px;
}
.container .right .main .findAdd input {
height: 25px;
outline: none;
}
.container .right .main .findAdd button {
height: 25px;
}
.container .right .main .table {
width: 1250px;
}
ul {
list-style: none;
}
.thead {
width: 1200px;
margin: 20px auto 0 auto;
}
.tbody {
width: 1200px;
margin: 0 auto;
}
.thead ul,
.tbody ul {
height: 50px;
width: 100%;
margin: 3px;
padding: 0;
}
.thead ul li {
font-weight: bold;
}
.thead ul li,
.tbody ul li {
float: left;
width: 200px;
text-align: center;
height: 50px;
line-height: 50px;
}
.thead ul li:first-of-type,
.tbody ul li:first-of-type {
width: 55px;
}
.tbody ul li {
border-top: none;
}
.tbody ul li:not(:last-child) {
border-right: none;
}
.tbody ul li span {
margin: 0 10px;
border: 1px solid #ccc;
padding: 5px 10px;
font-size: 12px;
}
.tbody ul li .del {
color: #fff;
background: #f56c6c;
}
.tbody ul:nth-of-type(odd) {
background-color: #f5f5f5;
}
.tbody ul li:hover {
cursor: pointer;
}
.addAll {
position: absolute;
left: 700px;
top: 600px;
display: none;
}
.addAll h2 {
text-align: center;
font-weight: bold;
font-size: 20px;
background-color: #adcdef;
line-height: 40px;
}
.addAll div {
margin: 10px 10px;
font-size: 15px;
padding: 10px;
}
.addAll div input {
padding: 5px;
outline: none;
border: 1px solid #ccc;
border-radius: 3px;
}
JQ
页面效果
写这个的时候脑袋里没有一个大致的想法，写到哪里是哪里写到后面后，发现有好多代码要重复写，或者是代码不好看，看起来麻烦，然后觉得其实写这种把函数封装起来什么时候用在调用可以节省一些代码，对于代码和后期的改正也比较方便，虽然知道代码封装但是自己还是没养成这个习惯。
代码封装的好处：
- 安全性
- 面向对象
- 代码的复用
- 程序的简洁性和可读性
- 其他
