關于css如何實現背景圖片不規則的導航菜單的示例代碼分享

來源：懂視網責編：小采時間：2020-11-27 18:50:38

關于css如何實現背景圖片不規則的導航菜單的示例代碼分享

關于css如何實現背景圖片不規則的導航菜單的示例代碼分享:一般情況下導航菜單的背景圖片都是比較有規則的，但是平時我們也會遇到很多背景圖片形狀不規則導航條（比如但鼠標移上的時候，背景圖片不規則，本例只討論此種類型）,如下圖所示：（圖一）當鼠標移上去的時候背景變成紅色箭頭，也許，咋一看，覺得這個效果并

推薦度：

點擊下載本文 文檔為doc格式

導讀關于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,p,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>
 <p id="warp">
 <p 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>
 </p>
 </p></body></html>

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

關于css如何實現背景圖片不規則的導航菜單的示例代碼分享

推薦度：

點擊下載本文 文檔為doc格式

標簽：背景導航菜單

熱門焦點

關于css如何實現背景圖片不規則的導航菜單的示例代碼分享

關于css如何實現背景圖片不規則的導航菜單的示例代碼分享

關于css如何實現背景圖片不規則的導航菜單的示例代碼分享

最新推薦

猜你喜歡

熱門推薦