快捷搜索:  test  as

CSS实现背景图片不规则的导航菜单示例

一样平常环境下导航菜单的背景图片都是对照有规则的,然则日常平凡我们也会碰到很多背景图片外形不规则导航条(比如但鼠标移上的时刻,背景图片不规则,本例只评论争论此种类型),如下图所示:

(图一)

当鼠标移上去的时刻背景变成血色箭头,大概,咋一看,感觉这个效果并没有什么特其余地方,然则仔细看看我画上去的绿色框框部分,就会发明每一块都是接在一路的不会断开的;假如说按照通俗措施来做,那么实现的可能是下图所示的效果:

(图二)

等于块与块之间是断开的。

>

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>

>

script src="js/ie_png.js" mce_src="js/ie_png.js">script>

script type="text/javascript">DD_belatedPNG.fix('.previous,img');

script> >

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>Homespan>首页a>li>li>a href="">span>Aboutspan>关于九弘a>li>

li>a href="">span>Servespan>办事变目a>li>li>a href="">span>Casespan>活动案例a>li>

li>a href="">span>Informationspan>公司动态a>li>li>a href="">span>Partnersspan>相助伙伴a>li>

li>a href="">span>Contactspan>联系要领a>li>ul>

div>div>

body> html>

在这个效果的实现历程中最关键的地便利是把“li”的margin值阁下两边设为负数,然后把“li”和”a“的宽度设成一样,这样”a“的宽度便是固定的了,而”li“阁下两边由于有margin,以是会缩小。

您可能还会对下面的文章感兴趣: