简单实用的网页表格特效_javascript技巧

一、彩色虚线表格

线

二、鼠标指向单元格变色

onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'">单元格变色
onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFccaa'">单元格变色

三、立体表格

立体 表格

四、表格嵌套
1、利用表格的间距来做嵌套

嵌套 嵌套 嵌套

2、充分利用根据表格对齐的方式

表格对齐
表格对齐
表格对齐

五、半透明表格

透明

六、阴影表格

111 222 333
时间: 2024-10-07 02:04:14

简单实用的网页表格特效_javascript技巧的相关文章

简单实用的网页表格特效

网页 在我们制作主页的过程中,用到表格的地方非常多,灵活运用表格技巧可以为我们的网页增色不少,这里我就详细介绍几中特效表格的制作方法. 一.彩色虚线表格<style type="text/css"><!--.tab1 {border-top-width: thin;border-right-width: thin;border-bottom-width: thin;border-left-width: thin;border-top-style: dotted;bor

分享几种比较简单实用的JavaScript tabel切换_javascript技巧

闲着没事,随便写了个简单的JavaScript tabel切换,大家有兴趣的看看,有需要的就拿去吧.废话不说了,大家看代码吧 方法一:for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换</title> <style type="te

用javascript判断IE版本号简单实用且向后兼容_javascript技巧

今天一个项目中需要判断IE版本号,又因为 jQuery 2.0 去除了对浏览器版本号的判断(它推荐特性检测),于是就看到一老外写的一段代码: 复制代码 代码如下: var _IE = (function(){ var v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i'); while ( div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i

网页图片特效小技巧

技巧|特效|图片特效|网页 这几个网页图片特效小技巧基本主要利用了一些鼠标控制语句.css滤镜代码,加上简单的javascript语句实现的,简单有趣,可以作为帮助一些朋友javascript入门的小例子. 图片循环渐显渐隐 效果描述:图片循环渐显渐隐-- 实现方法: 1.把如下代码加入<body>区域中: <img src="http://www.webjx.com/htmldata/2005-05-25/image1.gif" name="u"

JS实现简单面向对象的颜色选择器实例_javascript技巧

本文实例讲述了JS实现简单面向对象的颜色选择器.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

JavaScript实现通过select标签跳转网页的方法_javascript技巧

本文实例讲述了JavaScript实现通过select标签跳转网页的方法.分享给大家供大家参考,具体如下: 我们经常有遇到需要用select标签跳转到新网页的情况,dw生成的代码太复杂,那么有没有精简的代码得以实现呢?经过仔细的研究找到了以下几段代码,非常不错. 话不多说,直奔主题. 当面跳转的核心代码是:"location.href=value" 新页面打开的核心代码是:"window.open()" 代码分四类: 1.当前页面直接跳转: <select n

JS简单测试循环运行时间的方法_javascript技巧

本文实例讲述了JS简单测试循环运行时间的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>JS 测试循环运行的时间</title> <script> var arr = []; var max = 10000000; //加载 window.addE

原生JS简单实现ajax的方法示例_javascript技巧

本文实例讲述了原生JS简单实现ajax的方法.分享给大家供大家参考,具体如下: HTML部分: <body> <input type="button" value="Ajax提交" onclick="Ajax();" /> <div id="resText" ></div> </body> 这里有个input按钮,点击会触发click事件,click事件调用Ajax(

PHP实现简单实用的分页类代码_php技巧

本文实例讲述了PHP实现简单实用的分页类.分享给大家供大家参考,具体如下: <?php class Page { private $total; //总记录 private $pagesize; //每页显示多少条 private $limit; //limit private $page; //当前页码 private $pagenum; //总页码 private $url; //地址 private $bothnum; //两边保持数字分页的量 //构造方法初始化 public funct