CSS-滑动门技术

核心技术:利用css精灵(主要是背景位置)和盒子padding撑开宽度,以便能适应不用字数的导航栏。
1. 使用a设置背景左侧,并用padding-left撑开合适的宽度
2. span设置背景右侧,padding-right撑开合适的宽度,最好和上面的padding-left设置为同一个值,以实现文字左右居中的效果。
3. 使用a标签包含span就是因为整个导航都是可以点击的。


      首页首页首页

.a {
    display: inline-block;
    height: 33px;             /*不要设置宽度,宽度是用内容撑开的*/
    line-height: 33px;
    background: url(image/bgi.png) no-repeat;
    padding-left: 15px;
    color: #fff;
    text-decoration: none;    /*去除下划线*/
}

.span {
    display: inline-block;
    height: 33px;
    background: url(image/bgi.png) no-repeat right;    /*背景图像不平铺,右对齐*/
    padding-right: 15px;
}

你可能感兴趣的:(CSS-滑动门技术)