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

纯HTML+CSS带说明的黄色导航菜单的更多相关文章

  1. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  3. 纯css实现的三级水平导航菜单

    vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 <html> <head> <meta charset="UTF-8" ...

  4. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  5. 使用CSS创建有图标的网站导航菜单

    在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,网页菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不 ...

  6. 用CSS做导航菜单的4个理由

    导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...

  7. WEB入门.九 导航菜单

    学习内容 水平导航菜单 垂直导航菜单 下拉式导航菜单 能力目标 制作tab标签导航菜单 制作带箭头的导航菜单 制作带信息提示的导航菜单 制作垂直下拉导航菜单 制作水平下拉导航菜单 本章简介 上一章节中 ...

  8. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  9. 纯css实现京东导航菜单

    纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...

随机推荐

  1. selenium的安装

    一.安装selenium 通过pip命令安装selenium包:(pip的安装方法:http://www.cnblogs.com/zhengyihan1216/articles/6011640.htm ...

  2. LINQ系列：Linq to Object投影操作符

    投影是指在将序列中的元素转换为一个自定义形式的操作.投影操作符Select和SelectMany用于选择出赋予了适当功能的值.SelectMany操作符可以处理多个集合. LINQ表达式语法: 1. ...

  3. Vue.js学习笔记（8）拖放

    小颖在目前负责的项目中,负责给同事提供所需组件,在这期间,我们家大颖姐姐让我 写个拖拽组件,一开始我是用click实现,先将你要拖拽的dom点一下,然后再点你要放的位置,这个dom再通过小颖写的方法, ...

  4. nodejs 使用fs实现多级联动

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0gAAAEdCAIAAAC5WdDhAAAgAElEQVR4nO3da3Mc153f8X4feq5lFR

  5. 《JS设计模式笔记》 4,桥接模式

    //桥接模式的作用在于将实现部分和抽象部分分离开来,以便两者可以独立的变化. var singleton=function(fn){ var result; return function(){ re ...

  6. 关于JqueryEasyUI集合Kindeditor

    写在前面 上一篇<初试JqueryEasyUI(附Demo)>: 在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor.ueditor.kindedito ...

  7. DOM 节点的克隆与删除

    无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...

  8. 根据起止日期构建指定查询条件：第N周(yyyy-MM-dd/yyyy-MM-dd)

    项目中有个查询模块中用到查询条件: 年和周. 以往我直接指定是第几周,后来测试反映如果直接选择周的话并不知道所选周代表的年月日,而无法最快查询数据,后更改查询条件如下: 指定一个起始年月,根据起始年月 ...

  9. 浅谈Hibernate入门

    前言 最近打算做一个自己的个人网站,经过仔细思考,打算使用hibernate作为开发的ORM框架,因此各种找资料,由于本人是刚刚接触这技术的,所以就找了比较基础的知识来分享下 基本概述 Hiberna ...

  10. 让你的web程序“动”起来。

    看到这里你可能会问,asp.net程序本身就是动态网站,还要如何动? 我这里所谓的动起来,是指动态加载,动态更新.好吧可能你又要问了动态网站本来就是动态加载,动态更新的.asp.net的程序依附于II ...