div+css如何布局头部导航条！
这样的一个网站头部，分为3个部分{logo、导航、按钮}用div+css怎么布局、3个快如何放在一个容器内、请老师们指点！最好是能写下布局代码。非常感谢大家的帮助。...
这样的一个网站头部，分为3个部分{ logo、导航、按钮 }用div+css怎么布局、3个快如何放在一个容器内、请老师们指点！最好是能写下布局代码。非常感谢大家的帮助。
展开
11个回答
展开全部
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标签设置外边框。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
采用列表标签ul li + CSS布局+浮动。
实现代码;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.21shipin.com</title>
<style type="text/css">
#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;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>HomePage</li>
<li>Div CSS教程</li>
<li>CSS布局实例</li>
<li>CSS2.0教程 </li>
<li>CSS在线手册</li>
<li>Web标准</li>
<li>XHTML教程</li>
</ul>
</div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子边框</title>
<style type="text/css">
*{
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;
}
</style>
</head>
<div class="head">
<span>头部</span>
</div>
<div class="head_black"> <!-- 设置空白，因为head在定为fixed后是不占据页面空间的-->
</div>
<div class="content">
<span>下部</span>
</div>
<body>
</body>
</html>
直接贴我看了题写的实例代码吧。我想你应该是这个意思吧。把导航栏固定在最上部。重点都在里面，如有疑问 欢迎追问
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
推荐现成的导航源代码，来自渴切-来源中文css框架，供你参考
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（9）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
