不多说，直接贴代码哈！有疑问，可追加评论哈！

demo.html:

<!DOCTYPE html>
<html>
<head>
　　<title>分类导航菜单</title>
　　<meta charset="utf-8">
　　<meta name="keywords" content="keyword1,keyword2,keyword3">
　　<meta name="description" content="this is my page">
　　<meta name="content-type" content="text/html; charset=UTF-8">
　　<link href="css/demo.css" rel="stylesheet" text="text/css"/>
</head>
<body>
　　<nav>
　　　　<ul>
　　　　　　<li></li>
　　　　　　<li><a href="#">新闻热点</a></li>
　　　　　　<li><a href="#">招聘求职</a></li>
　　　　　　<li><a href="#">问答求助</a></li>
　　　　　　<li><a href="#">生活服务</a></li>
　　　　　　<li><a href="#">开心灌水</a></li>
　　　　　　<li><a href="#">商务合作</a></li>
　　　　　　<li><a href="#">教育培训</a></li>
　　　　　　<li><a href="#">创业专区</a></li>
　　　　</ul>
　　</nav>
</body>
</html>

demo.css:

@CHARSET "UTF-8";
*{padding:0;margin:0;}
nav{border:1px solid #BCFF1D;font-size:12px;background:#D6FF8C url(../images/background.gif)
no-repeat top left;float:left;height:128px;}
nav ul{list-style:none;width:312px;margin:2px;}
nav ul li{width:104px;float:left;height:45px;text-align:center;line-height:35px;}
nav ul li a{background:url(../images/menu.gif) no-repeat;display:block;text-decoration:none;color:black;padding-left:18px;}
nav ul li a:hover,nav ul li a:active{background-position:0px -55px;color:#ff3300;font-weight:bold;}

Effect picture：

源码文件下载：分类导航菜单.zip

分类导航菜单的制作（附源码）--HTML的更多相关文章

  1. 【Android初级】如何动态添加菜单项（附源码+避坑）

    我们平时在开发过程中,为了灵活多变,除了使用静态的菜单,还有动态添加菜单的需求.今天要分享的功能如下: 在界面的右上角有个更多选项,点开后,有两个子菜单:关于和退出 点击"关于", ...

  2. C#/ASP.NET MVC微信公众号接口开发之从零开发（四） 微信自定义菜单(附源码)

    C#/ASP.NET MVC微信接口开发文章目录: 1.C#/ASP.NET MVC微信公众号接口开发之从零开发(一) 接入微信公众平台 2.C#/ASP.NET MVC微信公众号接口开发之从零开发( ...

  3. 使用 SVG 制作单选和多选框动画【附源码】

    通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...

  4. openlayers4 入门开发系列之地图导航控件篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  5. Redrain 通用菜单控件使用方法和说明（附源码和demo）

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42889709 大概半年前我写过博客说明怎么改造duilib的原代Menu ...

  6. Web 开发中很实用的10个效果【附源码下载】

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  7. 精选12个时尚的 CSS3 效果【附源码下载】

    这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...

  8. Ext.NET 4.1 系统框架的搭建(后台) 附源码

    Ext.NET 4.1 系统框架的搭建(后台) 附源码 代码运行环境:.net 4.5  VS2013 (代码可直接编译运行) 预览图: 分析图: 上面系统的构建包括三块区域:North.West和C ...

  9. （转）干货｜这篇TensorFlow实例教程文章告诉你GANs为何引爆机器学习？（附源码）

    干货|这篇TensorFlow实例教程文章告诉你GANs为何引爆机器学习?(附源码) 该博客来源自:https://mp.weixin.qq.com/s?__biz=MzA4NzE1NzYyMw==& ...

随机推荐

  1. 【模板小程序】循环方阵构造（仿《剑指offer》循环矩阵打印）

    /* 本程序说明: 输入:方阵大小n,输出:n*n的旋转方阵 举例: 当n=2时,输出: 1 2 4 3 当n=4时,输出: 1 2 3 4 12 13 14 5 11 16 15 6 10 9 8 ...

  2. 线性一致性与全序广播------《Designing Data-Intensive Applications》读书笔记12

    上一篇聊了聊构建分布式系统所面临的困难,这篇将着重讨论构建容错分布式系统的算法与协议.构建容错系统的最佳方法是使用通用抽象,允许应用程序忽略分布式系统中的一些问题.本篇我们先聊一聊线性一致性,以及与线 ...

  3. pip install 提示"no previously-included directories found matching"及"no previously-included files matching found anywhere in distribution"，且偶发无法关联安装 PyPI 库的故障

    环境描述: Python 2.7.5 CentOS-7.2   报错现象: (1).在虚拟环境下运行 pip install 命令安装 PyPI 第三方库,出现类似如下告警. Running setu ...

  4. python爬虫（4）——正则表达式（一）

    在前几篇文章中我们使用了python的urllib模块,做了一些访问网页的工作.现在介绍一个非常强大的工具--正则表达式.在讲述正则的时候,我参考了<精通正则表达式(第三版)     ---Je ...

  5. error: Autoconf version 2.67 or higher is required

    error: Autoconf version 2.67 or higher is required 今天linux下遇到这种错误,顺便记录下来. #rpm -qf /usr/bin/autoconf ...

  6. 安装gitlab8.0在reconfigure报错

    现象: https://gitlab.com/gitlab-org/omnibus-gitlab/issues/303 参考方法: https://forum.gitlab.com/t/gitlab- ...

  7. C/C++语言简介之语言组成

    一.数据类型 C的数据类型包括:整型.字符型.实型或浮点型(单精度和双精度).枚举类型.数组类型.结构体类型.共用体类型.指针类型和空类型. 二.常量与变量 常量其值不可改变,符号常量名通常用大写. ...

  8. bzoj 2176 最小表示

    2176: Strange string Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 419  Solved: 174[Submit][Status ...

  9. Failure to transfer org.apache.maven:maven-archiver:pom:2.5 from http://repo.maven.apache.org/ maven2 was cached in the local repository, resolution will not be reattempted until the update interv

    Failure to transfer org.apache.maven:maven-archiver:pom:2.5 from http://repo.maven.apache.org/  mave ...

  10. DxPackNet 5.视频高质量的压缩和传输

    DxPackNet 对视频的压缩和解压也提供了很好的支持,且系统不需要装第三方解码器哦~ 主要用到了 IxVideoEncoder 视频编码器  和 IxVideoDecoder 两个接口 这里只做简 ...