列表页面（html+css+js）
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="condition">
用户名<input type="text"/>
用户名<input type="text"/>
用户名<input type="text"/>
<button>查询</button>
<button onclick="window.location.href='add.html'">新增</button>
</div>
<table border="1" class="tablelist">
<thead>
<tr>
<th>asfd</th>
<th>asfd</th>
<th>asfd</th>
<th>asfd</th>
<th>asfd</th>
<th width="120px">操作</th>
</tr>
</thead>
<tr>
<td>asfd</td>
<td>asfd</td>
<td>asfd</td>
<td>asfd</td>
<td>asfd</td>
<td>
<button class="edit">修改</button>
<button class="remove">删除</button>
</td>
</tr>
<tr>
<td>asfd</td>
<td>asfd</td>
<td>asfd</td>
<td>asfd</td>
<td>asfd</td>
<td>
<button class="edit">修改</button>
<button class="remove">删除</button>
</td>
</tr>
<tr>
<td>asfd</td>
<td>asfd</td>
<td>asfd</td>
<td>asfd</td>
<td>asfd</td>
<td>
<button class="edit">修改</button>
<button class="remove">删除</button>
</td>
</tr>
<tr>
<td>asfd</td>
<td>asfd</td>
<td>asfd</td>
<td>asfd</td>
<td>asfd</td>
<td>
<button class="edit">修改</button>
<button class="remove">删除</button>
</td>
</tr>
</table>
<table class="page">
<td>
<button>首页</button>
<button>上一页</button>
<button>下一页</button>
<button>尾页</button>
<input type="text" class="page-no" name="pageNo"/>
<button>转</button>
</td>
</table>
</body>
</html>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;
}手机扫一扫
移动阅读更方便
你可能感兴趣的文章