繁體中文当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > 简单实用的网页表格特效
- Dreamweaver
- Dreamweaver MX进阶教程（十八）使用css样式制作细线表格
- Dreamweaver MX进阶教程（二十二）制作反馈表单（email发送）
- Dreamweaver MX进阶教程（二十）使用一象素透明图像固定单元格宽度
- Dreamweaver MX进阶教程（十一）使用“层”布局网页
- Dreamweaver MX进阶教程（十四）使用server-side include（服务器端包括）
- Dreamweaver MX进阶教程（十五）插入具有辅助功能的表格
- Dreamweaver MX进阶教程（十九）防止英文字符撑破表格
- Dreamweaver MX进阶教程（十七）设置表格的属性
- Dreamweaver MX进阶教程（十二）在居中页面使用层
- DW MX 设计留言本实战(1)
- DW MX 设计留言本实战(4)
- DreamWeaver,经典50问(9)
- DreamWeaver,经典50问(8)
- DreamWeaver,经典50问(7)
- DreamWeaver,经典50问(3)
- DreamWeaver,经典50问(10)
- DreamWeaver,经典50问(4)
- DreamWeaver,经典50问(6)
- 巧用背景颜色和间距快速制作出细边线表格
- DW MX 2004代码编辑新功能
Dreamweaver 中的 简单实用的网页表格特效
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-23 浏览: 59 ::
收藏到网摘: n/a
一、彩色虚线表格
＜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＞
＜table width="200" border="0" cellpadding="2" cellspacing="2" class="tab1"＞
＜tr＞
＜td＞＜div align="center"＞虚＜/div＞＜/td＞
＜td＞＜div align="center"＞线＜/div＞＜/td＞
＜/tr＞
＜tr＞
＜td＞＜div align="center"＞表＜/div＞＜/td＞
＜td＞＜div align="center"＞格＜/div＞＜/td＞
＜/tr＞
＜/table＞
二、鼠标指向单元格变色
onmouseout="this.style.backgroundColor=''" 鼠标离开效果onmouseover="this.style.backgroundColor='#FFcccc'"鼠标放上去的效果，
可以修改#FFcccc的值来改变颜色
＜table width="200" border="1" cellspacing="0" cellpadding="0"＞
＜tr＞
＜td onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'"＞ ＜/td＞
＜/tr＞
＜tr＞
＜td onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFccaa'"＞ ＜/td＞
＜/tr＞
＜/table＞
评论 (0) All
