通过div+css做出好看的横排导航栏

最新推荐文章于 2024-06-10 14:22:01 发布

零幺幺幺

最新推荐文章于 2024-06-10 14:22:01 发布

阅读量1.6w

点赞数 14

文章标签： html css 导航 web前端布局

本文链接：https://blog.csdn.net/u014340533/article/details/42005765

版权

第一次写博客，希望大家支持，如果有什么不严谨或者写错的地方，望大家批评矫正。希望论坛大牛多指点，菜鸟一只，最近在学前端布局，因为自己刚学会的，所以分享出来给大家，希望对像我一样的菜鸟有所帮助！

1.首先写好基本的HTML代码，这个就不必多加解释了，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</head>

</div>

</body>

</html>

以上代码的效果如下图

2.下面就通过div和CSS的编写来改变他的样式

首先给导航栏这一层规定高和宽，这根据实际项目具体修改就可以，我为了给大家演示效果，代码如下

#menu {
background-color: #07f8bc;//背景颜色
height: 40px;
width: 750px;
margin-right: auto;//以下设置导航层居中
margin-left: auto;
}

效果如下图

这样看起来很丑，大家不要着急，下面我们通过CSS样式控制来让它变成我们想要的样子

3.设置<ul>和<li>的样式

通过编写<li>的样式，让列表变成我们想要的横排的样式，代码如下：

设置列表的宽

.nav ul{
width:980;
}
.nav ul li{
float:left;//左浮动，让列表项变为横排
list-style-type:none;/*设置列表的格式。也就是把列表前面的点或者其他样式隐藏*/
}

效果如下图所示

列表虽然变成了横排，但是看起来还是不如我们在其他网站上面看的那些导航栏那么好看。所以我们要继续对超链接进行样式设置

4.设置<a>标签的样式

代码如下：

.nav ul li a{
width:120px;
height:28px;
line-height:28px;//两个超练级间距
margin:5px 10px;//设计边距
text-align:center;
text-decoration:none;//取消超链接的下划线
display:block;//超链接以块级标签显示
background:#07f8bc;
}

.nav ul li a:link{/*鼠标点击超链接时的状态*/
width:120px;
height:28px;
line-height:28px;
background:#07f8bc;
}
.nav ul li a:hover {/*鼠标点击超链接时的状态*/
width:120px;
height:28px;
line-height:28px;
background:#fff;
}

效果如下：

可以看出，现在的<a>已经变成块级标签了，但是相信大家看出来了，为什么标题4，标题5，改变了位置？因为我们想实现的导航栏是嵌套子标题的，也就是说在列表里面嵌套列表。所以，我们对子标题还没有控制样式，子标题就把标题4，标题5给挤出3了div层。下面我们设置子列表的样式来让导航栏变成我们想要的样子。

5.子列表的样式设置

我们想把子列表竖排显示，并且隐藏子列表，当鼠标经过它的父列表时显示子列表，下面我们开始写代码

.nav ul li ul{
display:none;/*隐藏子列表的显示，这个属性必须给出*/
padding:0px;
margin:0px;
}
.nav ul li ul li{
margin-left:10px;
float:none;//取消浮动，让列表标签竖排显示
padding:0px 0px 0px 0px;
}
.nav ul li ul li a{
width:120px;
height:28px;
text-align:center;
text-decoration:none;/*设置取消下划线*/
display:block;/*将<a>转换为块级元素*/
background:#bcb9b7;
margin:0px 0px 0px 0px;
}
.nav ul li:hover ul{/*鼠标经过时显示子标题，此属性也必须给出，不然鼠标经过时也不会显示子列表*/
display:block;
}
添加以上代码后，我们的标题栏就会如下图所示：

这就是我们预期的标题栏效果。菜鸟一只，希望对WEB前端感兴趣的你多多跟我交流，很喜欢交朋友。也希望这方面的大牛多多指点，向你们学习。谢谢浏览！

零幺幺幺

关注

14
点赞
踩
49

收藏

觉得还不错? 一键收藏
1
评论
通过div+css做出好看的横排导航栏

第一次写博客，希望大家支持，如果有什么不严谨或者写错的地方，望大家批评矫正。希望论坛大牛多指点，菜鸟一只，最近在学前端布局，因为自己刚学会的，所以分享出来给大家，希望对像我一样的菜鸟有所帮助！1.首先写好基本的HTML代码，这个就不必多加解释了，代码如下：无标题文档标题1标题2标题3子标题1子标题2标题4标
复制链接

扫一扫