<!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漂实现不规则菜单代码"是一个创新的解决方案，利用CSS（层叠样式表）技术来构建非传统的、视觉上吸引人的菜单。这种不规则菜单的设计能够打破常规，提升用户体验，尤其适用于那些希望营造活泼、有趣氛围的网站，...
本资源"JavaScript 图片型不规则菜单的CSs实现.rar"提供了一个利用这两种技术实现图片型不规则菜单的示例。以下是这个实现的核心知识点： 1. **CSS3变换（Transform）**： CSS3的变换属性允许我们对元素进行旋转、...
图片型不规则菜单的CSs实现.rar图片型不规则菜单的CSs实现.rar图片型不规则菜单的CSs实现.rar图片型不规则菜单的CSs实现.rar图片型不规则菜单的CSs实现.rar图片型不规则菜单的CSs实现.rar
本文将深入探讨如何使用纯CSS技术创建不规则形状排列的菜单导航，这四种不同的风格可以为您的网站增添独特的视觉效果和用户体验。 1. **圆角矩形与多边形组合**： CSS3中的`border-radius`属性可以让我们轻松实现...
在本项目"仿京东不规则边框二级菜单.zip"中，开发者尝试实现了一个与京东网站类似的具有不规则边框效果的二级菜单。这个菜单不仅在视觉上与京东的风格相似，还添加了广告关闭功能，并处理了盒子在关闭时上移的交互...
而“不规则形状背景纯css导航菜单”是一个独特的设计概念，它挑战了传统的矩形或直线边界的限制，通过CSS技术来创建具有视觉吸引力的、非传统形状的导航元素。下面我们将深入探讨这一主题，详细介绍如何利用CSS实现...
在计算机图形学中，"画不规则图形并填充不规则图形"是一项常见的任务，尤其在设计、绘图软件中。不规则图形指的是那些没有规则几何形状的图形，它们的边界可能由任意多边形或者曲线构成。这类图形的创建与填充涉及到...
【JS和CSS3商品展示与不规则网格菜单特效】是一种结合了JavaScript（主要基于jQuery库）和CSS3技术实现的动态网页设计。这种特效能够提升网站的用户体验，尤其是在电子商务平台中，通过创新的视觉表现来吸引用户关注...
"不规则形状排列的css菜单导航"是一个创新的设计概念，通过CSS技术实现各种独特的菜单布局，为用户提供视觉吸引力的同时增强交互体验。下面将详细探讨这个主题中的核心知识点。 首先，CSS（Cascading Style Sheets...
下面我们将深入探讨如何利用VBA实现这些功能，包括窗体的不规则形状、美化效果、添加菜单以及快捷键的设置。 首先，不规则窗体可以通过自定义窗体控件来实现。VBA提供了一种叫做UserForm的容器，我们可以自定义其...
在Cocos Creator游戏开发中，创建不规则形状的按钮是一个常见的需求，这可以让游戏界面更加独特和富有创意。本文将详细介绍如何结合Gizmo工具来实现这一目标。 首先，了解Cocos Creator。Cocos Creator是一款全栈式...
在VC++的MFC（Microsoft Foundation Classes）框架中，不规则控件是一种能够根据自定义形状显示的控件，而非局限于传统的矩形边界。这样的控件通常需要通过自绘技术来实现，即重载控件的OnDraw()函数，自行绘制控件...
本项目“python+pyqt4实现的圆角窗体(不规则窗体)”旨在利用PyQt4库创建一个具有独特视觉效果的圆角或不规则形状的窗口。 要实现这样的效果，首先需要理解PyQt4中的QPainter和QRegion类。QPainter是Qt中的绘图引擎...
在网页设计中，创建独特的用户体验有时需要创新的视觉效果，比如不规则背景的导航菜单。本文将探讨如何使用CSS来实现这样一个特殊的导航菜单，其中背景图片在鼠标悬停时呈现不规则形状，使得各个菜单项无缝连接。 ...
设计师可能需要考虑如何在不规则形状的区域内合理布局图标、菜单和其他元素，以保证易用性。 "贴图"这一标签则可能意味着该界面使用了大量的图像或图形元素来构建其外观和功能。贴图是一种在图形设计中广泛使用的...
在Microsoft Foundation Classes (MFC)库中，创建不规则对话框是一种高级的用户界面技术，它允许开发者构建形状独特、不遵循标准矩形边界的窗口。这种技术在一些需要个性化或者增强视觉效果的应用中非常有用。本文将...
在计算机编程领域，不规则窗口（也称为异形窗口或形状化窗口）是指那些具有非矩形形状的窗口，它们可以突破传统矩形边框的限制，呈现出更加丰富多彩的视觉效果。这种技术常用于游戏、图形设计软件或者任何希望突出...
QT 不规则悬浮球 仿360是一款基于Qt框架的小型软件测试程序，旨在模仿360安全卫士中的悬浮小球功能。该程序的核心挑战在于实现不规则形状的绘制和交互逻辑，如悬浮球的拖动、鼠标离开后的自动隐藏以及在隐藏过程中的...
在C#编程中，开发人员有时需要创建具有独特形状或非矩形边界的窗体，这些窗体被称为“不规则窗体”。不规则窗体的实现通常涉及到自定义绘图，这使得窗体可以突破传统的矩形框架，展示出更个性化的外观。本示例将深入...