<!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" /> <title>div效果图</title> <style type="text/css">/*使用内嵌式样式表css*/ .d/*定义一个class，设置共同属性*/ { width:20px;/*设置d的宽*/ height:40px;/*设置高*/ transition: width 0.2s;/*宽变化延迟0.2秒*/ box-shadow:#666 5px 5px 4px;/*设置边框阴影，上，右，下*/ } #d1/*定义一个id名字叫做d1的样式表*/ { background-color:#FFF;/*背景颜色*/ } #d1:hover/*定义鼠标悬浮在引用d1样式的div上的样式*/ { cursor:help;/*鼠标形状为问号*/ width:80px;/*宽度*/ background:#03F;/*颜色*/ } #d2 { background-color:#F00; } #d2:hover { width:100px; background:#900; } #d3 { background-color:#0F0; } #d3:hover { width:120px; background:#903; } #d4 { background-color:#00F; } #d4:hover { width:140px; background:#906; } #d5 { background-color:#FF0; } #d5:hover { width:120px; background:#909; } #d6 { background-color:#0FF; } #d6:hover { width:100px; background:#90C; } #d7 { background-color:#F0F; } #d7:hover { width:80px; background:#90F; } </style> </head> <body> <div class="d" id="d1"></div><!--引用class d的样式以及id d1属性--> <div class="d" id="d2"></div><!--引用class d的样式以及id d2属性--> <div class="d" id="d3"></div><!--引用class d的样式以及id d3属性--> <div class="d" id="d4"></div><!--引用class d的样式以及id d4属性--> <div class="d" id="d5"></div><!--引用class d的样式以及id d5属性--> <div class="d" id="d6"></div><!--引用class d的样式以及id d6属性--> <div class="d" id="d7"></div><!--引用class d的样式以及id d7属性--> </body> </html>