正文
divcss样式导航条,css 导航条
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
div+css导航栏
楼上的明显不对。。。
我不看代码只看图就知道你
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:12px;text-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:right;list-style:none;margin:0px;
width:100%}
#header
.menu
ul
li{float:left;margin:0
10px;display:block;line-height:28px;
width:100px;}
#header
.menu
ul
li
a:link,#header
.menu
ul
li
a
visited{font-weight:bold;color:#666}
#header
.menu
ul
li
a:hover{}
/style
/head
body
body
div
id
="header"
div
class="title"/div
div
class="menu"
ul
lia
href="#"原料信息/a/li
lia
href="#"流程/a/li
lia
href="#"渣系/a/li
lia
href="#"热力学/a/li
/ul
/div
/div
/body
/body
/html
相关问答
Q1: div+css如何布局头部导航条！
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标签设置外边框。
[img]Q2: CSS+div怎么做图片中的导航条
css+div做图片中的导航条的方法：
思路：对ul里的li设置排成一排所以需要设置一个CSS display:inline让li排成一排，从而让li并排布局。然后需要对ul li里的a标签设置display:block的，但a父级li不设置具体宽度，所以需要对a设置display:inline-block让其a随li并排继承同时对a设置宽度高度等样式生效。
1、CSS代码：
ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto}
ul#nav li{display:inline; height:60px}
ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px;
color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px}
ul#nav li a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/
2、HTML代码
ul id="nav"
lia href=""首页/a/li
lia href=""HTML教程/a/li
lia href=""CSS基础/a/li
lia href=""CSS开发工具/a/li
lia href=""CSS特效/a/li
lia href=""CSS问题/a/li
/ul
3、效果截图
