Imitation Jingdong mobile phone recharge progress navigation_html/css_WEB-ITnose

Since the project is going to have a recharge function, I thought JD’s mobile recharge progress bar navigation was pretty good

So I imitated him and made one, but it didn’t work. It's so complicated and doesn't have so many colors. Through analysis, it can be seen that the key to this progress navigation lies in the arrow on the right side of each li. This can be done with the :after selector of CSS. Remember not to use the ::after writing method. This writing method will be invalid under IE8. As for IE browsers before IE8 cannot correctly restore the effect I want. I wonder if any expert can teach me how to use the :after selector correctly before IE8.

First define a ul style progress-nav:

Among them, list-style:none is used to eliminate the small dots in front of each li in ul, overflow: Hidden is for aesthetics. When the browser is not wide enough to fit the text in li, the text that cannot fit is directly hidden. Next, define the style of each li:

li uses relative positioning and floats to the left. This demonstration uses three li, so the width of li is defined as 32%. This can be based on If you can modify the number of li's by yourself, you can also set the width to be enough to fit the text.

Next comes the critical time to define the pseudo-element: after

Set the pseudo-element to absolute positioning (equivalent to the parent node li), and the border is defined as Solid line, the border color is defined as transparent. In fact, what you see is the color of the parent node. border-width is the key. This defines the shape of the triangle. 30px, twice the value of 15px, is the height of the navigation bar, which is the pseudo element. , 24px, twice the width of 12px, is the width of the pseudo element. border-left-color is also the color of the left part of the border, which is the color of the triangle we see. The left border of the rectangle is the upper left corner, lower left corner and center of the rectangle. After the triangle is completed, it must be moved outside the li, so the right is offset to the right by the width of the pseudo element rectangle by 24px. However, after doing this, you will find that there is no effect. At this time, the content is It comes in handy. If you go to w3c and study it, you will know that content is used with the :before and :after pseudo-elements to insert and generate content. But after doing this, you will find that it still has no effect. Don’t worry, that’s because The pseudo element is blocked by the next li, so a z-index needs to be added to cover the pseudo element with the next li.

Having said so much, my saliva has dried up. Let’s take a look at the renderings first

You can find out at once that this still won’t work, because 2. Confirm There is nothing between the order information and 3. Payment. Don’t worry. In fact, the process is very simple. Just add a white line between the two li. In this case, you need to add a white line to each li after the first li. span:

Then define styles for these spans:

The style of span is similar to the pseudo element: after, but the color is different. The left border color of the span is white. At the same time, it is absolutely positioned on the left side of the parent li and moved two pixels to the right. These two pixels will be the white strip we see between my li. If you want the white strip to be wider, increase the span. The left value is fine.

After these are completed, the only thing left is the style of the currently active li. Just change the li to blue:

At the same time, the pseudo element on the right side of this li :after also modify the color accordingly:

OK, it’s finally done, let’s take a rendering. It looks like this under IE9 and above and most other browsers

It looks like this under IE8

Don’t read IE under IE7. I tell you responsibly, it is really not what I want

Finally, attach the style class progress.css for everyone to view:

.progress-nav {    height: 30px;    margin-bottom: 10px;    list-style:none;    line-height: 30px;    text-align: center;    color: #7a91b2;    overflow: hidden;}    .progress-nav li.active {        color: #fff;        background: #5495ec;    }    .progress-nav li {        position: relative;        float: left;        width: 32%;        background: #bdcee6;    }        .progress-nav li:after {            content: "";            position: absolute;            border: solid transparent;            border-left-color: #bdcee6;            border-width: 15px 12px;            right: -24px;            z-index: 100;        }        .progress-nav li.active:after {            border-left-color: #5495ec;        }.progress-nav span {    position: absolute;    border: solid transparent;    border-left-color: #fff;    border-width: 15px 12px;    left: 2px;}

On the web page it is relatively simple:

    <ul class="progress-nav">        <li class="active">            1.填写订单信息        </li>        <li>            <span></span>            2.确认订单信息        </li>        <li>            <span></span>            3.支付        </li>    </ul>

Finally, let’s attach a sample code to the reaching party: progress navigation example