不规律情况墙 CSS完成情况照片不规律的导航栏菜

2021-03-10 20:40 jianzhan

1般状况下导航栏菜单的情况照片全是较为有标准的,可是平常大家也会遇到许多情况照片样子不规律导航栏条(例如但电脑鼠标移上的情况下,情况照片不规律,本例只探讨此类型型),以下图所示:

(图1)

当电脑鼠标移上去的情况下情况变为鲜红色箭头,或许,咋1看,感觉这个实际效果并沒有甚么非常的地区,可是细心看看我画上去的翠绿色框框一部分,就会发现每块全是接在1起的不容易断掉的;假如说依照一般方式来做,那末完成的将会是下图所示的实际效果:

(图2)

就是块与块之间是断掉的。

拷贝编码
编码以下:

<!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⑻" />
<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 ⑺px;/*这里的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>有关9弘</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“的宽度设成1样,这样”a“的宽度便是固定不动的了,而”li“上下两侧由于有margin,因此会变小。