使用jquery仿写后台管理系统，简单清楚！

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的操作。