【步骤1】无样式
一、效果
二、HTML
[html]
<!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=utf-8" />
<title>列表与导航栏</title>
</head>
<body>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
</body>
</html>
<!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=utf-8" />
<title>列表与导航栏</title>
</head>
<body>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
</body>
</html>
【步骤2】基本样式
一、效果
二、HTML
[html]
<!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=utf-8" />
<title>列表与导航栏</title>
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
</body>
</html>
<!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=utf-8" />
<title>列表与导航栏</title>
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
</body>
</html>
三、CSS
[css]
*{
margin:0;
padding:0;
}
body{
font:11px Verdana, Geneva, sans-serif;
background:#666;
}
ul{
list-style:none;
}
*{
margin:0;
padding:0;
}
body{
font:11px Verdana, Geneva, sans-serif;
background:#666;
}
ul{
list-style:none;
}
【步骤3】横向导航条
一、效果
二、HTML
[html]
<ul id="nav">
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
<ul id="nav">
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
</ul>
三、CSS
[css]
#nav{
background:url(../images/nav-bg.png) repeat-x;
height:1%;
overflow:hidden;
margin-top:50px;
text-transform:capitalize;
}
#nav li{
float:left;
background:url(../images/line.gif) no-repeat center right;
padding-right:1px;
}
#nav li a{
display:block;
padding:0 20px;
text-decoration:none;
color:black;
height:30px;
line-height:30px;
float:left;}
#nav li a:hover{
background:url(../images/nav-bg.png) repeat-x left bottom;
color:white;
}
#nav{
background:url(../images/nav-bg.png) repeat-x;
height:1%;
overflow:hidden;
margin-top:50px;
text-transform:capitalize;
}
#nav li{
float:left;
background:url(../images/line.gif) no-repeat center right;
padding-right:1px;
}
#nav li a{
display:block;
padding:0 20px;
text-decoration:none;
color:black;
height:30px;
line-height:30px;
float:left;}
#nav li a:hover{
background:url(../images/nav-bg.png) repeat-x left bottom;
color:white;
}
