Sinsing with you to beautify breadcrumbs with pure CSS

First of all, why is breadcrumbs called breadcrumbs navigation, it comes from a fairy tale, the name of the fairy tale is also very distinctive, called "Hansel and Gretel", one day they go to the forest to play, but walk to find lost, we all know that the forest is a number, no matter which way to go, Or a vast tree, and they spread the crumbs along the way, and they used the crumbs to help them out of the forest, so the breadcrumbs mean where we went and how we got back to where we were.

Sometimes we especially need breadcrumbs navigation, such as we in a forum or an online shopping mall when wandering, it is easy to be the vast number of posts and many of the dizziness around the product, want to go back, you need to help with bread crumbs, so, bread crumbs in our master a site structure and users better use of our site, For example, we can go back to the section from the post through the bread crumbs, and then go back to the homepage through the section, this is the classic use of bread crumbs, for example, we can go back to the product list from the product interface in an online store, then back to the product category interface, and then re-view the other categories.

Let's take a look at the breadcrumbs I just made:

Of course, there are many styles of breadcrumb navigation, here we only introduce this one, and it is relatively simple, I do it in a total of less than five minutes, but before doing it, first to do not know how to do the triangle of children's shoes tutorial basic knowledge, so that you can quickly make their own triangles, Although I have already pointed out in my blog with css ink bubbles, but rewrite this process, we create a new HTML file, write the following:

The interface we get is this:

But actually we don't want so much, we just need one of the triangles on it, so we change the color of the boundary, and the code is as follows:
So we see the following interface:
Since we have learned to make triangles, then we will start to do our bread crumbs, in fact, this time the reader can fully consider their own trial production, because the most important knowledge has been finished, of course, directly see my tutorial is also good Austrian.
The first step, is to create a new HTML file, the main content written in, this file we do not have to modify it until the end, if the reader is not sure, do not modify the Austrian, we fill in the following content:
The second step, we create a new My.css file, and then what we need to do, we first remove the small dots in front of the list, and then set the margin and padding, the code is as follows:
*{margin:0px;padding:0px;}. Nav Ul{list-style-type:none;}
The third step, but now we find our list is vertical arrangement, below we let them float to the left can be arranged horizontally, so we add the following code as follows:
*{margin:0px;padding:0px;}. Nav Ul{list-style-type:none;}. Nav ul Li{float:left;}
Fourth, we find that the problem is that all the lists are squeezed together, for what reason, because we don't set the size of these lists, we set their widths below, and we set the font layout so that they are centered:
*{margin:0px;padding:0px;}. Nav Ul{list-style-type:none;}. Nav ul li{float:left; width:200px;text-align:center;}
In the fifth step, we started setting the nav background because we wanted a brown background color, and we set its width and height as well as the font size, and we added some code that changed to the following style:
*{margin:0px;padding:0px;}. Nav{background-color: #933; width:600px;height:32px;line-height:32px;}. Nav Ul{list-style-type:none;}. Nav ul li{float:left; width:200px;text-align:center;}

Sixth step, in fact, we finished the above style, will find a little uncomfortable, for what, because our text is too dazzling, so, we modify the text font and style, in fact, we mainly do is to remove the hyperlink underline, and the text color to change to black, add code as follows:
*{margin:0px;padding:0px;}. Nav{background-color: #933; width:600px;height:32px;line-height:32px;}. Nav Ul{list-style-type:none;}. Nav ul li{float:left; width:200px;text-align:center;}. Nav ul Li A{color:black;text-decoration:none;}
Seventh step, we start to do our arrows, until here, we do not use our new knowledge, below, we first construct a blank triangle out, it needs to use absolute positioning, we know that if a child element used absolute positioning, then the parent element must use positioning to do, so, We add one to all Li: Position:relative, which is not for anything else, just so that the child elements can be displayed, the code is as follows:
*{margin:0px;padding:0px;}. Nav{background-color: #933; width:600px;height:32px;line-height:32px;}. Nav Ul{list-style-type:none;}. Nav ul li{float:left; position:relative;width:200px;text-align:center;}. Nav ul Li A{color:black;text-decoration:none;}
Eighth step, we first add a blank triangle, we already know how to do the triangle, so here we are to do a white triangle on it, but, it is necessary to note that it is positioned on, we need to let it offset 24 pixels to the right, for what? Because we want to set the bounding rectangle for this triangle to be 24 pixels, we add the following code:
*{margin:0px;padding:0px;}. Nav{background-color: #933; width:600px;height:32px;line-height:32px;}. Nav Ul{list-style-type:none;}. Nav ul li{float:left; position:relative;width:200px;text-align:center;}. Nav ul Li A{color:black;text-decoration:none;}. Nav ul Li em{width:0px;height:0px;border-color:transparent  transparent transparent #FFF; border-style:solid; Border-width:24px;position:absolute;right: -24px;top: -8px;}
Nineth step, the previous step we added a white triangle, now the following:
Tenth step, we start to add a brown triangle, it is worth noting that it needs to move 8 pixels to the left, we set its size here is 16px, so the code is as follows;
*{margin:0px;padding:0px;}. Nav{background-color: #933; width:600px;height:32px;line-height:32px;}. Nav Ul{list-style-type:none;}. Nav ul li{float:left; position:relative;width:200px;text-align:center;}. Nav ul Li A{color:black;text-decoration:none;}. Nav ul Li em{width:0px;height:0px;border-color:transparent  transparent transparent #FFF; border-style:solid; Border-width:24px;position:absolute;right: -24px;top: -8px;}. Nav ul Li i{width:0px;height:0px;border-color:transparent   transparent  transparent #933; border-width:16px; border-style:solid;position:absolute;right:-8px;top:0px;}

Now, let's take a look at our finished product and it's as follows:

OK, a simple bread crumbs is done, if we cooperate with JavaScript knowledge, will do better, here we do not introduce, like it?? If you have any questions, please leave a message and I will explain it patiently.




Sinsing with you to beautify breadcrumbs with pure CSS