实现滑动门的三种方法_html/css_WEB-ITnose

.boxL{    display: inline-block;    background: url('boxL.png') no-repeat left 0 ;}.boxR{    background: url('boxR.png') no-repeat right 0;}.box{    background: url('boxM.jpg') repeat-x;    font: 14px/30px "宋体";    color: white;    padding: 1px 10px 0;    margin: 0 8px;}

    
        
关于我们
    

两层嵌套

　　两层嵌套，文字只能写到最里面的div里，局限是文字最多只能到父级div的宽度，适用于图片比较小或者拓展要求小，比如按钮。

.boxR{    display: inline-block;    background: url('boxR.png') no-repeat right 0;}.boxB{    background: url('boxB.jpg') repeat-x;    font: 14px/30px "宋体";    color: white;    padding: 1px 10px 0 18px;    margin-right: 8px;}

    
关于我们
    

绝对定位

　　用绝对定位做的滑动门有兼容性，因为在IE6下，绝对定位父级的宽度（高度）是奇数的话，元素的right(buttom)就会有1px的偏差，且无解。

.boxL{    position: absolute;    top: 0;    left: -9px;    width: 9px;    height: 31px;    background: url('boxL.png') no-repeat right 0;}.boxR{    position: absolute;    top: 0px;    right: -9px;    width: 9px;    height: 31px;        background: url('boxR.png') no-repeat right 0;}.box{    position: absolute;    background: url('boxM.jpg') repeat-x;    font: 14px/30px "宋体";    color: white;    padding: 1px 10px 0;    margin: 30px;}

    关于我们    
    
    

实现效果