我正在网上商店工作,我想添加阶段,如下图所示:



我的问题是要突出显示阶段之一,具体取决于应在其上显示的页面。我在HTML中有一个标准的div和ul:

<div id='stages'>
    <ul>
        <li class='selected'>Cart</li>
        <li>Your Details</li>
        <li>Summary</li>
        <li>Payment</li>
        <li>Complete</li>
    </ul>
</div>


还有我的CSS(到目前为止):

div#stages {
    position: relative;
    display: block;
    height: 40px;
    text-align: center;
}
#stages > ul > li:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
#stages > ul > li {
    text-align: center;
    width: 110px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    background: #DDD url(/img/bin/bg-steps.png) no-repeat top right;
    margin: -3px;
    text-indent: -15px;
}
#stages > ul > li.selected {
    background: #306bb4 url(/img/bin/bg-steps.png) no-repeat bottom right;
}
#stages > ul > li:last-child {
    background: #DDD!important;
    padding-right: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}


最初使用图片'bg-steps.png':



看起来不错。但是,事实证明,要选择一个项目太困难了,因为在LI的开头和结尾需要不同的图像。谁能帮我简化这个步骤? See here for a JSFiddle.

编辑:这是我的目标:

最佳答案

试试这个:jsFiddle

在这里,我添加了一些伪类:before:after

在这里,您不需要background中的图片,它是由纯css和html制成的

关于html - 商店舞台和CSS,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22175665/

10-09 15:41
查看更多