<meta charset="utf-8" />
<ul id="nav">
<li><a href="####">首页</a></li>
<li><a href="####">关于我们</a></li>
<li><a href="####">发展理念</a></li>
</ul>
<style>
#nav{
width: 200px
}
#nav a{
display: block/*设置成块级元素让链接成为一个可点击方块而不是仅仅文字可点*/
border-top: 3px solid blue/*顶部设置蓝色边线，你愿意的话也可以用图片背景做点更复杂的小花样，比如波浪线*/
background: #eee
line-height: 30px
text-align: center
}
/*a:hover里面设置边框、字体、背景颜色鼠标悬停的状态*/
#nav a:hover{
border-color: red
color: green
font-size: 16px
}
ul, ol, li {
list-style:none outside none
}
a{
text-decoration: none
font-size: 14px
}
</style> <meta charset="utf-8" />
<ul id="nav">
<li><a href="####">首页</a></li>
<li><a href="####">关于我们</a></li>
<li><a href="####">发展理念</a></li>
</ul>
<style>
#nav{
width: 200px
}
#nav a{
display: block/*设置成块级元素让链接成为一个可点击方块而不是仅仅文字可点*/
border-top: 3px solid blue/*顶部设置蓝色边线，你愿意的话也可以用图片背景做点更复杂的小花样，比如波浪线*/
background: #eee
line-height: 30px
text-align: center
}
/*a:hover里面设置边框、字体、背景颜色鼠标悬停的状态*/
#nav a:hover{
border-color: red
color: green
font-size: 16px
}
ul, ol, li {
list-style:none outside none
}
a{
text-decoration: none
font-size: 14px
}
</style>
一、定义一个盒子（“menu”）,用来装这个导航的。二、用无序列表（ul）中的列（li）放导航的内容。
三、把li的浮动（float）设置为向左浮动（float：left；），这样，就实现了水平导航条了。
四、在做其他的一些修饰。（下面我给我弄的一个简单的导航条给你理解）
<!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/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#menu{
width:500px
margin:0 auto/*令盒子居中*/
font-size:20px /*定义字体的大小*/
}
ul{
margin:0padding:0/*把浏览器默认的间隔去掉*/
list-style:none /*把前面的序列号去掉*/
}
li{
float:left /*向左浮动，这个是实现水平的重要步骤！！*/
padding:0 15px /*li里面的字体和边框的距离*/
}
a{
text-decoration:none /*去掉超链接的下划线*/
color:#333 /*超链接的字体颜色*/
}
a:hover{
color:#696
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单1</a></li>
</ul>
</div>
</body>
</html>
<style type="text/css" media="screen">.line_m{text-decoration:line-through} </style><span class="line_m">中间是空格</span>文字<span class="line_m">中间是空格</span>需要多长就多加一个(空格)。CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。 在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。 它的作用可以达到：（1）在几乎所有的浏览器上都可以使用。（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。（4）你可以轻松地控制页面的布局 。（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
