Share an example code with an arrow breadcrumbs navigation bar

This article mainly introduces the sample code for making beautiful and attractive breadcrumb navigation bar with arrows. Has a good reference value. Let's take a look at the little series.

Make a beautiful breadcrumbs navigation bar

Before I start, I'm going to give you the usual science. What is a breadcrumb? Navigation bar

Similar to the following types of

Home > section page > Article page

Home/Columns/article page

You can tell visitors where they are currently in the site and how to return the DOM called Breadcrumbs Navigation bar

But......

Don't you think it's a bad thing to see?

If one day, your company's UI gives you a picture, the breadcrumb navigation bar in the diagram is like this

Such a

Or the other patterned breadcrumb navigation bar, what should I do?

May have a friend said this simple, so easy, directly find a pattern to the navigation bar plus background on the line

But is it really that simple? Okay, nonsense, let's just start practicing and see how we can finish this high-value bread-cutting navigation bar

1, first use the unordered list to do a navigation bar, the code is as follows

<ul>    <li>        <a href= "#" > Home </a>    </li>    <li>        <a href= "#" > Home 2</a>    </li>    <li>        <a href= "#" > Home 3</a>    </li>    <li >        <a href= "#" > Home 4</a>    </li>    <li>        <a href= "#" > Home 5</a>    </li></ul>

Next is the CSS code

Body{background: #000}ul{list-style:none;} Li{width:60px;height:50px;line-height:50px;float:left;background: #6cf; text-align:center;} A{color: #000; text-decoration:none;}

CSS code is nothing special, just like the usual nav. The next step is to put the background map we have selected, which is the picture below

Add a background image to Li in the navigation bar

body{                background: #000;            }            ul{                List-style:none;                margin:100px 100px;            }            li{                width:60px;                height:30px;                line-height:30px;                Float:left;                Background: #6cf;                Text-align:center;                Background:url (img/bg.png) no-repeat 100% 0;            }            a{                color: #000;                Text-decoration:none;            }

This time the page effect is such a child

Nani? That's a little wrong, huh? Director, there's something wrong with this script!

There is a problem, but where is the problem?

In the previous comparison, where the problem is immediately clear, each navigation (except the last one) of the > is stacked on the next navigation in the vicinity of the body, then this time, we just need to add a margin-left:-15px to the LI tag;

li{                width:80px;                height:30px;                line-height:30px;                Float:left;                Background: #6cf;                Text-align:center;                Background:url (img/bg.png) no-repeat 100% 0;                Margin-left: -15px;            }

Since the width of the opening is not enough, so here I added the width of Li slightly, plus, after that, our breadcrumb navigation bar becomes this way

Hey? Where are our arrows?

What about the arrows?

Where's the 第1-4 arrow?

Let us go back to the previous operation, we are the last step to add margin-left:-15px to the LI tag;

There is a feature in the front-end, the property that is written later usually overrides the previous property, and the DOM structure is not overwritten, but when the two locations overlap, before the Z-index attribute is added, or when the property value is equal, the post-written DOM structure is

This is also the case here, so we just need to add a different z-index on the Li tag (to want the Z-index property to take effect, you must first position, position:relative)

There is no limit to the value of Z-index, but only one thing is that the last Li tag is the smallest, and so on, gradually increasing, the first one is the largest.

The final code is like this.

<!        DOCTYPE html>