<html><head><title></title>
<style>
*{margin:0;padding:0}
#aa{float:left;}
ul{
float:left;
list-style:none;
width:700px;
}
li{
float:left;
width:140px;
height:20px;
border-top:1px solid #000;
border-left:1px solid #000;
}
#lastL li{
border-bottom:1px solid #000;
}
.lastL{
border-right:1px solid #000;
}
</style>
<script language="javascript">
function jj(){
var r=aa.getElementsByTagName("ul").length
for(i=0;i<r;i++){
document.getElementById("aa").getElementsByTagName("ul")[i].onmouseover=a1
document.getElementById("aa").getElementsByTagName("ul")[i].onmouseout=a2
}
}
function a1(){
this.style.background="gainsboro"
}
function a2(){
this.style.background="#fff"
}
</script>
</head>
<body onload="jj()">
<div id="aa">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul id="lastL">
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
</div>
</body></html>
<style>
*{margin:0;padding:0}
#aa{float:left;}
ul{
float:left;
list-style:none;
width:700px;
}
li{
float:left;
width:140px;
height:20px;
border-top:1px solid #000;
border-left:1px solid #000;
}
#lastL li{
border-bottom:1px solid #000;
}
.lastL{
border-right:1px solid #000;
}
</style>
<script language="javascript">
function jj(){
var r=aa.getElementsByTagName("ul").length
for(i=0;i<r;i++){
document.getElementById("aa").getElementsByTagName("ul")[i].onmouseover=a1
document.getElementById("aa").getElementsByTagName("ul")[i].onmouseout=a2
}
}
function a1(){
this.style.background="gainsboro"
}
function a2(){
this.style.background="#fff"
}
</script>
</head>
<body onload="jj()">
<div id="aa">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
<ul id="lastL">
<li></li>
<li></li>
<li></li>
<li></li>
<li class="lastL"></li>
</ul>
</div>
</body></html>
<html><head><title></title>
<style>#bb UL {
FLOAT: left; TEXT-ALIGN: left; MARGIN: 0px; HEIGHT: 20px;background-color:#fff; PADDING: 0px; width:750px; border:1px solid #000; border-bottom:0px;
}
#bb UL LI {
FLOAT: left; TEXT-ALIGN: left; border-right:1px solid #000;
padding:0px; margin:0px; display:block;width:140px; line-height:20px; float:left;
}#bb .ul_bottom
{
border-bottom:1px solid #000;
}
#bb .li_right
{
border-right:0;
}
</style>
<script language="javascript">
function jj(){
var r=bb.getElementsByTagName("ul").length;
for(i=0;i<r;i++){
document.getElementById("bb").getElementsByTagName("ul")[i].onmouseover=a1
document.getElementById("bb").getElementsByTagName("ul")[i].onmouseout=a2
}
}
function a1(){
this.style.background="gainsboro"
}
function a2(){
this.style.background="#fff"
}function jj2(){
var r=bb.getElementsByTagName("ul").length;
for(i=0;i<r;i++){
document.getElementById("bb").getElementsByTagName("ul")[i].onmouseover=a1
document.getElementById("bb").getElementsByTagName("ul")[i].onmouseout=a2
}
}
</script>
</head>
<body onload="jj()">
<div id="bb">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li class="li_right">eee</li>
</ul>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li class="li_right">eee</li>
</ul>
<ul class="ul_bottom">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li class="li_right">eee</li>
</ul>
</div>
</body></html>
<title>Div模拟表格行响应鼠标改变底色<title>
<head>
<script language="javascript">
function jj()
{
var r=aa.getElementsByTagName("ul").length
var obj=aa.getElementsByTagName("ul");
for(i=0;i<r;i++)
{
obj[i].onmouseover=a1
obj[i].onmouseout=a2
}
}
function a1()
{
var objs = this.getElementsByTagName("li")
for(var i = 0;i < objs.length;i++) objs[i].style.background="gainsboro"
}
function a2()
{
var objs = this.getElementsByTagName("li")
for(var i = 0;i < objs.length;i++) objs[i].style.background="#FFFFFF"
}
</script>
<style type="text/css">
.csstb{
font-size:12px;
width:595px;
border-right:#999999 solid 1px;
border-bottom:#999999 solid 1px;
}
.csstb div,.csstb li{
float:left;
width:198px;
line-height:20px;/*行高*/
border-top:#999999 solid 1px;
border-left:#999999 solid 1px;
}
.csstb ul{
margin:0px;
padding:0px;
list-style:none;
}
</style>
</head>
<body onload="jj()">
<div class="csstb" id="aa">
<ul>
<li>第1行第1列</li>
<li>第1行第2列</li>
<li>第1行第3列</li>
</ul>
<ul>
<li>第2行第1列</li>
<li>第2行第2列</li>
<li>第2行第3列</li>
</ul>
<ul>
<li>第3行第1列</li>
<li>第3行第2列</li>
<li>第3行第3列</li>
</ul>
</div>
</body>
</html>