height: 80px;
margin-bottom: 10px;
/* background-color: rgb(201, 64, 255); */
}
.one input {
width: 200px;
height: 40px;
outline: none;
border: 0;
float: left;
margin: 18px 15px;
border-radius: 10px;
border: 1px solid rgb(220, 223, 230);
text-indent: 0.6em;
}
.one span {
display: block;
float: left;
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: rgb(64, 158, 255);
border: 1px solid;
margin: 23px 12px;
border-radius: 9px;
border: 1px solid rgb(220, 223, 230);
}
.one span:hover {
color: #fff;
cursor: pointer;
background-color: rgb(21, 101, 182);
}
/* 弹出框 */
.box {
width: 297px;
height: 210px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* border: 1px solid; */
background-color: #fff;
display: none;
}
.box ul {
margin: 0;
padding: 0;
}
.box li {
width: 100px;
height: 40px;
line-height: 40px;
/* background-color: pink; */
border: 1px solid rgb(5, 5, 5);
border-bottom: 0;
}
.box li:nth-child(2n) {
width: 191px;
border-left: 0;
}
.box li:last-child {
width: 292px;
border: 1px solid rgb(5, 5, 5);
}
.box li input {
margin: 7px 4px;
height: 20px;
width: 170px;
outline: none;
}
.box li:last-child span {
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
border: 1px solid rgb(223, 225, 231);
background-color: rgb(239, 239, 239);
border-radius: 10px;
transition: all 0.5s linear;
}
.box li:last-child span:hover {
cursor: pointer;
border: 1px solid rgb(198, 226, 255);
background-color: rgb(236, 245, 255);
color: rgb(64, 158, 255);
}
/* 侧边栏 */
.aside {
width: 12%;
height: 1000px;
position: absolute;
top: 0;
left: 0;
background-color: #334157;
padding-top: 160px;
}
.aside h3 {
margin: 2px auto;
font-size: 17px;
height: 30px;
line-height: 30px;
color: #fff;
box-sizing: border-box;
padding-left: 30px;
width: 118%;
}
.son {
width: 192px;
float: left;
}
.son:hover {
cursor: pointer;
}
.son h3:hover {
background-color: rgba(31, 31, 30, 0.356);
}
.son div {
display: none;
box-sizing: border-box;
text-align: center;
background-color: #3341577e;
}
.son div h4 {
color: rgb(252, 215, 10);
margin: 5px 0;
height: 20px;
line-height: 20px;
font-size: 14px;
width: 118%;
}
.son div h4:hover {
background-color: rgba(29, 29, 26, 0.336);
}
/* 头部 */
.header {
width: 100%;
height: 90px;
background-color: #334157;
position: absolute;
top: 0;
left: 0;
}
.header h2 {
color: #fff;
position: absolute;
top: 10px;
left: 230px;
z-index: 1;
display: none;
}
/* 动画 */
.animate {
width: 180px;
height: 40px;
line-height: 40px;
position: absolute;
/* background-color: pink; */
top: 25px;
left: 240px;
font-size: 35px;
font-weight: 700;
color: #fff;
}
.one em {
display: block;
width: 80px;
height: 30px;
line-height: 30px;
font-style: inherit;
position: absolute;
text-align: center;
top: 164px;
left: 1033px;
background-color: rgb(64, 158, 255);
border: 1px solid rgb(239, 239, 239);
border-radius: 10px;
}
.one em:hover {
color: #fff;
cursor: pointer;
background-color: rgb(21, 101, 182);
}
后台管理系统
欢 迎 登 录
公司管理
事务处理
处理进度
人员管理
事务处理
事务处理
事务处理
事务处理
事务处理
事务处理
代码展示
事务处理
事务处理
事务处理
事务处理
事务处理
事务处理
人员业绩
事务处理
事务处理
事务处理
季度业绩
事务处理
事务处理
事务处理
- 部门名称
- 部门代码
- 修改时间
- 修改人
- 确认 取消
- 部门名称
- 部门代码
- 修改时间
- 修改人
- 确认 取消
搜索
添加
- 部门名称
- 部门代码
- 修改时间
- 修改人
操作
- 上海分公司
- 00011
2018-05-18 22:04:51
小小数
编辑
删除
上面就是我写的页面的基本结构和样式!我都使用了简单的注释,不过最重要的是接下来的内容,我们所说的后台管理系统,最重要的是什么?没错就是js的操作。