<!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>
