Sample code sharing on how to implement a navigation menu with irregular background images using css-CSS Tutorial-php.cn

Sample code sharing on how to implement a navigation menu with irregular background images using css

黄舟

Release： 2017-07-19 15:13:29

Original

1974 people have browsed it

Generally, the background images of navigation menus are relatively regular, but usually we also encounter many navigation bars with irregular background images (for example, when the mouse is moved over, the background image is irregular, This example only discusses this type), as shown in the following figure:

(Figure 1)

When the mouse is moved up, the background turns into a red arrow. Maybe, at first glance, I think there is nothing special about this effect, but if you look carefully at the green frame I drew, you will find that each piece is connected to They will not be disconnected together; if you follow the ordinary method, the effect may be as shown in the picture below:

(Picture 2)

That is, the blocks are disconnected.

<!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(&#39;.previous,img&#39;); 
     </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>

Copy after login

The most critical part in the realization of this effect is to set the left and right margin values of "li" to negative numbers, and then " Set the width of "li" and "a" to be the same, so that the width of "a" is fixed, and the left and right sides of "li" will shrink because of the margin.

The above is the detailed content of Sample code sharing on how to implement a navigation menu with irregular background images using css. For more information, please follow other related articles on the PHP Chinese website!