列表页面（html+css+js）

html文件

	
		
		
		
		
	
	
		

			用户名
			用户名
			用户名
			查询
			新增
		
		

			

				

					
asfd
					
asfd
					
asfd
					
asfd
					
asfd
					
操作
				
			
			

				
asfd
				
asfd
				
asfd
				
asfd
				
asfd
				

					修改
					删除
				
			
			

				
asfd
				
asfd
				
asfd
				
asfd
				
asfd
				

					修改
					删除
				
			
			

				
asfd
				
asfd
				
asfd
				
asfd
				
asfd
				

					修改
					删除
				
			
			

				
asfd
				
asfd
				
asfd
				
asfd
				
asfd
				

					修改
					删除
				
			
		
		

			

				首页
				上一页
				下一页
				尾页
				
				转
			
		
	

css文件

*{
	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;
}