同时使用CSS中的float：left来控制li靠左浮动即可实现横向菜单
注意UL或UL的父级容器宽度必须大于所有li宽度的和
例如<style>ul {padding:0margin:0list-style:nonewidth:600pxheight:50pxline-height:50pxtext-align:center}ul li {width:100pxheight:50pxfloat:left}<style><ul><li>菜单项目1</li><li>菜单项目2</li><li>菜单项目3</li><li>菜单项目4</li><li>菜单项目5</li><li>菜单项目6</li><ul>
1、新建一个html页面。
2、在html页面上新建三个div标签，分别为这三个div添加class为:header、main、footer。
3、创建style标签用于设置css样式。在title标签下创建一个style标签，然后为header类设置div的高、背景颜色样式。
4、为显示主要内容的main类设置样式。在style标签里设置main类样式的边框、宽、高、背景颜色。
5、设置底部footer的样式。在style标签里添加footer类样式的背景颜色和高度。
6、保存好html文件后使用浏览器查看效果。
7、在浏览器上看到div标签和浏览器存在一些空白的像素，为了去掉这些空白的像素我们需要把body标签设置外边框。
先用DIV来把导航的位置定下来！ 然后用CSS设置DIV中导航连接的属性，比如颜色下划线等等。 具体怎么做要看你怎么设计了。比如说百度空间的导航就是以下的设置方法：
/*导航栏设置*/
空间名称和简介区域
#header 主体部分{height:89pxbackground:#3399CC}
#header div.lc 左背景图{background:url(temp1/hdl.jpg) no-repeat}
#header div.rc 右背景图{background:url(temp1/hdr.jpg) no-repeat top right}
#header div.tit 空间名称{top:8pxleft:20pxline-height:22pxfont-size:20pxfont-family:黑体}
#header div.tit a.titlink 空间名称链接{color:#FFFFFFtext-decoration:none}
#header div.tit a.titlink:visited{color:#FFFFFFtext-decoration:none}
#header div.desc 空间简介{top:33pxleft:20pxcolor:#FFFFFFfont-size:13px}
#tabline TAB菜单下方的横线{top:89pxbackground-color:#FFFFFF}
#tab TAB菜单主体{top:67pxbackground:url(temp1/tabbg.gif) repeat-x}
#tab a.on,#tab a.on:link,#tab a.on:visited TAB选中状态{margin-top:3pxborder-left:1px solid #FFFFFFborder-right:1px solid #FFFFFFborder-top:1px solid #FFFFFFline-height:19pxbackground-color:#F3F1F1color:#197CAEfont-size:14px}
#tab span TAB与TAB之间的分割符“|”{color:#FFFFFFfont-size:14px}
#tab a:link TAB未选中状态{color:#FFFFFFtext-decoration:nonefont-size:14px}
#tab a:visited{color:#FFFFFFtext-decoration:nonefont-size:14px}
#tab2 设置TAB菜单主体{background:#DAE9F5}
#tab2 span TAB选中状态{color:#000000font-size:12pxfont-weight:bold}
#tab2 a TAB未选中状态{font-size:12px}
#tab2 a:link{color:#0000CC}
#tab2 a:visited{color:#0000CC}
}
