不规则背景墙 CSS实现背景图片不规则的导航菜单
发布时间：2013-01-02 11:25:51 作者：佚名 
我要评论
我要评论一般情况下导航菜单的背景图片都是比较有规则的，但是平时我们也会遇到很多背景图片形状不规则导航条比如但鼠标移上的时候，背景图片不规则，本例只讨论此种类型
一般情况下导航菜单的背景图片都是比较有规则的，但是平时我们也会遇到很多背景图片形状不规则导航条（比如但鼠标移上的时候，背景图片不规则，本例只讨论此种类型）,如下图所示：
（图一）
当鼠标移上去的时候背景变成红色箭头，也许，咋一看，觉得这个效果并没有什么特别的地方，但是仔细看看我画上去的绿色框框部分，就会发现每一块都是接在一起的不会断开的；如果说按照普通方法来做，那么实现的可能是下图所示的效果：
（图二）
即是块与块之间是断开的。
复制代码
代码如下:<!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" />
<script type="text/javascript" src="js/jquery.js"></script>
<!-- wbg解决ie6下的背景 勿动！！！-->
<!--[if IE 6]>
<script src="js/ie_png.js" mce_src="js/ie_png.js">
</script>
<script type="text/javascript">
DD_belatedPNG.fix('.previous,img');
</script>
<![endif]-->
<style type="text/css">
body{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
list-style:none;
}
body img{
border:none;
}
a{
color:#000;
border:0;
text-decoration:none;
}
a:hover{
color:#f00;
text-decoration:none;
}
#warp{
margin:20px auto;
width: 960px;
}
body{
background:url(img/bj.jpg) no-repeat center top #090909;
}
.nav{
background:url(img/nav_bj.png) right no-repeat;
_background:url(img/nav_bj.gif) right no-repeat;
height:47px;
width:638px;
}
.nav ul li{
float:left;
margin:0 -7px;/*这里的marign是实现这个效果最关键的地方*/
display:inline;
width:104px;
}
.nav ul li a{
display:block;
color:#FFFFFF;
padding:7px 0px;
_padding:5px 0px 6px;
width:104px;
float:left;
text-align:center;
font-family:Microsoft YaHei !important;
}
.nav ul li a span{
display:block;
}
.nav ul li a:hover{
background:url(img/a_hover.png) no-repeat;
_background:url(img/a_hover.gif) no-repeat;
color:#fff;
}
.nav ul .home a:hover{
background:url(img/home_hover.png) 7px center no-repeat;
_background:url(img/home_hover.gif) 7px center no-repeat;
}
</style>
<title></title>
</head>
<body>
<div id="warp">
<div class="nav">
<ul>
<li class="home"><a href=""><span>Home</span>首页</a></li>
<li><a href=""><span>About</span>关于九弘</a></li>
<li><a href=""><span>Serve</span>服务项目</a></li>
<li><a href=""><span>Case</span>活动案例</a></li>
<li><a href=""><span>Information</span>公司动态</a></li>
<li><a href=""><span>Partners</span>合作伙伴</a></li>
<li><a href=""><span>Contact</span>联系方式</a></li>
</ul>
</div>
</div>
</body>
</html>
在这个效果的实现过程中最关键的地方就是把“li”的margin值左右两边设为负数，然后把“li”和”a“的宽度设成一样，这样”a“的宽度就是固定的了，而”li“左右两边因为有margin，所以会缩小。
相关文章
- 大家都知道，目前有很多浏览器无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果;那么这篇文章将详细介绍了这几种背景图片的处理方法,需要了解的朋友可以参考下2012-12-24
- IE6下CSS背景图片闪烁的Bug（ie6下的背景图片缓存问题）2011-07-27
链接伪类（:hover）CSS背景图片有闪动BUG的解决方法
IE6下链接伪类（:hover）CSS背景图片有闪动BUG，主要原因ie会再一次请求这张图片，或者说图片没被缓存。2011-04-28网页CSS背景图片使用的测试结果-CSS教程-网页制作-网页教学网
这篇文章主要讲了CSS对背景图片渲染效率的一些经验和研究，在webjx.com中，还有着类似CSS效率的相关文章。 树型结构竖线用样式表（背景图）来实现，样式表背景2008-10-17- 利用一张背景图片来实现菜单的悬停状态，没有什么不可思议完全可以办得到，仅这一张图片，我们实现一个横行CSS菜单。并设置它们的悬停效果，感兴趣的朋友可以参考下哈，希2013-03-28
纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)
在之前的文章中曾经写到过一篇“三角形变形记之纯css实现的分布导航条效果”，其中用到了边框实现三角形的效果。最近又折腾了一个六边形的蜂窝效果给大家蹂躏。主要用到了2013-02-057款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
接下来向大家推荐7款设计巧妙的CSS3飘带状菜单和窗口，相当不错的效果，很多都具有3D立体效果，看了相信你一定会喜欢的好了不多说，切入主题，希望本文可以帮助到你，提高2013-02-04- W3cplus第二版本刚上线时，好多位朋友向我问起站上的分页导航样式是怎么制作;为了报答各位朋友一持对本站的大力支持，今天我特意把这个分页导航的效果当作一个小教程来说。2012-12-24
- 不改变html结构，使导航菜单垂直水平居中这个问题应该如何解决呢？本文将详细介绍，需要了解的朋友可以参考下2012-11-30
- 要做一个Bubble气泡提示框，如果用CSS3特性来做很容易，用图片来做也可以，但前者有兼容性问题，后者又不够灵活，用图片做有一个例子可以看看jquery打造一款侧边弹出的垂直2011-11-23
最新评论