2
3
4
5
6
<div style="float:left"><img src="logo.jpg" /></div>
<div style="float:right">
<ul>
<li><h2>HOME</h2><em>shou ye</em></li>
</ul>
</div>
1
2
3
li{ list-style-type:nonetext-align:centermargin:0 15pxfloat:left}
li h2{ display:blockfont-size:16px}
li em{ font-style:normalfont-size:12px}
上面是html代码，下面是css代码，（都是主要部分），具体的样式自己在根据设计稿修改。大体上就是这样了。
CSS 可以很轻松的控制导航条的样式。可以控制链接放到导航条 以及点击导航条时候的 样式， 比如背景的改变， 字体大小、颜色的改变等等，可以展现良好的交互效果。
要用CSS控制导航条，首先要按照符合W3C标准的HTML代码写出导航的代码，大家习惯使用UL无需列表来制作。UL里面的列表项的标签为li，排列为纵向，一般的导航条为横向，故可以给li加上浮动，让li横向排列。
举例：HTML代码部分
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">新闻列表</a></li>
</ul>
CSS代码部分
<style>
* { padding:0margin:0} /*重设浏览器默认样式*/
#nav{
list-style:none/*修改默认样式，去掉小圆点 */
overflow:hidden/*防止溢出*/
background:blue /*设置背景为蓝色*/
}
#nav li {
float:left/*让列表横向显示*/
}
#nav li a { /*设置鼠标交互的链接样式*/
display:block/*设置为块状元素，方便设置背景*/
float:left/*修正a宽度问题*/
width:auto /*宽度不固定*/
padding:0 15px/*每个导航项目左右各加3像素的间隙*/
color:#fff/*设置连接颜色为白色*/
text-decoration:none/*去掉链接下划线*/
font:normal 12px/25px Arial/*设置连接文字为 12像素大小， 25像素高，字体为Arial */
}
#nav li a:hover { /*鼠标滑过链接时候的设置*/
color:#ff0/*设置颜色为黄色*/
background:darkblue
text-decoration:none/*去掉链接下划线*/
}
</style>
你可以把 以上 两种代码一块儿 粘贴到记事本，保存成html，双击打开看一下效果。
css定义一条导航栏首先建立一个DIV，为其命名为“nav”，在DIV中建立一个<ul>无序列表，导航共有几个栏目，就为列表添加几个<li>的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。
然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：
ul {width:宽度值；height：高度值； list-style:none；}
如果是横向导航，还需为里面的列表项<li>标签设置左浮动的样式，代码为：li {float:left}
每个栏目之间分隔的距离可通过margin（外边距）属性来设置。
导航条的更多样式及详细步骤可去这里参考http://jingyan.baidu.com/article/da1091fb05fe93027849d600.html
