CSS-实战-梯形背景导航

1、实现效果

梯形背景图导航，如下图。由于导航条文字多少不固定，因此面临的挑战是，当文字内容增加时，中间的背景宽度自动拉伸。CSS3的出现实现这样的效果相对变的容易，本文使用背景图定位的知识，加上CSS其他知识。介绍CSS2实现这样效果的一种思路。

梯形背景导航

2、总体实现思路

（1）准备背景图
注意图片，一定是透明背景格式的，可以另存为下图。

透明背景图

（2）创建A标签嵌套B标签的导航菜单

<a href="javascript:void(0);" class="menu">
    <b>测试</b>
</a>

（3）设置A标签的左边距，背景图从左向右显示。
A标签红色区域的背景显示出来，其他区域背景让B标签的背景将其覆盖。

A标签显示区域

（4）设置B标签的右边距，背景图从右向左显示。
B标签，通过文字的宽度让盒子变宽，同时设置B的右边距，背景图从右向左显示。

B标签显示区域

（5）说明：A标签背景图主要显示左边部分，B标签背景图主要是显示右边和中间部分，AB两个标签的背景图合并，可以显示最终理想效果。

3、细节代码实现步骤

第一步：设置A的属性
（1）:将A标签为浮动标签，A标签的高度为25px.
（2）:将A标签的坐边距设置为25px,可以容纳背景图的弧度.
（3）:将背景图从左边定位，上下不做偏移.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>梯形导航-第一步</title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .header{
        width: 80%;
        height: 50px;
        background-color: #ccc;
        overflow:hidden;
        margin: 0px auto;
        border: 1px solid #ccc;
    }
    .dhbar{
        width: 70%;
        margin-top: 25px;
        margin-right:25px;
        float: right;
        background: white;

    }
    .dhbar a {
        float: left;
        cursor:pointer;
        height: 25px;
        padding: 0px 0px 0px 25px;
        margin: 0px 10px;
        font-size: 13px;
        text-decoration: none;
        color: black; 
        background:url(dh.png) no-repeat left 0px;
        border: 1px solid red;
    }

    .dhbar b{
        border: 1px solid blue;
    }
   
    </style>
</head>
<body>
    <div class="header">
        <div class="dhbar">
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>多个文字测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
        </div>
    </div>
</body>
</html>

设置A元素后的样式

第二步：设置B的基本属性
（1）:设置B为块级元素.
（2）:设置B元素的高度
（3）:设置B元素的文字垂直居中显示,line-height与高度一样
（4）:设置B元素的右边距为25px.

  .dhbar b{
        border: 1px solid blue;
        font-weight: normal;
        display:inline-block;
        height: 25px;
        line-height: 25px; 
        z-index:1;
        color: black; 
        padding: 0px 25px 0px 0px;
    }

设置B元素后的样式

’

第三步：添加B元素背景图

    .dhbar b{
        border: 1px solid blue;
        font-weight: normal;
        display:inline-block;
        height: 25px;
        line-height: 25px; 
        z-index:1;
        color: black; 
        padding: 0px 25px 0px 0px;
        background:url(dh.png) no-repeat right 0px;
    }

B元素添加背景图

第四步：去掉边框样式

最终效果

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>梯形导航</title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .header{
        width: 80%;
        height: 50px;
        background-color: #ccc;
        overflow:hidden;
        margin: 0px auto;
        border: 1px solid #ccc;
    }
    .dhbar{
        width: 70%;
        margin-top: 25px;
        margin-right:25px;
        float: right;
        background: white;

    }
    .dhbar a {
        float: left;
        cursor:pointer;
        height: 25px;
        padding: 0px 0px 0px 25px;
        margin: 0px 10px;
        font-size: 13px;
        text-decoration: none;
        color: black; 
        background:url(dh.png) no-repeat left 0px;
         
    }

    .dhbar b{
        font-weight: normal;
        display:inline-block;
        height: 25px;
        line-height: 25px; 
        z-index:1;
        color: black; 
        padding: 0px 25px 0px 0px;
        background:url(dh.png) no-repeat right 0px;
    }
     
    
    
    </style>
</head>
<body>
    <div class="header">
        <div class="dhbar">
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>多个文字测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
        </div>
    </div>
</body>
</html>

4、添加鼠标移动后效果

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>梯形导航</title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .header{
        width: 80%;
        height: 50px;
        background-color: #ccc;
        overflow:hidden;
        margin: 0px auto;
        border: 1px solid #ccc;
    }
    .dhbar{
        width: 70%;
        margin-top: 25px;
        margin-right:25px;
        float: right;
        background: white;

    }
    .dhbar a {
        float: left;
        cursor:pointer;
        height: 25px;
        padding: 0px 0px 0px 25px;
        margin: 0px 10px;
        font-size: 13px;
        text-decoration: none;
        color: black; 
         
    }

    .dhbar b{
        font-weight: normal;
        display:inline-block;
        height: 25px;
        line-height: 25px; 
        z-index:1;
        color: black; 
        padding: 0px 25px 0px 0px;
    }
     
    .dhbar a:hover{
        background:url(dh.png) no-repeat left 0px;
    }
    
    .dhbar a:hover b{
        color :red;
        background:url(dh.png) no-repeat right 0px;
    }
    
    </style>
</head>
<body>
    <div class="header">
        <div class="dhbar">
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>多个文字测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
            <a href="javascript:void(0);" class="menu">
                <b>测试</b>
            </a>
        </div>
    </div>
</body>
</html>

运行效果：