<!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=utf-8" />
<title>不规则导航条</title>
<style type="text/css">
* {margin:0;padding:0;font:normal 12px/25px "宋体";}
body {background:#FFF;text-align:center;}
.Menu{width:806px;height:31px;margin:20px auto;position:relative;margin-top:20px;}
.Menu .box1{display:block;width:6px;height:31px; position:absolute;top:0;left:0;background:transparent url(images/01.gif) no-repeat;}
.Menu .box2{display:block;width:6px;height:31px; position:absolute;top:0;right:0;background:transparent url(images/05.gif) no-repeat;}
.Menu ul {list-style:none;width:804px;height:29px;padding:1px;background:#F2F2F2 url(images/04.gif) repeat-x;overflow:hidden;margin-left:0px;}
.Menu li {font-size:14px;font-weight:bold;float:left;width:117px;height:29px;text-align:center;margin:0 -10px;display:inline;}
.Menu a {font-size:14px;font-weight:bold;color:#666; float:left;width:117px;height:29px;top:0;left:0;background:url(images/03.gif) center center no-repeat;}
.Menu li.c {background:url(images/02.gif) 0 0 no-repeat}
.Menu a:hover {color:#333;background:url(images/02.gif) no-repeat left bottom;width:117px;position:relative;}
.Menu a.home{
background-color:#f2f2f2;
}
.Menu a.home:hover{
position:static;background-color:#FFF
}
.Menu a.None{width:21px;background:#f2f2f2;}
.Menu a.None:hover{width:21px;background:#f2f2f2}
</style>
</head>
<body>
<div class="Menu">
<span class="box1"><!--外框处理--></span>
<span class="box2"><!--外框处理--></span>
<ul>
<li><a href="" title="菜单" class="home">首页</a></li>
<li><a href="" title="菜单">菜单</a></li>
<li><a href="" title="菜单">菜单</a></li>
<li><a href="" title="菜单">菜单</a></li>
<li class="c">菜单</li>
<li><a href="" title="菜单">菜单</a></li>
<li><a href="" title="菜单">菜单</a></li>
<li><a href="" class="None"></a></li>
</ul>
</div>
</body>
</html>
效果图：
分享到：
相关推荐
图片型不规则菜单的CSs实现.rar图片型不规则菜单的CSs实现.rar图片型不规则菜单的CSs实现.rar图片型不规则菜单的CSs实现.rar图片型不规则菜单的CSs实现.rar图片型不规则菜单的CSs实现.rar
CSS漂实现不规则菜单效果，纯CSS DIV代码实现。这种菜单看上去给你一种很活泼的感觉，不是一条直线上的菜单，错落有致，看着也挺有意思，如果做一些儿童网站，或许是个不错的选择。
JavaScript 图片型不规则菜单的CSs实现.rar
4种不同风格的纯CSS菜单导航
仿京东不规则边框二级菜单，加了广告关闭盒子上移功能，可以参考一下，名字有些不规范，主要是逻辑通了就ok。
这是一款js和CSS3商品展示和不规则网格菜单特效。该特效采用轮播图的方式来展示商品。在每个页面的右上角，有一个主菜单按钮。当点击这个按钮时，会展开一个不规则的网格菜单，显示商品的尺寸、价格等信息。
纯css实现的背景导航，导航边框多为不规则形状，实现起来困难较大，
4种不同风格的纯CSS菜单导航
excel vba 不规则窗体美化 极酷窗体效果 窗体添加菜单 快捷键大全
一般情况下导航菜单的背景图片都是比较有规则的，但是平时我们也会遇到很多背景图片形状不规则导航条（比如但鼠标移上的时候，背景图片不规则，本例只讨论此种类型）,如下图所示： （图一） 当鼠标移上去的时候背景...
需求 利用图片，实现一个如图的按钮组。 遇到的问题 如下图所示： ... 当用户触摸实际屏幕时，会生成一个Touch Event，将此事件添加到UIApplication管理的事件队列之中。... UIApplication从事件队列之中按顺序取出事件...
界面图案演示 创建不规则窗口界面 创建可扩展对话框界面 创建自画主菜单界面 创建自画窗口背景界面
像花朵一样的不规则VC 窗体制作实例，通过调用透明的BMP位图来实现不规则的窗口，本程序借用花朵的轮廓来实现窗体的轮廓，尚未添加右键菜单和关闭按钮，对于一个不规则的窗口来说，右键菜单是必不可少的，因此本实例...
37:___图片型不规则菜单的CSs实现 38:___图片拖拉缩放效果（仿PHOTOSHOP） 39:___图片控制内容框的文字上下翻滚 40:___图片旋转构成3D圆环的展示特效 41:___图片点击后变灰色的CSs代码 42:___图片闪烁代码 43:___...
此教程针对的是win7主题制作的新手，以系统自带的aero主题为副本，只讲解主题制作的基础，如theme的编写、开始菜单、细节窗格等，至于樱茶不规则菜单等请参考樱茶高级教程！
2个MFC不规则Button类,可以绘制好看的不规则按钮控件，如箭头控件。 点击按钮弹出下拉菜单
本案例主要针对元组的基本使用的考察，元组是不可变序列，创建元组可以通过()创建，也可以通过tuple()构造函数创建，元组的索引规则和列表相同，但是不能索引赋值。 任务 菜单生成器 任务目标 掌握元组的概念与创建 ...
vc++ 编写的不规则（椭圆）窗体。程序的主窗体为椭圆形。鼠标可以在非标题栏处拖动窗体（不规则窗体的一般要求）。创建了环境菜单。
透明，不规则窗口，系统托盘，右键菜单，大家可以把这个当做一个 MFC实例来看待，里面的功能和类都比较独立，大家直接提取出来用即可，我也是边学习MFC，边做的这个。 感谢大家捧场~~ 另更新版本下载地址：...