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，为其命名为“nav”，在DIV中建立一个<ul>无序列表，导航共有几个栏目，就为列表添加几个<li>的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。
然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：
ul {width:宽度值；height：高度值； list-style:none；}
如果是横向导航，还需为里面的列表项<li>标签设置左浮动的样式，代码为：li {float:left}
每个栏目之间分隔的距离可通过margin（外边距）属性来设置。
楼上的明显不对。。。我不看代码只看图就知道你
ul
里没有加宽度
加flaot的元素必须加宽度，而且外层也得有宽度
最后别忘了清除浮动
这样写
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html
charset=utf-8"
/>
<title>无标题文档</title>
<style
type="text/css">
body
{
font-family:Verdana
font-size:14px
margin:0}
a:link,a:visited{font-size:12pxtext-decoration:none}
a:hover{}
body,ul,li,p,form,dl,dt,dd,input
{
margin:0
padding:0
}
ul
{
list-style:none
}
#container
{margin:0
auto
width:100%}
#header
{
height:185px
background:#9c6
margin-bottom:5px}
#header
.title
{
background:url(../images/8.gif)
width:383px
height:46px
float:left
margin:40px
auto
auto
50px
}
#header
.menu{margin:100px
auto
auto
auto}
#header
.menu
ul{float:rightlist-style:nonemargin:0px
width:100%}
#header
.menu
ul
li{float:leftmargin:0
10pxdisplay:blockline-height:28px
width:100px}
#header
.menu
ul
li
a:link,#header
.menu
ul
li
a
visited{font-weight:boldcolor:#666}
#header
.menu
ul
li
a:hover{}
</style>
</head>
<body>
<body>
<div
id
="header">
<div
class="title"></div>
<div
class="menu">
<ul>
<li><a
href="#">原料信息</a></li>
<li><a
href="#">流程</a></li>
<li><a
href="#">渣系</a></li>
<li><a
href="#">热力学</a></li>
</ul>
</div>
</div>
</body>
</body>
</html>
