css彩色虚线表格及JS鼠标指向单元格变色制作方法
作者:黄明华 来源:天极设计在线 时间:2007-08-10 13:08:00
在我们制作主页的过程中,用到表格的地方非常多,灵活运用表格技巧可以为我们的网页增色不少,这里我就详细介绍CSS彩色虚线表格及JS鼠标指向单元格变色制作方法
一、CSS彩色虚线表格
<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;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: #00CC66;
border-right-color: #0099CC;
border-bottom-color: #FF0000;
border-left-color: #6699FF;
}
-->
</style>
<p> </p>
<table width="230" border="0" cellpadding="2" cellspacing="2" class="tab1" align=center>
<tr>
<td><div align="center">asp之家</div></td>
<td><div align="center">虚线</div></td>
</tr>
<tr>
<td><div align="center">样式</div></td>
<td><div align="center">Aspxhome.com</div></td>
</tr>
</table>
运行效果图如下:
二、JS鼠标指向单元格变色
onmouseout="this.style.backgroundColor=''" 鼠标离开效果onmouseover="this.style.backgroundColor='#FFcccc'" 鼠标放上去的效果,
如果想让鼠标点击时改变单元格背景色可以这么写
onclick="this.style.backgroundColor='#FFcccc'"
可以修改#FFcccc的值来改变颜色
<table width="227" border="1" cellspacing="0" cellpadding="0" align=center>
<tr>
<td onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'" height=30>鼠标指向单元格变色</td>
</tr>
<tr>
<td onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFccaa'" height=30>asp之家,Aspxhome.com</td>
</tr>
</table>
运行效果如下:
标签:虚线,单元格变色,css
0
投稿
猜你喜欢
交互设计模式(二)-Pagination(分页,标记页数)
2009-08-03 13:37:00
Firefox插件推荐:CSS Usage
2009-10-26 18:44:00
手工打造极酷的分离式滑动门导航菜单
2009-05-25 20:11:00
Web Forms 2.0
2008-07-24 12:47:00
ASP常见数学函数 Abs Atn Cos 等详解
2008-05-28 12:33:00
ASP处理XSLT转换XML的实现
2008-10-20 18:37:00
ASP实现文件直接下载
2008-11-19 15:39:00
SQL Server 2005中数据库镜像的四个问题
2009-02-19 16:48:00
CSS网页布局编码小技巧整理
2009-12-30 16:50:00
从传文件功能看本地化
2009-12-29 13:03:00
FrontPage2002简明教程一:安装与界面
2008-08-17 11:04:00
微软建议的ASP性能优化28条守则(5)
2008-02-27 13:54:00
设计和布局之间的思考
2008-10-09 13:06:00
视觉注意力—解剖设计的根源
2010-01-22 15:12:00
MySQL Dump/Restore
2010-10-14 13:49:00
交互设计的方法
2010-08-18 12:32:00
解析SQL Server中数据库快照的工作原理
2009-02-19 17:04:00
《JavaScript语言精粹》译者序及样章试读
2009-04-03 11:38:00
asp中用insert into语句向数据库插入记录(添加信息)的方法
2011-02-05 10:46:00
获取mssql的xml返回结构的方法
2007-08-23 12:52:00