| H1, h2
{
Font: normal 200%/100% Garamond, "", serif;
Margin-bottom: 0px;
Color: #630;
Background: transparent;
}
H2
{
Font-size: 150%;
}
# Header
{
Padding: 5px;
Border-bottom: # ccc 1px solid;
}
# Main
{
Margin-left: 210px;
Padding: 5px;
}
# Footer
{
Clear: both;
Padding: 5px;
Border-top: # ccc 1px solid;
}
# Navigation
{
Float: left;
Width: 200px;
Padding: 5px;
}
# Navigation ul
{
Margin-left: 0;
Padding-left: 0;
List-style-type: none;
Font-family:
}
# Navigation a, li # current
{
Display: block;
Width: 180px;
Text-decoration: none;
Padding: 5px;
Border-bottom: # fff solid 1px;
Background-color: #630;
Color: # fff;
}
# Navigation a: hover, # navigation a: active, # navigation a: focus, li # current
{
Background-color: # c90;
Color: #000;
}
<! DOCTYPE html
PUBLIC "-// W3C // dtd xhtml 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<Head>
<Title> Vertical Navigation </title>
<Meta http-equiv = "Content-Type" content = "application/xhtml + xml; charset = gb2312"/>
<Link href = "vertical.css" rel = "stylesheet" type = "text/css"/> <Body>
<Div id = "header">
<H1> vertical navigation menu created by CSS on the webpage teaching Network </Div>
<Div id = "navigation">
<Ul>
<Li> <a href = "# start" tabindex = "1"> skip navigation </a> </li>
<Li id = "current"> home page </li>
<Li> <a href = "/jianzhan" tabindex = "3"> website creation guide </a> </li>
<Li> <a href = "/news/index.htm" tabindex = "4"> on-site news </a> </li>
<Li> <a href = "/web" tabindex = "5"> webpage creation </a> </li>
<Li> <a href = "/program" tabindex = "6"> network programming </a> </li>
</Ul>
</Div>
<Div id = "main">
<H2 id = "start"> homepage <P>
Statement: 1) This site does not guarantee the integrity and security of the software or tutorials provided. 2) Check for viruses before use and download the corresponding reader. 4) do not delete this instruction file if you have reprinted the resources provided by this site. 5) All programs provided on this site are collected online. If this program involves or infringes on your copyright, please write a letter to inform us immediately. 6) the software provided on this site is only available for research and use. Please delete it within 24 hours after the download. Do not use it for commercial purposes. All consequences caused by this will be irrelevant to this site. This site provides service projects for you to build online mall English-Chinese Translation Advertising Program Development materials for sale note: Recommended use: WinRAR V3.0 or later version unzip this site software unzip password: Web teaching Network: on the altar: /bbs </p>
</Div>
<Div id = "footer">
<P>
Copyright © 2005. All Rights Reserved.
</P>
</Div>
</Body>
</Html> 2. Horizontal navigation example: (1) CSS file: (save as horizontal.css) H1, h2
{
Font: normal 200%/100% Garamond, "", serif;
Margin-bottom: 0px;
Color: #630;
Background: transparent;
} H2
{
Font-size: 150%;
} # Header
{
Padding: 5px;
Border-bottom: # ccc 1px solid;
} # Main
{
Margin-left: 210px;
Padding: 5px;
} # Footer
{
Clear: both;
Padding: 5px;
Border-top: # ccc 1px solid;
} # Navigation
{
Float: left;
Width: 200px;
Padding: 5px;
} # Navigation ul
{
Margin-left: 0;
Padding-left: 0;
List-style-type: none;
Font-family:
} # Navigation a, li # current
{
Display: block;
Width: 180px;
Text-decoration: none;
Padding: 5px;
Border-bottom: # fff solid 1px;
Background-color: #630;
Color: # fff;
} # Navigation a: hover, # navigation a: active, # navigation a: focus, li # current
{
Background-color: # c90;
Color: #000;
} |
