table表格demo

最新推荐文章于 2021-08-02 10:11:39 发布

xixiaixinxin

最新推荐文章于 2021-08-02 10:11:39 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： html&&css

本文链接：https://blog.youkuaiyun.com/xixiaixinxin/article/details/50899010

html&&css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个账号管理系统的网页设计实现，包括账号信息展示、搜索及分页功能等关键元素。通过HTML、CSS和JavaScript实现了响应式的表格布局，方便管理员对账号进行有效管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*{margin: 0;padding: 0;}
body{font-family: '方正兰亭黑','微软雅黑','黑体';color: #43596e;;font-size:15px;}
/*table*/
table{}
.input_1{
    margin-right: 210px;height: 38px;width: 300px;border-radius: 5px;
    filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;font-size: 140%;
    background: url("../img/search-icon.png") no-repeat 16px 6px;
/*    background-color:#0088b3;*/
    background-size: 9% 65%;
    border: 1px solid #8791a2;
    }
a{text-decoration: none;}
.product{font-size:15px;color: #8791a2}
.productList{font-size: 18px;height: 74px;}
.productList_1{float: left;padding-top:0px;}
.productList_2{float: right;padding-top:0px;}
.productList_2 .productBg_1{background: url("../img/icon-new.png") no-repeat 0}
.productList_2 .productBg_2{background: url("../img/icon-new.png") no-repeat 0}
/*下边框*/
tr{border-bottom: 1px solid #0000ff;}
td{padding: 10px 14px 10px 14px;}
.col{color: #0088b3;}
.weizhifu{color: #d7857e;}
.right_1{float: right;}
.col img{background-color:#0088b3; }
.titleCol01{background: #e5e9e9;text-align: center;}

.titHover{text-align: center;}
tr,td{border:1px solid #0000ff;}

/*分页*/
.fenye{display: block;}
.fenye{float: left;}
.fenye_p{float: right;}
.firstF{border:1px solid #e5e9e9;width: 15px;height: 15px;}
.fenye_1{border: 1px solid #e5e9e9;padding: 0 6px 0 6px;}
.fenye_1:hover{background: #dcdcdc}
.fenye_1 a{color: #8791a2;}

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="../js/jquery.min.js"></script>

</script>
</head>
<body>
<table cellspacing="1px" bordercolor="#e5e9e9" style="border-collapse:collapse">
 <tr>
 <td style="font-size: 16px;">账号管理</td>
 <td colspan="3"><input class="input_1" style="font-size: 15.5px;" name="find" type="text"
 placeholder=
 输入账号/部门/职位/职责进行查询></td>
 <td colspan="5">
     <a style="color: #0088b3" href="#">新建产品</a>       
     <a style="color: #0088b3" href="#">导出文档  </a>
 </td>
 </tr>
 <tr class="titleCol01">
 <td class="order_1">账号</td>
 <td class="order_2">所属部门</td>
 <td class="order_1">职位</td>
 <td class="order_3">账号职责</td>
 <td class="order_3">权限</td>
 <td class="order_1">联系电话</td>
 <td class="order_3">密码</td>
 <td class="right">操作</td>
 </tr>
 <tr class="titHover">
 <td class="col">Admin</td>
 <td>软件开发二部</td>
 <td>-</td>
 <td>全部</td>
 <td>全部</td>
 <td>0521-88888888</td>
 <td>0*****0</td>
 <td class="right"><a onclick="del()" href="#"><img src="../img/table-btn01.png"></a>
 <a href="#"><img src="../img/table-btn02.png"></a></td>
 </tr>

<tr class="titHover">
 <td class="col">Admin</td>
 <td>软件开发二部</td>
 <td>-</td>
 <td>全部</td>
 <td>全部</td>
 <td>0521-88888888</td>
 <td>0*****0</td>
 <td class="right"><a onclick="del()" href="#"><img src="../img/table-btn01.png"></a>
 <a href="#"><img src="../img/table-btn02.png"></a></td>
 </tr>

<tr class="titHover">
 <td class="col">Admin</td>
 <td>软件开发二部</td>
 <td>软件工程师</td>
 <td>全部</td>
 <td>全部</td>
 <td>0521-88888888</td>
 <td>0*****0</td>
 <td class="right"><a onclick="del()" href="#"><img src="../img/table-btn01.png"></a>
 <a href="#"><img src="../img/table-btn02.png"></a></td>
 </tr>
 
 <tr style="border-bottom: none">
 <td colspan="8">
 
 首页    
 上一页  
 <a href="#">1</a>
 <a href="#">2</a>
 <a href="#">3</a>