<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.menux p').click(function(){
$(this).siblings('ul').slideUp(200);
$(this).next('ul').slideToggle(200);
});
$('.menux ul a').click(function(){
$('iframe').attr("src",$(this).attr("url"));
$('.menu_title').html($(this).attr("title"));
});
})
</script>
</head>
<body>
<div class="header">
<div class="user"></div>
</div>
<div class="left">
<div class="title">系统功能</div>
<div class="menux">
<p>功能名称</p>
<ul>
<li><a href="javascript:void(0);" url="list.html" title="子功能1">子功能1</a></li>
<li><a href="javascript:void(0);" url="2.html" title="子功能2">子功能2</a></li>
<li><a href="javascript:void(0);" url="3.html" title="子功能3">子功能3</a></li>
</ul>
<p>功能名称</p>
<ul>
<li><a href="1.html">子功能1</a></li>
<li><a href="2.html">子功能2</a></li>
<li><a href="3.html">子功能3</a></li>
</ul>
<p>功能名称</p>
<ul>
<li><a href="1.html">子功能1</a></li>
<li><a href="2.html">子功能2</a></li>
<li><a href="3.html">子功能3</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="location">
<span class="menu_title">用户管理</span>
</div>
<iframe src="add.html" width="100%" height="90%" frameborder="0px"></iframe>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
font-size: 14px;
font-family: "microsoft yahei";
}
body{
background-color: #f8f8f8;
}
.header{
height: 70px;
background-color: #2196F3;
}
.left{
position: absolute;
top: 70px;
bottom: 0px;
left: 0px;
width: 200px;
float: left;
border: 1px solid #e1e1e1;
}
.left .title{
height: 48px;
line-height: 48px;
background-color: #e9e9e9;
border-bottom: 1px solid #E1E1E1;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.menux p{
height: 40px;
line-height: 40px;
background-color: #f8f8f8;
border-bottom: 1px solid #E1E1E1;
text-align: center;
}
.menux p:hover{
background-color: #2196F3;
color: white;
/* cursor: pointer; */
}
.menux ul{
list-style: none;
display: none;
}
.menux ul li{
line-height: 36px;
height: 36px;
border-bottom: 1px dotted #cccccc;
box-sizing: border-box;
}
.menux ul li a{
display: block;
padding-left: 50px;
color: black;
text-decoration: none;
}
.menux ul li a:hover{
background-color: #f7f2ff;
color: #467FE6;
cursor: pointer;
}
.main{
position: absolute;
top: 70px;
bottom: 0px;
left: 210px;
right: 0px;
float: right;
}
.location{
height: 40px;
line-height: 40px;
background-color: white;
border-bottom: 1px solid #E1E1E1;
border-right: 1px solid #E1E1E1;
border-left: 1px solid #E1E1E1;
padding-left: 10px;
box-sizing: border-box;
}
.condition{
background-color: #FFFFFF;
border: 1px solid #E1E1E1;
margin-top: 10px;
padding: 10px 5px;
color: #666666;
}
.condition input{
height: 25px;
border: 1px solid #E0E0E0 ;
border-radius: 4px;
}
.condition button{
margin-right: 10px;
background-color: #467fe6;
color: white;
border:1px solid #e0e0e0;
padding: 5px 5px;
font-size: 12px;
border-radius: 5px;
cursor: pointer;
}
.condition button:hover{
background-color: #2196F3;
}
.tablelist{
width: 100%;
border: 1px solid e0e0e0;
margin-top: 10px;
background-color: white;
border-collapse: collapse;
}
.tablelist th,td{
height: 30px;
border: 1px solid e0e0e0;
}
.tablelist th{
background-color: #F8F8F8;
}
.tablelist td{
padding:0px 2px;
}
.tablelist .edit{
color: #2196F3;
}.tablelist .remove{
color: #ff254d;
}
.tablelist .edit,.tablelist .remove{
background-color: transparent;
border: 1px solid transparent;
cursor: pointer;
margin: 5px;
}
.tablelist tr:nth-child(odd){
background-color: #FFFFFF;
}
.tablelist tr:nth-child(even){
background-color:S #F8F8F8;
}
.tablelist tr:hover{
background-color: #467FE6;
}
.page{
width: 100%;
border-bottom: 1px solid e0e0e0;
border-right: 1px solid e0e0e0;
border-top: 1px solid e0e0e0;
background-color: white;
border-collapse: collapse;
height: 35px;
padding-left:20px ;
}
.page button{
margin-right: 10px;
background-color: #467fe6;
color: white;
border:1px solid #e0e0e0;
padding: 3px 5px;
font-size: 12px;
border-radius: 5px;
cursor: pointer;
}
.page button:hover{
background-color: #2196F3;
}
.page-no{
width: 40px;
border-radius: 4px;
border: 1px solid #E1E1E1;
}
.add{
position: absolute;
border:1px solid #e0e0e0;
background-color: #FFFFFF;
bottom: 0px;
top: 10px;
right: 0px;
left: 0px;
}
.tableadd{
width: 100%;
margin: auto;
margin-top: 20px;
}
.tableadd td{
height: 35px;
padding-left: 2px;
color: #666666;
}
.tableadd td input{
height: 25px;
border: 1px solid #E0E0E0 ;
border-radius: 4px;
}
.tableadd td button{
margin-right: 10px;
background-color: #467fe6;
color: white;
border:1px solid #e0e0e0;
padding: 3px 5px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
