千喜网络 ---网站建设帮助 ---DIV+CSS语言程序
CSS实现表格行鼠标滑过高亮显示
发布时间:2012-12-4 1:26:31 阅读次数:
直入正题,现在有这么一个表格:
请实现移到交易内容区域时,高亮当前行背景的效果。
1、建立一分标准的HTML文档结构
谈到标准HTML结构,有人可能会说,嗯,用div标签,里面再多套些li,最后用css来个float也就能排成这样的结构了。其实真正标准的结构并不是说一定要用div来布局,而是要尽量使用语义化的HTML标签。在HTML标签的定义中div与span其实是两个没有语义的标签,table则有数据表的语义。
所以这里我们来建一张符合XHTML 1.0 Strict标准的文档结构试试。以下为该表结构的HTML代码:
其中需要注意的是:
你需要使用<thead />、<tbody />、<tfoot />等标签,分别对应的含义是表头区域,表主体内容,表底部区域。
表头区域的单元格你应该使用<th />而非<td />
<tfoot />标签块应该在<thead />与<tbody />之间,否则无法通过W3C标签验证
再给它们加上样式:
.tableList {
border:2px #666 solid;
}
.tableList td, .tableList th {
border:1px #666 solid;
padding:5px 25px;
}
.tableList tfoot td {
text-align:right;
}
.fastpayIcon {
background:transparent url(http://img.alipay.com/pimg/icon_fastpay16.gif) no-repeat scroll 5px 5px;
}
网站关键词:千喜网络 云主机租用 服务器托管 CDN加速 虚拟主机 网站空间 域名注册 企业邮局 数据库
上一章:CSS下拉菜单的制作 下一章:CSS控制图片成比例缩放