商店阶段& CSS

时间:2014-03-04 15:09:52

标签: html css

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

What I want my list to finally look like

我的问题是要突出显示其中一个阶段,具体取决于应显示的页面。我的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':

enter image description here

哪个看起来不错。然而,要获得一个项目被证明是太难了,因为它需要在LI的开头和结尾处的不同图像。任何人都可以帮助/简化这个吗? See here for a JSFiddle.

编辑:这是我的目标:enter image description here

2 个答案:

答案 0 :(得分:2)

试试这个:jsFiddle

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

在这里,您不需要background中的图片,而是在PURE css和html中制作

答案 1 :(得分:0)

使用CSS3,您无需使用图像。

可以使用伪类:before:after的纯CSS解决方案来实现。 您可以使用它在每个li元素之前和之后生成三角形。

您可以在此JSFiddle中找到完整的工作示例。

我在我的一个项目中使用了类似的技巧,它在FF,Chrome和IE10中得到了很好的支持。对于其他浏览器,您需要检查自己,因为我不测试它们。