如何用DIV+CSS做漂亮的横排导航栏

border:1px solid #000;/*设置一个颜色为#000,宽度为1px的边框*/ margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/ } 测试结果应为图3。因为我们要做的是横向的导航栏,所以现在我们要把它变成横向排列。我们在样式中加入以下代码。.nav ul li{ float:left;/*让li元素左浮动*/ }...
如何用DIV+CSS做漂亮的横排导航栏
先码好导航栏所需要的基本的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)

下面我们通过CSS 来改变他的样式。
首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度,没有宽度就没法居中,这个的原因我就不用赘述了吧!
现在常用的网站宽度为960或980(当然也有其他的,一些网站会根据访客的显示器大小有不同宽度的样式,原因我就不在这多废话了)我们在这就用980吧。
方法是在<style></style>之间加入如下代码来改变他的宽度。为了让结果明显,我们给它又加了一个边框。

<style>
<!--
.nav ul{
width:980px;/*设置元素宽度为980px*/
border:1px solid #000;/*设置一个颜色为#000,宽度为1px的边框*/
}
-->
</style>

测试结果如图2

接下来我们让他居中。我们在样式中加入以下代码。
.nav ul{
width:980px;/*设置元素宽度为980px*/
border:1px solid #000;/*设置一个颜色为#000,宽度为1px的边框*/
margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/
}

测试结果应为图3。

因为我们要做的是横向的导航栏,所以现在我们要把它变成横向排列。我们在样式中加入以下代码。

.nav ul li{
float:left;/*让li元素左浮动*/
}
我们看到测试结果如图4。

边框之所以挤到一起了是因为浮动以后 li就变成了联级元素,就没有宽和高了,所以也就没法把边框撑起来了啊。(具体的原因想知道可以百度)当然稍后我们可以给ul或.nav加上高度。

接下来,我们通过给元素<a>添加样式,让他更美观。加入以下代码。
.nav ul li a{

width:80px;/*设置元素宽为80px*/
height:28px;/*设置高度为28px*/
line-height:28px;/*设置行距为28px,让文字在每行的中间位置*/
background:red;/*设置元素的背景为红色*/
color:#FFF;/*文字颜色是白色*/
margin:5px 10px;
font-size:12px;/*用12号字*/
display:block;/*这个比较关键,因为a本身就是联级元素,本身不具有宽高,用这个把它变成块级元素,这样前面设置的宽和高就能起作用了*/
text-align:center;/*让文本居中*/
text-decoration:none; /*去掉下划线*/
}
效果如图5

我们再加入点互动,当访客鼠标放到某个元素上的时候,这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。
.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时,这个a元素的样式就按下面的代码执行*/
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}

测试结果如图6

最后稍微整理一下代码

.nav ul{
width:980px;
margin:0px auto;
height:38px;
padding:0;
}
.nav ul li{
float:left;
}
.nav ul li a{
width:80px;
height:28px;
line-height:28px;
background:red;
color:#FFF;
margin:5px 10px;
font-size:12px;
display:block;
text-align:center;
text-decoration:none;
}
.nav ul li a:hover{
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
看看效果,成功没?
思路就是这样的,其中还可以再加一些自己的元素,比如背景图片之类,效果就更好了。2015-06-11
mengvlog 阅读 9 次 更新于 2025-07-19 09:21:50 我来答关注问题0
  • 测试结果应为下图(1)下面我们通过CSS 来改变他的样式。首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度,没有宽度就没法居中,这个的原因我就不用赘述了吧!现在常用的网站宽度为960或980(当然也有其他的,一些网站会根据访客的显示器大小有...

  •  武汉誉祥科技 如何实现多个div横排列

    第一种方法是利用CSS的display属性。默认情况下,div元素的display属性值为block,这意味着它们会在各自的行内显示,即一个div占据一行。为了实现多个div在同一行内显示,我们可以将div的display属性设置为inline。这样,多个div就会在同一行内横向排列。第二种方法则是使用float属性。float属性可以指定元素的...

  • 1. 创建两个div,并给它们应用float:left样式。2. 在这两个div的外部创建一个父级div。3. 给这个父级div设置宽度,使其恰好容纳两个子div。4. 确保父级div的溢出内容会自动换行。这样设置之后,当内容超过两个div的总宽度时,新的div就会自动换到下一行。这种方法简单有效,适用于大多数需要控制布...

  • /* 1. 清除ul默认样式 */ ul { padding: 0;margin: 0;list-style: none;} /* 2. 设置水平方向主菜单, 设置子菜单弹出位置相对于当前父菜单项 */ li { float: left; /* 产生水平菜单 */ position: relative; /* position为非static时才能让子菜单弹出位置相对当前菜单项 */ width: 10e...

  • 步骤一:HTML结构调整 在`index.html`中,针对头部导航添加8个超链接,实现导航栏的基本结构。步骤二:CSS样式调整 在`bd.css`文件中,对头部左侧的`div`(`head-left`)应用左内边距样式,确保导航链接有足够的间距。同时,定义导航链接的样式和鼠标悬浮时的颜色变化。步骤三:去除背景颜色 注释掉`...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部