Many webpages will have small triangles in navigation bars, in fact, the realization of this function is quite simple.
Take the navigation on the first page of the novice bird tutorial as an example
First, write a large div_nav, while "home page", "novice notes", "novice tools", "reference manual" and so on are included as div in div_nav. The div_nav background color is set to the corresponding color.
The setting code of background color is as follows:
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{
color:#fff;
background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;
}
Namely:
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current
The code in the figure above is annotated as follows:
id is li of ul in menu. That's every element in the navigation bar. The mouse will be put up after the effect.
After adding ul, it shows that the pop-up is an UL element.
The whole css here specifies the style in the ul element.
To put it plainly, it's the effect of the mouse crossing the navigation bar.
For example, let's set the font color by sliding the mouse over a label element in html:
a:hover{color:red;}
a:hover represents the mouse scratch
a:current should mean getting the focus.
Small triangles are also well set up.
.blue #slatenav
{position:relative;
display:block;
height:42px;
font-size:11px;
font-weight:bold;
background:transparent url(images/blueslate_background.gif)repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;
}
Set up background pictures of small div s such as "Home Page" through backgrounds.
The above settings have the effect of sliding the mouse over the label, so when the mouse slides to other labels, it will also show the background of the small triangle.
When the mouse slides over other tags:
Well, such a navigation with a small triangle is done. As for other details, you can adjust it slowly by yourself.
Note: The namespace of the document is declared in the code.
Write tags alone do not declare the namespace of the document, but add xmlns="http://www.w3.org/1999/xhtml" to declare the namespace of the document. Namespaces are declared, and browsers will follow this specification when parsing the tags of your HTML documents. In general use, you will not feel the difference between the two.
The special case is that some tags are interpreted, such as the naming specification of xhtml, which requires that tags must be strictly closed. A single tag should be marked with "/" at the end. If you use the naming specification of XHTML and do not follow the specifications in the writing of tags, it may occur that the tag can not be parsed. So a good writing habit is to suggest ending tags.
Small partners interested in web front-end technology can join our learning circle, because I am not 211,985, just an ordinary undergraduate, English is not particularly good, mathematics is not particularly good. So I chose the front end. In my sixth year of work, I am glad that I have chosen this road. 767-273-102 autumn skirt. I worked in a goose factory, and I fooled with the entrepreneurs. I want to share my technology with you. If you are still confused, I hope to help you with some of my meagre efforts. They are all people with dreams. We may be in different cities, but we will travel together. Front end, front end, front end
Attached source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content=" " /> <meta name="description" content=" " /> <title>Horizontal navigation</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body style="text-align:center"> <p> </p> <div class="blue"> <div id="slatenav"> <ul> <li><a href="http://Sc.chinaz.com/"title=" CSS menus "class=" current "> home page</a></li> <li><a href="http://Sc.chinaz.com/"title="css menus">novice notes</a></li> <li><a href="http://Sc.chinaz.com/"title="css menus">rookie tool</a></li> <li><a href="http://Sc.chinaz.com/"title="css menus">reference manual</a></li> <li><a href="http://Sc.chinaz.com/"title="css menus">user notes</a></li> <li><a href="http://Sc.chinaz.com/"title="css menus">test/exam</a></li> <li><a href="http://Sc.chinaz.com/"title="css menus">local bookmark</a></li> <li><a href="http://Sc.chinaz.com/"title="css menus">Log in</a></li> </ul> </div> </div> </body> </html>