源代码 <!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 { 100px; height:50px; left:20px; top:20px; background-color: #F00; position:absolute; overflow:hidden; } .aa1 { 100px; height:50px; left:20px; top:20px; background-color: #F00; position:absolute; } .a2 { 100px; height:50px; left:0px; top:50px; background-color: #0F0; position:absolute; overflow:hidden; } .a22 { 100px; height:50px; left:0px; top:50px; background-color: #0F0; position:absolute; } .a3 { 100px; height:50px; left:0px; top:100px; background-color: #00F; position:absolute; overflow:hidden; } .a33 { 100px; height:50px; left:0px; top:100px; background-color: #00F; position:absolute; } .a4 { 100px; height:50px; left:0px; top:150px; background-color: #FF0; position:absolute; overflow:hidden; } .a44 { 100px; height:50px; left:0px; top:150px; background-color: #FF0; position:absolute; } .a6 { 100px; height:200px; left:100px; top:0px; background-color: #0F0; position:absolute ; } .a7 { 100px; height:200px; left:100px; top:0px; background-color: #00F; position:absolute ; } .a8 { 100px; height:200px; left:100px; top:0px; background-color: #FF0; position:absolute ; }