首先是页面效果
userpage.gif
- 添加、删除、编辑 按钮是通过对<a>标签的修饰得到的
- 搜索框 是由<input> 和<button> 标签组合得到的
具体的样式如下代码所示
1、userpage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="../../static/css/common2.css">
<link rel="stylesheet" type="text/css" href="../../static/css/icon/iconfont.css">
<link rel="stylesheet" type="text/css" href="../../static/css/userpage.css">
<script src="../../static/JQuery3.4.1/jquery-3.4.1.min.js"></script>
<!--easyui-->
<link rel="stylesheet" type="text/css" href="../../static/jquery-easyui-1.7.0/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../static/jquery-easyui-1.7.0/themes/icon.css">
<!--<link rel="stylesheet" type="text/css" href="../static/jquery-easyui-1.7.0/demo.css">-->
<script type="text/javascript" src="../../static/jquery-easyui-1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="../../static/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
</head>
<body>
<div class="contain">
<div class="btn-control" >
<a class="btn-add btn-common font-color-white common-bcolor-danger"><i class="icon iconfont"></i><span>添加</span></a>
<a class="btn-add btn-common font-color-white common-bcolor-blue"><i class="icon iconfont"></i><span>删除</span></a>
<a class="btn-add btn-common font-color-white common-bcolor-waring"><i class="icon iconfont"></i><span>编辑</span></a>
</div>
<div class="search-contain">
<div class="search-box">
<!--<label class="username">用户名：</label>-->
<input type="text" class="input-common" placeholder="请输入用户名">
<button type="submit" class="search-btn common-bcolor-blue"><span class="icon iconfont font-color-white"></span></button>
<!--<a href="#" class="search-btn"><span class="icon iconfont"></span></a>-->
</div>
</div>
<div style="text-align: center">
<h3>使用easyui 框架做的表格</h3>
</div>
<div class="user-table">
<table class="user-grid">
</table>
</div>
</div>
</body>
<script src="../../static/js/userpage.js"></script>
<script src="../../static/js/columnsdata/columns.js">
</script>
</html>
2、css 的代码如下
- userpage.css
.btn-control{
padding: 5px;
}
.search-contain{
margin-left: 5px;
}
.user-table{
position:absolute;
width: 100%;
top: 115px;
bottom:0;
}
.user-grid{
width: 99%;
height: 100%;
margin: 0 auto;
background-color:#1f6377;
}
- common2.css
*{
margin: 0px;
padding:0px;
}
.btn-common{
padding:7px;
width:90px;
height: auto;
display: inline-block;
text-align: center;
border-radius: 3px;
}
.btn-common span{
margin-left: 5px;
}
.font-color-white{
color:#fefeff;
}
.font-color-blue{
color:#64a6bd;
}
.font-color-red{
color: #cc2936;
}
.font-color-yellow{
color: #f5cb5c;
}
.common-bcolor-danger{
background-color: #d8534f;
}
.common-bcolor-danger:hover{
background-color: #cc0510;
}
.common-bcolor-blue{
background-color: #64A6BD;
}
.common-bcolor-blue:hover{
background-color: #0775bd;
}
.common-bcolor-waring{
background-color: #f5cb5c;
}
.common-bcolor-waring:hover{
background-color: #f5bf2f;
}
.input-common{
padding: 7px;
width:100%;
border:3px solid #64A6BD;
border-right: none;
text-align: left;
outline:none; /*点击后不会出现外边框*/
}
.search-box{
display: flex;
width: 300px;
position: relative;
}
.search-box a{
padding: 7px;
border: 2px solid #64a6bd;
height: 16px;
width:120px;
}
.search-btn{
height: 36px;
width: 50px;
border: 1px solid #64a6bd;
border-left: none;
border-radius: 0 5px 5px 0;
}
- iconfont.css
由于此段代码是通过 阿里的iconfont 网站处直接下载的，在此就不上传了。
网站地址：https://www.iconfont.cn/
