div+css导航栏

html-css033

div+css导航栏,第1张

楼上的明显不对。。。

我不看代码只看图就知道你

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>

先码好导航栏所需要的基本的HTML代码

这个就不必多说具体的代码如下：

<html>

<head>

<title>横向导航栏</title>

<style>

<!---->

</style>

</head>

<body>

<div class="nav">

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">导航1</a></li>

<li><a href="#">导航2</a></li>

<li><a href="#">导航3</a></li>

<li><a href="#">导航4</a></li>

<li><a href="#">导航5</a></li>

<li><a href="#">导航6</a></li>

</ul>

</div>

</body>

</html>

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标签设置外边框。