HTML和CSS做网页实例教程:鼠标滑过文字改变


关于HTML+CSS的实例效果很多,下面举出常用的几列,供新手们学习参考。

html+CSS实例效果(1):鼠标滑过改变文字

<!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=gb2312" />
<title>鼠标经过变换文字</title>
  <style>
    #Menu{ width:500px; margin:50px auto; border:1px solid #CCC; overflow:hidden; }
    #Menu ul{ margin:0;padding:0;list-style:none;}
    #Menu li{ width:100px; height:22px; line-height:22px; float:left; overflow:hidden; text-align:center; }
    #Menu a{ width:100px;float:left;overflow:hidden;} #Menu span{display:block;margin-top:-22px;}
    #Menu a:hover{padding-top:22px;}
  </style>
</head>
<body>
   <ul id="Menu">
     <li><a href="#"><span>HOME</span>首页</a></li>
     <li><a href="#"><span>NEWS</span>新闻</a></li>
     <li><a href="#"><span>ABOUT</span>关于</a></li>
     <li><a href="#"><span>CONTACT</span>联系</a></li>
     <li><a href="#"><span>照片</span>PHOTO</a></li>
   </ul>
</body>
</html>



相关阅读:
PHP详解ASCII码对照表与字符转换
javascript 判断数组是否已包含了某个元素的函数
SQL入侵恢复xp_cmdshell方法总结
CSS:移动网站开发的前端技术和技巧
仿Apple滑动条产品展示效果
JavaScript中“+=”的应用
javascript必知必会之this关键字及scope
ASP 自动采集实现代码
练习:鼠标感应伸缩隐藏层
ASP函数库1
利用mshta调用运行js或vbs的
LogMiner日志分析工具的使用
如何设置Windows 7通知栏重新显示电源按钮
jquery星级插件、支持页面中多次使用
快速导航

Copyright © 2016 phpStudy |