欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

不規(guī)則背景墻 CSS實現(xiàn)背景圖片不規(guī)則的導航菜單

  發(fā)布時間：2013-01-02 11:25:51   作者：佚名   我要評論
一般情況下導航菜單的背景圖片都是比較有規(guī)則的，但是平時我們也會遇到很多背景圖片形狀不規(guī)則導航條比如但鼠標移上的時候，背景圖片不規(guī)則，本例只討論此種類型

一般情況下導航菜單的背景圖片都是比較有規(guī)則的，但是平時我們也會遇到很多背景圖片形狀不規(guī)則導航條（比如但鼠標移上的時候，背景圖片不規(guī)則，本例只討論此種類型）,如下圖所示：

（圖一）

當鼠標移上去的時候背景變成紅色箭頭，也許，咋一看，覺得這個效果并沒有什么特別的地方，但是仔細看看我畫上去的綠色框框部分，就會發(fā)現(xiàn)每一塊都是接在一起的不會斷開的；如果說按照普通方法來做，那么實現(xiàn)的可能是下圖所示的效果：

（圖二）

即是塊與塊之間是斷開的。

復制代碼
代碼如下:

<!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是實現(xiàn)這個效果最關鍵的地方*/
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>公司動態(tài)</a></li>
<li><a href=""><span>Partners</span>合作伙伴</a></li>
<li><a href=""><span>Contact</span>聯(lián)系方式</a></li>
</ul>
</div>
</div>
</body>
</html>

在這個效果的實現(xiàn)過程中最關鍵的地方就是把“li”的margin值左右兩邊設為負數(shù)，然后把“li”和”a“的寬度設成一樣，這樣”a“的寬度就是固定的了，而”li“左右兩邊因為有margin，所以會縮小。

相關文章

最新評論