还不错的Table样式和form表单样式

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

上图：

带鼠标滑动效果的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;}

转载于:https://www.cnblogs.com/nyzhai/archive/2013/06/07/3123540.html

还不错的Table样式和form表单样式相关推荐

如何设置好看的form表单样式_网页开发之表格用法，该如何制作？
表格的主要作用 1 2 3.表格的具体用法: <table> <tr> <td>单元格内的文字td> ... tr> ... table> 1.& ...
elementUI的form表单样式
/*form表单的样式*//deep/ .demo-form-inline {height: 30px;line-height: 30px;margin-left: 43px;//label样式.el ...
element-ui的form表单样式改动
造成下面样式错乱是下面自带的css样式,原本打算通过样式重写在组件内的style,发现下面相应的元素是出于封装情况的,无论样式重写在组件还是在公共样式均不能很好的解决,因为跳转到该页面时都要刷新一次, ...
如何设置好看的form表单样式_Qamp;A| 表单如何设置短信提醒
Hi,大家好,表姐又来给大家答疑解惑啦!这一期的Q&A答疑我们来聊聊表单该如何设置短信提醒. 表单的短信提醒功能非常有用,通过手机短信及时反馈信息,让你实时掌握数据最新动态,不仅可以设置给表单 ...
基于django源码自定义前端form表单样式
在项目中,我们通常会用django中的modelform帮助我们快速生成前端的样式,提升开发效率.但是有时,当我们需要让一些字段,显示一些特殊的样式时,就需要对modelform中的默认样式,手动进行 ...
如何设置好看的form表单样式_微信新样式！微信设置“特效字体”，朋友圈变笑脸，好看！...
阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到文章了.每天都会有分享,都是免费订阅,请您放心关注. [免责声明]本文部分文字 ...
ajax post form上传图片,ajax怎样提交form表单与实现文件上传
这次给大家带来ajax怎样提交form表单与实现文件上传,ajax提交form表单与实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下. 前几天,发现了一些小问题.我在写后台管理页面时,需要 ...
ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
layui删除后刷新表格_layui form表单提交之后重新加载数据表格的方法
如下图,在我们做高级查询的时候需要重新加载数据表格table.reload(); HTML form表单菜单:  JS $(function () { //注意:这里是数据表格的加载数据,必须写 ...

还不错的Table样式和form表单样式

还不错的Table样式和form表单样式相关推荐

最新文章

热门文章