<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
body{
}
span{
width:182px
height:102px
display:block
float:left
border:1px solid #87cefa
border-right-color:#ffffff
line-height:102px
text-align:center
}
span.last{
border-right-color:#87cefa
}
span:hover{
border-color:#1e90ff
}
span:hover + span{
border-left-color:#ffffff
}
</style>
</head>
<body>
<span>你好</span>
<span>你好</span>
<span>你好</span>
<span class="last">你好</span>
</body>
</html>
你的html头部写的不太规范，会容易出错的，最好用个dw编辑器，可以自动生成头部，还有现在很少把代码直接写在html标签里了。
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>表格效果</title>
<style type="text/css">
.highlight
{
background-color: red
}
.selected
{
background-color: blue
}
.style1
{
width: 247px
}
.tr_w{background-color: white }
.tr_g{background-color: #808080 }
</style>
<script src="JS/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("tr").click(function () {
$(this).toggleClass("selected")
})
$("tr").hover(
function () { $(this).removeClass("tr_g tr_w").addClass("highlight") },
function () { if(!$(this).hasClass("selected")){table_tr()$(this).removeClass("highlight")} }
)
table_tr()
})
function table_tr(){
$("tr:odd").addClass("tr_g") //先排除第一行,然后给奇数行添加样式
$("tr:even").addClass("tr_w") //先排除第一行,然后给偶数行添加样式
}
</script>
</head>
<body>
<div id="main">
<table border="1" style="height: 79px width: 827px" >
<tr>
<td>
12
</td>
<td>
12
</td>
<td >
12
</td>
</tr>
<tr>
<td>
12
</td>
<td>
12
</td>
<td >
12
</td>
</tr>
</table>
</div>
</body>
</html>
给你改了点样式，和修改了一点js代码
1、新建一个html文件，命名为test.html，用于讲解css中怎么设置表格的背景颜色。2、在test.html文件内，使用table标签创建一个表格，用于测试。
3、在test.html文件内，设置table标签的class属性为jjone。
4、在css标签内，通过class设置表格的样式，设置表格的宽度为400px。
5、在css标签内，再将background属性设置为gray，即将背景色设置为灰色。
6、在浏览器打开test.html文件，查看实现的效果。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）