用CSS创建导航菜单的两个例子
原创教程，转载请注明出处：网页教学网用CSS创建导航菜单的两个例子 现在使用CSS+XHTML制作网页，通常网页需要导航，导航通常有两种：水平和垂直。 1.垂直导航的例子：(单击此处浏
原创教程，转载请注明出处：网页教学网用CSS创建导航菜单的两个例子
现在使用CSS+XHTML制作网页，通常网页需要导航，导航通常有两种：水平和垂直。
1.垂直导航的例子：(单击此处浏览演示效果)
(1)CSS文件：(保存为vertical.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;
}
(2)完整的HTML文件：(保存为vertical.htm)
<!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" /> </head>
<body>
<div id="header">
<h1>网页教学网用CSS制作的垂直导航菜单</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#start" tabindex="1">跳过导航</a></li>
<li id="current">本站首页</li>
第 1 2 3 页
现在使用CSS+XHTML制作网页，通常网页需要导航，导航通常有两种：水平和垂直。
1.垂直导航的例子：(单击此处浏览演示效果)
(1)CSS文件：(保存为vertical.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;
}
(2)完整的HTML文件：(保存为vertical.htm)
<!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" /> </head>
<body>
<div id="header">
<h1>网页教学网用CSS制作的垂直导航菜单</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#start" tabindex="1">跳过导航</a></li>
<li id="current">本站首页</li>
第 1 2 3 页
- 上一篇：提高网页的维护更新效率(CSS篇)
- 下一篇：用CSS美化你的网页
精彩图集
精彩文章