源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="5.26练习1调用.css" rel="stylesheet" type="text/css" />
<body>
<div class="a1" onmouseover="className='aa1'" onmouseout="className='a1'">
<div class="a2" onmouseover="className='a22'" onmouseout="className='a2'">
<div class="a6"></div>
</div>
<div class="a3" onmouseover="className='a33'" onmouseout="className='a3'">
<div class="a7"></div>
</div>
<div class="a4" onmouseover="className='a44'" onmouseout="className='a4'">
<div class="a8"></div>
</div>
</div>
</body>
</html>
<script>
</script>
调用
@charset "utf-8";
/* CSS Document */
.a1
{
width:100px;
height:50px;
left:20px;
top:20px;
background-color: #F00;
position:absolute;
overflow:hidden;
}
.aa1
{
width:100px;
height:50px;
left:20px;
top:20px;
background-color: #F00;
position:absolute;
}
.a2
{
width:100px;
height:50px;
left:0px;
top:50px;
background-color: #0F0;
position:absolute;
overflow:hidden;
}
.a22
{
width:100px;
height:50px;
left:0px;
top:50px;
background-color: #0F0;
position:absolute;
}
.a3
{
width:100px;
height:50px;
left:0px;
top:100px;
background-color: #00F;
position:absolute;
overflow:hidden;
}
.a33
{
width:100px;
height:50px;
left:0px;
top:100px;
background-color: #00F;
position:absolute;
}
.a4
{
width:100px;
height:50px;
left:0px;
top:150px;
background-color: #FF0;
position:absolute;
overflow:hidden;
}
.a44
{
width:100px;
height:50px;
left:0px;
top:150px;
background-color: #FF0;
position:absolute;
}
.a6
{
width:100px;
height:200px;
left:100px;
top:0px;
background-color: #0F0;
position:absolute ;
}
.a7
{
width:100px;
height:200px;
left:100px;
top:0px;
background-color: #00F;
position:absolute ;
}
.a8
{
width:100px;
height:200px;
left:100px;
top:0px;
background-color: #FF0;
position:absolute ;
}
