欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

关于css如何实现背景图片不规则的导航菜单的示例代码分享

程序员文章站 2022-03-31 09:58:45
...
一般情况下导航菜单的背景图片都是比较有规则的,但是平时我们也会遇到很多背景图片形状不规则导航条(比如但鼠标移上的时候,背景图片不规则,本例只讨论此种类型),如下图所示:

关于css如何实现背景图片不规则的导航菜单的示例代码分享图一

当鼠标移上去的时候背景变成红色箭头,也许,咋一看,觉得这个效果并没有什么特别的地方,但是仔细看看我画上去的绿色框框部分,就会发现每一块都是接在一起的不会断开的;如果说按照普通方法来做,那么实现的可能是下图所示的效果:

关于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,所以会缩小。

以上就是关于css如何实现背景图片不规则的导航菜单的示例代码分享的详细内容,更多请关注其它相关文章!