其他样式：
1. :hover 鼠标移上执行样式 cursor:pointer; 鼠标光标变成手
2. display:none; 隐藏 block（显示）隐藏不占位置
display能改变<span>的大小（<span>的大小由它的内容大小决定）
isibilith:hidden; 隐藏 visoble 显示 隐藏占位置
3. overflow:visible; （isible 可见 ） （ hidden 隐藏 ） 超出部分隐藏
4. opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); 透明度50%
5. border-radius 圆角
6. box-shadow 阴影 box-shadow: 0 0 5px white;
阴影的位置 粗细 颜色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css" > *{ margin:0px auto; padding:0px; } #test{ width:200px; height:200px; background-color:#06F; display:none; } #test:hover{ background-color:#F00; cursor:pointeer; /*鼠标的光标变成手*/ } #er{ width:200px; height:200px; background-color:#C3F; } #span{ width:300px; height:200px; display:block; } </style> </head> <body> <div id="test"></div> <div id="er"></div> <span id="span">这是SPAN</span> </body> </html>