不规则背景墙 CSS实现背景图片不规则的导航菜单
一般情况下导航菜单的背景图片都是比较有规则的,但是平时我们也会遇到很多背景图片形状不规则导航条(比如但鼠标移上的时候,背景图片不规则,本例只讨论此种类型),如下图所示:
(图一)
当鼠标移上去的时候背景变成红色箭头,也许,咋一看,觉得这个效果并没有什么特别的地方,但是仔细看看我画上去的绿色框框部分,就会发现每一块都是接在一起的不会断开的;如果说按照普通方法来做,那么实现的可能是下图所示的效果:
(图二)
即是块与块之间是断开的。
复制代码代码如下:
!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,所以会缩小。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 不规则背景墙 CSS实现背景图片不规则的导航菜单
本文地址: https://pptw.com/jishu/584813.html