HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航

 

在线体验效果:http://hovertree.com/texiao/css/1.htm

代码如下,保存到HTML文件可以看到效果:

 

<!DOCTYPE html >
<html >
<head>
<title>HoverTree带说明的CSS菜单-hovertree.com</title><base target="_blank" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css/1/hovertreemenu.css" />
</head>
<body>
<div style="width:970px;margin:0px auto;"><h2>HoverTree菜单 - 带说明的CSS菜单</h2>
纯HTML+CSS结构链接带说明的黄色导航 <a href="http://hovertree.com/hvtart/bjae/5w5svpu4.htm">原文</a> <a href="http://hovertree.com">何问起</a> <a href="http://hovertree.com/texiao/">特效库</a></div>
<div class="hovertree-menu">
<ul>
<li> <a href="http://hovertree.com/menu/jquery/">
jQuery
<div class="info">学习jQuery的好地方,从入门到精通,资料大全。</div>
</a> </li>
<li> <a href="http://hovertree.com/texiao/">
网页特效
<div class="info">各种网页特效,jQuery,JS,CSS,HTML5等等。。。</div>
</a> </li>
<li> <a href="http://hovertree.com/menu/aspnet/">
ASP.NET
<div class="info">ASP.NET 资料库,代码大全。</div>
</a> </li>
<li> <a href="http://hovertree.com/hvtart/bjae/1d2c278a117f94ca.htm">
jQuery下载
<div class="info">各个版本的jQuery下载。</div>
</a> </li>
<li> <a href="http://hovertree.com/hvtart/bjae/009i1gl6.htm">
相关菜单
<div class="info">纯CSS带说明菜单,另一种风格。</div>
</a> </li>
<li> <a href="http://hovertree.com/menu/javascript/">
JS代码
<div class="info">格式各样的JavaScript代码供你参考。</div>
</a> </li>
<li> <a href="http://keleyi.com/">柯乐义
<div class="info">Web前端资料,jQuery,HTML5等。</div>
</a> </li>
</ul>
</div>

</body>
</html>

参考:http://hovertree.com/hvtart/bjae/009i1gl6.htm

web前端汇总 http://www.cnblogs.com/jihua/p/webfront.html

posted on 2015-05-08 20:05  计划  阅读(9768)  评论(0编辑  收藏  举报