作为一个后台开发人员而言，拥有一套属于自己的前台样式是比较重要的，这里分享一下自己感觉还不错的样式，以后遇到好的，还会陆续添加

上图：

带鼠标滑动效果的table样式看起来比较清爽

样式

<head runat="server">

    <title></title>

    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <style type="text/css">

        .t1

        {

            clear: both;

            border: 1px solid #c9dae4;

        }

        .t1 tr th

        {

            color: #0d487b;

            background: #f2f4f8 url(../CSS/Table/images/sj_title_pp.jpg) repeat-x left bottom;

            line-height: 28px;

            border-bottom: 1px solid #9cb6cf;

            border-top: 1px solid #e9edf3;

            font-weight: normal;

            text-shadow: #e6ecf3 1px 1px 0px;

            padding-left: 5px;

            padding-right: 5px;

        }

        .t1 tr td

        {

            border-bottom: 1px solid #e9e9e9;

            padding-bottom: 5px;

            padding-top: 5px;

            color: #444;

            border-top: 1px solid #FFFFFF;

            padding-left: 5px;

            padding-right: 5px;

            word-break: break-all;

        }

        /* white-space:nowrap; text-overflow:ellipsis; */

        tr.alt td

        {

            background: #ecf6fc; /*这行将给所有的tr加上背景色*/

        }

        tr.over td

        {

            background: #bcd4ec; /*这个将是鼠标高亮行的背景色*/

        }

    </style>

    <script type="text/javascript">

        $(document).ready(function () { //这个就是传说的ready

            $(".t1 tr").mouseover(function () {

                //如果鼠标移到class为stripe的表格的tr上时，执行函数

                $(this).addClass("over");

            }).mouseout(function () {

                //给这行添加class值为over，并且当鼠标一出该行时执行函数

                $(this).removeClass("over");

            }) //移除该行的class

            $(".t1 tr:even").addClass("alt");

            //给class为stripe的表格的偶数行添加class值为alt

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <table width="100%" id="ListArea" border="0" class="t1" align="center" cellpadding="0"

        cellspacing="0">

        <tr align="center">

            <th>

                编号

            </th>

            <th>

                名称

            </th>

            <th>

                人数

            </th>

            <th>

                任务

            </th>

            <th>

                职能

            </th>

        </tr>

        <tr align="center">

            <td>

                1234

            </td>

            <td>

                aaaa

            </td>

            <td>

                aaaaa

            </td>

            <td>

                aaaaa

            </td>

            <td>

                aaaaa

            </td>

        </tr>

        <tr align="center">

            <td>

                1234

            </td>

            <td>

                aaaa

            </td>

            <td>

                aaaaa

            </td>

            <td>

                aaaaa

            </td>

            <td>

                aaaaa

            </td>

        </tr>

        <tr align="center">

            <td>

                1234

            </td>

            <td>

                aaaa

            </td>

            <td>

                aaaaa

            </td>

            <td>

                aaaaa

            </td>

            <td>

                aaaaa

            </td>

        </tr>

        <tr align="center">

            <td>

                1234

            </td>

            <td>

                aaaa

            </td>

            <td>

                aaaaa

            </td>

            <td>

                aaaaa

            </td>

            <td>

                aaaaa

            </td>

        </tr>

        <tr align="center">

            <td>

                1234

            </td>

            <td>

                aaaa

            </td>

            <td>

                aaaaa

            </td>

            <td>

                aaaaa

            </td>

            <td>

                aaaaa

            </td>

        </tr>

        <tr align="center">

            <td>

                1234

            </td>

            <td>

                aaaa

            </td>

            <td>

                aaaaa

            </td>

            <td>

                aaaaa

            </td>

            <td>

                aaaaa

            </td>

        </tr>

    </table>

    </form>

</body>

表单图片

样式：

/*表单样式*/

.f1{ float:left; width:100%;}

.t2 { clear:both; /*border-collapse: collapse;*/ border: 1px solid #c9dae4; }

.t2 tr th { color:#000; padding: 5px 0px 5px 10px; border-bottom: 1px solid #e6e6e6; font-weight: normal; background: #f7fafc; text-align:left; border-right: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; }

.t2 tr td{ border-bottom: 1px solid #e6e6e6; padding: 5px 0px 5px 10px; line-height:22px; word-break:break-all;}

.t2 tr th em, .t2 tr td em{ font-weight:bold; color:Red;}

还不错的Table样式和form表单样式的更多相关文章

  1. element-ui的form表单样式改动

    造成下面样式错乱是下面自带的css样式,原本打算通过样式重写在组件内的style,发现下面相应的元素是出于封装情况的,无论样式重写在组件还是在公共样式均不能很好的解决,因为跳转到该页面时都要刷新一次, ...

  2. yii2的form表单样式怎么灵活控制呢？

    <?php $form = ActiveForm::begin(['id' => 'login-form', 'fieldConfig'=>[ 'template'=> &qu ...

  3. css form表单样式清除

    开发项目中表单常用的清楚样式: 1.改变placeholder默认字体颜色 ::-webkit-input-placeholder{color: #333;} :-moz-placeholder{co ...

  4. form表单样式

    <BODY> <div id="modify-data"> <form class="modify-data-form"> ...

  5. bootstrap简单form表单样式-form-horizontal

    jsp代码: <div id="content" style="background-color: white;"> <form class= ...

  6. Ajax提交Form表单及文件上传

    刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...

  7. Django的Form表单验证

    Form(from django import forms) 简短理解:后端提供了一个类:from django import forms,继承此类定义子类.子类中定义和form表单中提交到name名 ...

  8. HTML之表格标签和form表单

    表格标签: table 一般用于信息展示 tr行 td文本单元格 th标题单元格(文本加粗) table属性: cellspacing:单元格间距,一般设置为0 cellpadding:文字到边框的距 ...

  9. vue3 element-plus 配置json快速生成form表单组件，提升生产力近600%（已在公司使用，持续优化中）

    ️本文为博客园社区首发文章,未获授权禁止转载 大家好,我是aehyok,一个住在深圳城市的佛系码农‍♀️,如果你喜欢我的文章,可以通过点赞帮我聚集灵力️. 个人github仓库地址: https:gi ...

随机推荐

  1. kuangbin专题 专题九 连通图 POJ 3177 Redundant Paths

    题目链接:https://vjudge.net/article/371?tdsourcetag=s_pcqq_aiomsg 题目:给定一个连通图,题目说,任意两个点至少有一条路线可以相互到达, 为保证 ...

  2. MRAM技术进入汽车应用

    在整个地址空间范围内读写各种类型的数据.通常MRAM的操作和时序类似于32位微控制器的规范和时序.与DLFASH相比,当今的非易失性存储器可以接受MRAM设备的性能和吞吐量. 与当今的DFLASH相比 ...

  3. 【算法】——递归：小白正在上楼梯，楼梯有n阶台阶，小白一次可以上1阶，2阶或者3阶，实现一个方法，计算小白有多少种走完楼梯的方式。

    分析:从最后一步分析,能有的情况有三种情况构成,写出如图所示的方程 //和斐波拉契相似 int void f(int n) { //考虑出口 ) ;//正常思路是返回0 ) ;//通过自己想可以得出只 ...

  4. 使用TableHasPrimaryKey或TableHasForeignKey来知道表是否有主键或外键

    从下面2句SQL语句执行来看, 就知道那一张表有主键PrimaryKey或ForeignKey. 比如,表[Q]和[QQ]既没有主键,也没有外键. 当在SQL语句的条件中,使用“=”,那说明查询出来的 ...

  5. 数据结构(集合)学习之Collection和Iterator

    集合 1.集合与数组 数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使 ...

  6. 一起学Vue之事件处理

    在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发 ...

  7. 【转】Servlet 九大对象和四个作用域

    隐式对象 说明 request 转译后对应HttpServletRequest/ServletRequest对象 response 转译后对应HttpServletRespons/ServletRes ...

  8. Linux查看系统硬件信息命令

    Linux查看系统硬件信息命令 查看磁盘类型(是否SSD) cat /sys/block/sda/queue/rotational code:0 SSD盘 code:1 SATA盘 查看物理CPU个数 ...

  9. sqlmap注入基本教程

    附上一个别人总结的:https://www.cnblogs.com/ichunqiu/p/5805108.html 一套基础的sqlmap语句: python sqlmap.py -u "h ...

  10. Docker常用命令和功能介绍

    可以搜索 dockerfile 定制创建一个redis镜像image 表示镜像docker search 搜索镜像的名称和标签docker 所在目录/var/lib/dockerdocker的镜像文件 ...