美文网首页
2020-02-08 简单粗略的用户页

2020-02-08 简单粗略的用户页

作者: 独造之域 | 来源:发表于2020-02-08 22:47 被阅读0次

    首先是页面效果

    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">&#xe7cf;</i><span>添加</span></a>
            <a class="btn-add btn-common font-color-white common-bcolor-blue"><i class="icon iconfont">&#xe7cf;</i><span>删除</span></a>
            <a class="btn-add btn-common font-color-white common-bcolor-waring"><i class="icon iconfont">&#xe7cf;</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">&#xe63c;</span></button>
                <!--<a href="#" class="search-btn"><span class="icon iconfont">&#xe7cf;</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/

    相关文章

      网友评论

          本文标题:2020-02-08 简单粗略的用户页

          本文链接:https://www.haomeiwen.com/subject/chpwxhtx.html