Shulou(Shulou.com)06/03 Report--

This article focuses on "how to write CSS code should achieve the navigation bar", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to write CSS code should implement the navigation bar"!

Method one

Note: this method uses CSS3, has no pictures, is compatible with all kinds of webkit browsers and is compatible at the same time. First, the picture above:

1. The first is the HTML code, which is relatively simple. You only need a simple ul and li to code as follows:

The code is as follows:

Home page

Catalogue

Subdirectory

two。 Next is the CSS code, starting with setting the regular li float and a tag beautification:

The code is as follows:

# crumbs ul li {

Float: left

List-style: none

}

# crumbs ul li a {

Display: block

Float: left

Height: 34px

Background: # f66fa2

Text-align: center

Padding: 10px 20px 0 45px

Position: relative

Margin: 0 10px 0 0

Font-size: 20px

Text-decoration: none

Color: # fff

}

Next comes the key to breadcrumb navigation, creating arrowhead effects with before and after:

The code is as follows:

# crumbs ul li a:after {

Content: ""

Border-top: 22px solid transparent

Border-bottom: 22px solid transparent

Border-left: 22px solid # f66fa2

Position: absolute; right:-22px; top: 0

Z-index: 1

}

# crumbs ul li a:before {

Content: ""

Border-top: 22px solid transparent

Border-bottom: 22px solid transparent

Border-left: 22px solid # fff

Position: absolute; left: 0; top: 0

}

# crumbs ul li:first-child a {

Border-top-left-radius: 5px

Border-bottom-left-radius: 5px

Padding-left: 40px

}

# crumbs ul li:first-child a:before {

Display: none

}

# crumbs ul li:last-child a {

Padding-right: 30px

Border-top-right-radius: 5px

Border-bottom-right-radius: 5px

}

# crumbs ul li:last-child a:after {

Display: none

}

# crumbs ul li a:hover {

Background: # e56592

Transition: all 0.2s ease

}

# crumbs ul li a:hover:after {

Border-left-color: # e56592

Transition: all 0.2s ease

}

Finally, clear the float:

The code is as follows:

.fixed {

Clear: both

}

Method 2:

XML/HTML Code copies content to the clipboard

Pure css to make bread crumbs, compatible with IE6

* {margin:0;padding:0;list-style-type:none;}

A,img {border:0;}

Body {font:12px/180% Arial, Helvetica, sans-serif, "New Song style";}

/ * demo * /

.demo {width:600px;margin:100px auto;background:#f0f0f0;position:relative;}

.demo ul {height:32px;overflow:hidden;}

.demo li {float:left;width:200px;text-align:center;position:relative;z-index:2;font-weight:bold;font-size:14px;line-height:32px;}

.demo li em {position:absolute;right:-24px;top:-8px;width:0;height:0;line-height:0;border-width:24px 0 24px 24pxbot border color color transparent transparent # fff;border-style:dashed dashed dashed solid;}

.demo li I {position:absolute;right:-16px;top:0;width:0;height:0;line-height:0;border-width:16px 0 16px 16px bordercolor dashed dashed solid; dashed dashed solid;}

.demo li.current {background:#f60;color:#fff;z-index:1;}

.demo li.current I {border-color:transparent transparent transparent # f60;}

Bread crumbs one

Bread crumbs two

Bread crumbs two

At this point, I believe you have a deeper understanding of "how to write CSS code should implement the navigation bar", you might as well to actually do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.