分类导航菜单的制作(附源码)--HTML
不多说,直接贴代码哈!有疑问,可追加评论哈!
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的更多相关文章
- 【Android初级】如何动态添加菜单项(附源码+避坑)
我们平时在开发过程中,为了灵活多变,除了使用静态的菜单,还有动态添加菜单的需求.今天要分享的功能如下: 在界面的右上角有个更多选项,点开后,有两个子菜单:关于和退出 点击"关于", ...
- C#/ASP.NET MVC微信公众号接口开发之从零开发(四) 微信自定义菜单(附源码)
C#/ASP.NET MVC微信接口开发文章目录: 1.C#/ASP.NET MVC微信公众号接口开发之从零开发(一) 接入微信公众平台 2.C#/ASP.NET MVC微信公众号接口开发之从零开发( ...
- 使用 SVG 制作单选和多选框动画【附源码】
通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...
- openlayers4 入门开发系列之地图导航控件篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- Redrain 通用菜单控件使用方法和说明(附源码和demo)
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42889709 大概半年前我写过博客说明怎么改造duilib的原代Menu ...
- Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
- 精选12个时尚的 CSS3 效果【附源码下载】
这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...
- Ext.NET 4.1 系统框架的搭建(后台) 附源码
Ext.NET 4.1 系统框架的搭建(后台) 附源码 代码运行环境:.net 4.5 VS2013 (代码可直接编译运行) 预览图: 分析图: 上面系统的构建包括三块区域:North.West和C ...
- (转)干货|这篇TensorFlow实例教程文章告诉你GANs为何引爆机器学习?(附源码)
干货|这篇TensorFlow实例教程文章告诉你GANs为何引爆机器学习?(附源码) 该博客来源自:https://mp.weixin.qq.com/s?__biz=MzA4NzE1NzYyMw==& ...
随机推荐
- Redis进阶实践之十一 Redis的Cluster集群搭建
一.引言 本文档只对Redis的Cluster集群做简单的介绍,并没有对分布式系统的详细概念做深入的探讨.本文只是提供了有关如何设置集群.测试和操作集群的说明,而不涉及Redis集群规范中涵 ...
- zabbix_server 挂了原因及解决方法(内存溢出)
14721:20170714:095330.028 [file:dbconfig.c,line:452] zbx_mem_malloc(): out of memory (requested 80 b ...
- tcping-安装
1.LINUX安装方法: 下载地址: http://www.linuxco.de/tcping/tcping.html 不过LINUX操作比WINDOWS的差.建议还是使用WINDOWS版本. 2.W ...
- 【NOIP2012】 疫情控制
[NOIP2012] 疫情控制 标签: 倍增 贪心 二分答案 NOIP Description H 国有 n 个城市,这 n 个城市用 n-1 条双向道路相互连通构成一棵树, 1 号城市是首都, 也是 ...
- PHP中的浮点精度和类型
PHP中的浮点数 精度 在PHP中,浮点数的字长和平台相关,通常最大值是 1.8e308 并具有 14 位十进制数字的精度(64 位 IEEE 格式). 浮点数的精度有限.尽管取决于系统,PHP 通常 ...
- Java经典编程题50道之二
判断101-200之间有多少个素数,并输出所有素数. public class Example02 { public static void main(String[] args) { ...
- JPA数据懒加载LAZY和实时加载EAGER(二)
懒加载LAZY和实时加载EAGER的概念,在各种开发语言中都有广泛应用.其目的是实现关联数据的选择性加载,懒加载是在属性被引用时,才生成查询语句,抽取相关联数据.而实时加载则是执行完主查询后,不管是否 ...
- 老男孩Python全栈开发(92天全)视频教程 自学笔记17
day17课程内容: 装饰器回顾练习 登录功能: #登录京东,不同的页面,选择页面,然后不同的登录方式with open('作业5.1jingdong','w',encoding='utf8') as ...
- hihoCoder1310 岛屿 (dfs)
思路:首先dfs求得所有联通块,再搜索的同时把每个联通块的坐标都保存下来,然后把每个联通块处理一下–首先得到某个联通块的最小横坐标和纵坐标,然后让每个坐标去减去这个横坐标和纵坐标.相当于使得所有联通块 ...
- hdu1496 打表
通常可以想到直接四个for枚举,但是会超时.就算只用三个for也很危险.可以用打表的方法将时间复杂度降到O(n^2),注意到x1,x2,x3,x4的取值区间是关于零对称的,因此可以只考虑正整数部分,洗 ...