关于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>
以上就是HTML和CSS做网页实例教程:鼠标滑过文字改变的内容，更多相关文章请关注PHP中文网（www.php.cn）！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
870
收藏
