鼠标放在某个文字上时，展示文字的解释说明
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display属性</title> <style type="text/css"> .con h3{ font-size:25px; color:red; } .box{ width:200px; height:50px; background-color:gold; line-height:50px; text-indent:10px; display:none; /* 隐藏不显示 */ } .con:hover .box{ display:block; /* 悬浮时显示 */ } </style> </head> <body> <div class="con"> <h3>鼠标悬浮，试试看会出现什么</h3> <div class="box">很遗憾，什么也没有出现</div> </div> </body> </html>
文字绕图：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动文字绕图</title> <style type="text/css"> .con{ width:450px; height:210px; border:1px solid #000; margin:50px auto 0; } .pic{ width:100px; height:100px; background-color:gold; float:left; margin:10px; } .text{ /*background-color:green;*/ height:130px; color:#666; } </style> </head> <body> <div class="con"> <div class="pic"><img src="images/头像2.png" alt="头像" /></div> <div class="text">植树造林不仅可以绿化和美化家园， 同时还可以起到扩大山林资源、防止水土流失，世界 首枚植树节邮票 、保护农田、调节气候、促进经济发 展等作用，是一项利于当代、造福子孙的宏伟工程。 为了保护林业资源，美化环境，保持生态平衡。植树 造林不仅可以绿化和美化家园，同时还可以起到扩大山 林资源、防止水土流失，世界首枚植树节邮票 、保护 农田、调节气候等。 </div> </div> </body> </html>
页面效果：
