div+css如何布局头部导航条！

2025-04-26 08:16:43

推荐回答（5个）

回答1：

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

回答2：

采用列表标签ul li + CSS布局+浮动。

实现代码;





www.21shipin.com

#nav {
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}





HomePage

Div CSS教程

CSS布局实例

CSS2.0教程 

CSS在线手册

Web标准

XHTML教程

回答3：





盒子边框

*{
    text-align:center;
}
span{
    font-size:30px;
}
.head{
    width:95%;
    height:50px;
    border:3px solid red;
    color:red;
    position:fixed;   //这个定位方式是最重要的，他可以将盒子固定在指定的位置
    top:0px;          //这就是定位的位置，距离顶端0px
}
.head_black{
    width:100%;
    height:56px;
}
.content{
    width:100%;
    height:1000px;
    border:3px solid blue;
    color:blue;
}



 头部

下部

直接贴我看了题写的实例代码吧。我想你应该是这个意思吧。把导航栏固定在最上部。重点都在里面，如有疑问欢迎追问