网页导航栏制作：如何为网页添加导航栏

01

制作一个放导航栏的容器

制作一个放导航栏的容器，容器名为nav，容器宽为1000px，高为30px，背景颜

色为灰色，相关代码如下：

#nav

{

width:1000px

height:30px

background:#CCC

margin:0 auto

margin-top:50px

}

<div id="nav"></div>

02

显示结果

在浏览器中显示的结果为下图所示：

03

在容器中放入一些导航栏

导航栏代码如下:

<ul>

<li>模块一</li>

<li>模块二</li>

<li>模块三</li>

<li>模块四</li>

<li>模块五</li>

<li>模块六</li>

</ul>

04

为导航栏添加一些属性

<style type="text/css">

#nav

{

width:1000px

height:30px

background:#CCC

margin:0 auto

margin-top:50px

}

#nav ul

{

width:960px

height:35px

}

#nav ul li

{

float:left

width:100px

float:left

list-style:none

background:yellow

line-height:35px

}

</style>

05

导航栏在浏览器页面的显示结果如下图所示：

1、开机进入系统桌面，将鼠标移至IE浏览器处，双击打开。

2、进入到浏览器的主页网站，可以看到笔者设置的主页网址为360网址。

3、现在，开始设置IE的浏览器主页地址点击浏览器右上角的工具选项，在d出选项后，再点击Internet选项。

4、进入到Internet选项后，可以看到当前的主页网址框。

5、现在，便可以在主页网址框中输入你喜爱的网站地址，来更换你的IE浏览器主页地址。输入完成后，先点击应用选项，再点击确定选项。

作为一个网站的核心模块，它对于网站的分流以及用户的指导起着至关重要的作用。那么如何制作网页的导航栏呢？下面小编将给您支招，2大步即可完成导航栏的添加，让你在网页制作过程中省心又省事。

ce881c1c3191ac4eee859298c78389d2.png

一、账号登录

进入凡科网首页，点击右上角的【登录】按钮，完成凡科网账号的登录，进入企业中心页面，点击【凡科建站】，进入网页制作页面。

二、添加模块

1、点击左侧工具栏中的第三个按钮【设置】，在【基础设置】-【全站设置】-【网站导航】中，打上勾，表示已添加。在添加后点击【立即保存】，将鼠标移至导航栏中，在设置栏中有3个可以设置的内容。

2、点击【管理栏目】，在这个设置栏目中，站长可以对导航栏中显示的栏目进行设置。点击某栏目中的【编辑】按钮，站长可以修改该栏目的名称、链接类型、打开方式、栏目权限以及相关的百度优化。链接类型决定了该栏目的跳转页面，百度优化的设置内容会影响网站的收录情况，因此这两个内容在网页制作时需要重点设置。

3、点击【设置样式】，其中有常规、展示设置以及高级3个方面的设置内容。在【常规】方面，站长可以选择导航栏的颜色、相关的展示样式以及栏目的展示方式。在【展示设置】方面，站长可以设置各级栏目的颜色、字体、宽高、间距、圆角、边框等内容。在【高级】方面，站长可以设置导航内容区位置、高度、对齐、背景等内容。如果站长不想在这方面放过多的心思，那么选择默认设置是一个比较不错选择。

4、点击【新增栏目】，站长可以新创建一个栏目，其中需要完成栏目命名、类型选择等设置，完成上述设置后即可增添一个新的栏目。

5、如果您想改变网站导航栏的位置，在网站导航栏处点击鼠标左键，直接进行拖拽即可改变网站导航栏的位置。

备实用性和美观性。

---