CSS-实战-梯形背景导航

1、实现效果

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

梯形背景导航

2、总体实现思路

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

透明背景图

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


    测试

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

A标签显示区域

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

B标签显示区域

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

3、细节代码实现步骤

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

设置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元素添加背景图

第四步：去掉边框样式

最终效果

源代码：

4、添加鼠标移动后效果

源代码：