什么是导航条导航条背景颜色

【一、项目背景】
让更多的人去学习html，以广东科技学院的导航栏为例，教大家怎么去做一个横向的导航栏。

文章插图

【二、项目准备】
【什么是导航条导航条背景颜色】 准备一个编程的软件Dreamweaver，打开软件点击文件新建一个叫导航栏的项目，如下图所示。

文章插图

点击确定之后，会弹出下图。

文章插图

【三、项目实施】
1. 在<body>标签里面写下一个框架：

文章插图

注：<nav>标签定义导航链接的部分。<ul> 标签定义无序列表，<li>标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

文章插图

2. 写完运行（运行：右下角点击f12运行）看到效果，如下图所示：

文章插图

3. 加入css样式表（这里采用内部样式表）。
3.1 CSS样式表有两种加入的方式如图：

文章插图

3.2 去除li带来的小黑点:
li{list-style: none;}

4. 基于上述步骤，运行一下如下图所示：

文章插图

5. 设置一下导航栏的样式。
1) 设置一下列表ul 的宽度，高度，背景颜色,文字位置居中（margin：0 auto）。
Li 同样的设置高度。
2) 去掉小黑点，再设置文字的颜色，高度，内边距，（个人喜好看着舒服就行）
3) 设置文字的大小，去掉下划线（text-decoration:none;）。

文章插图

下面是详细备注

ul li{float: left; # 把内容左浮动，这样可以横向排列width: 100px;# 设置每个li的宽height: 30px;# 设置每个li的高background-color:pink# 设置li的背景颜色为粉色border: 1px solid 6495ED; # 设置li的边框颜色以及边框大小text-align: center;# 设置li中的文字样式为居中line-height: 30px;# 设置li中文字举例上边框的高度}ulli:hover{background-color: aqua;}# 设置将鼠标放到li时的背景颜色ul li:hover a{color: black;}# 设置将鼠标放到li中的a标签的内容时的文字颜色

6. 完整代码，如下图所示。

文章插图

7. 运行之后，效果图如下图所示。

文章插图

【四、总结】
1. Html能做的效果非常多，希望你耐心的去学习，同时希望碰到问题主动搜索，尝试一下总会有解决方法。
2. 如果需要本文源码，请在公众号后台回复“导航栏”三个字获取。

看完本文有收获？请转发分享给更多的人
IT共享之家
想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/

特别声明：本站内容均来自网友提供或互联网，仅供参考，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。

什么是导航条 导航条背景颜色

什么是导航条导航条背景颜色