导航条设计制作思路「推荐网页设计如何设计导航条」

管理员 • 2022年10月30日 09:28 • 自媒体

Hi，大家好，美好的一天从这里开始，今天主要讲解导航条设计制作思路,网页设计如何设计导航条，还有思路,颜色,文字等各种干货文章，经过我各种整理总结之后，决定写下这篇文章分享给大家。

【一、项目背景】

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

导航条设计制作思路,网页设计如何设计导航条,思路,颜色,文字

【二、项目准备】

准备一个编程的软件Dreamweaver，打开软件点击文件新建一个叫导航栏的项目，如下图所示。

导航条设计制作思路,网页设计如何设计导航条,思路,颜色,文字

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

导航条设计制作思路,网页设计如何设计导航条,思路,颜色,文字

【三、项目实施】

1. 在标签里面写下一个框架：

导航条设计制作思路,网页设计如何设计导航条,思路,颜色,文字

注：

标签定义导航链接的部分。

标签定义列表项目。
标签可用在有序列表 (
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. 如果需要本文源码，请在公众号后台回复“导航栏”三个字获取。

ok，本文全部结束，希望你看到这篇文章以后能举一反三，看完了，如果你觉得导航条设计制作思路「推荐网页设计如何设计导航条」还不错的话希望多多支持哦！浏览寂寞网更多页面学习更多相关知识哦！