还不错的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;}
还不错的Table样式和form表单样式的更多相关文章
- element-ui的form表单样式改动
造成下面样式错乱是下面自带的css样式,原本打算通过样式重写在组件内的style,发现下面相应的元素是出于封装情况的,无论样式重写在组件还是在公共样式均不能很好的解决,因为跳转到该页面时都要刷新一次, ...
- yii2的form表单样式怎么灵活控制呢？
<?php $form = ActiveForm::begin(['id' => 'login-form', 'fieldConfig'=>[ 'template'=> &qu ...
- css form表单样式清除
开发项目中表单常用的清楚样式: 1.改变placeholder默认字体颜色 ::-webkit-input-placeholder{color: #333;} :-moz-placeholder{co ...
- form表单样式
<BODY> <div id="modify-data"> <form class="modify-data-form"> ...
- bootstrap简单form表单样式-form-horizontal
jsp代码: <div id="content" style="background-color: white;"> <form class= ...
- Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
- Django的Form表单验证
Form(from django import forms) 简短理解:后端提供了一个类:from django import forms,继承此类定义子类.子类中定义和form表单中提交到name名 ...
- HTML之表格标签和form表单
表格标签: table 一般用于信息展示 tr行 td文本单元格 th标题单元格(文本加粗) table属性: cellspacing:单元格间距,一般设置为0 cellpadding:文字到边框的距 ...
- vue3 element-plus 配置json快速生成form表单组件，提升生产力近600%（已在公司使用，持续优化中）
️本文为博客园社区首发文章,未获授权禁止转载 大家好,我是aehyok,一个住在深圳城市的佛系码农♀️,如果你喜欢我的文章,可以通过点赞帮我聚集灵力️. 个人github仓库地址: https:gi ...
随机推荐
- Erlang/Elixir精选-第6期(20200113)
精选文章 Implementing languages on the Erlang VM. -Robert Virding. 因为视频没有显示PPT,PPT可以在点击这里下载. leex - lexi ...
- 深入浅出 .NET C# 反射技术
反射这个词听起来就很牛逼是吧? 嗯的确,反射是比较高级的特性,只有语言基础很扎实的Dev们才应该使用它. 搞点反射,可以提高程序的灵活性.可扩展性.耦合度. 反射这东西,是为了动态地运行时加载,相比于 ...
- window10家庭版解决IIS中万维网服务的安全性中无Windows身份验证
首先在左下角输入cmd搜索->命令提示符->以管理员身份运行->然后复制下面一段命令: dism /online /norestart /add-package:%SystemRoo ...
- opencv —— resize、pyrUp 和 pyrDown 图像金字塔（高斯金字塔、拉普拉斯金字塔）与尺寸缩放（向上采样、向下采样）
我们经常会将某种尺寸的图像转化为其他尺寸的图像,如果需要放大或者缩小图像的尺寸,在 OpenCV 中可以使用如下两种方法: resize 函数,最直接的方法. pyrUp 和 pyrDown 函数,即 ...
- 通过/dev/mem操作物理内存
/dev/mem设备可以用来访问物理内存.下面一段应用程序的代码,实现了通过/dev/mem对物理内存空间中SRAM1的访问. #include <stdio.h> #include &l ...
- 剑指offer-面试题48-最长不含重复字符的子字符串-动态规划
/* 题目: 最长不含重复字符的子字符串. */ /* 思路: f(i) = f(i-1) + 1,(未出现过当前字符,distance > f(i-1) distance,当前字符和上一次出现 ...
- Selenium实战（四）——unittest单元测试2（断言方法+discover()多测试用例的执行）
一.断言方法 方法 检查 版本 assertEqual(a,b) a==b assertNotEqual(a,b) a!=b assertTrue(x) bool(x) is True a ...
- STL-deque 双端数组简析
#include <iostream> #include <deque> using namespace std; int main() { // 插入 deque<in ...
- linux（服务器）如何确认网卡（网口）对应的配置文件
服务器装完系统就要配置网络,然而服务器经常是多网卡多网口,我们在某个网口插上网线后,到/etc/sysconfig/network-scripts/下配置ip时无法确定网口对应的配置文件.(比如是et ...
- pygame 运行心理学问卷
import pygame import sys from pygame.locals import * # wait for keys to putdown def waitForKeys(keys ...