html做网页导航条 h5网页设计与制作

编程之家2026-06-27939次浏览

大家好，关于html做网页导航条很多朋友都还不太明白，今天小编就来为大家分享关于h5网页设计与制作的知识，希望对各位有所帮助！

首先要建立一个DIV，为其命名为“nav”，在DIV中建立一个<ul>无序列表，导航共有几个栏目，就为列表添加几个<li>的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。

然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：

ul{width:宽度值；height：高度值； list-style:none；}

如果是横向导航，还需为里面的列表项<li>标签设置左浮动的样式，代码为：li{float:left;}

每个栏目之间分隔的距离可通过margin（外边距）属性来设置。

导航条是一个网站中必不可少的元素，那么如何用HTML和CSS制作一个导航条呢？下面我给大家分享一下。

工具/材料 Sublime Text

首先打开SublimeText软件，新建一个html页面，并且在html页面中准备好html结构，如下图所示

接下来我们在html的body结构里添加导航条的内容，如下图所示

然后就需要在style标签中用CSS对导航条的样式进行定义了，如下图所示，书写样式的时候一定要注意写在style标签里面

最后运行html页面，你就会看到如下图所示的导航条，当鼠标放在某个导航上时，背景色会变成红色

1、用Dreamweaver新建一个HTML文件;

2、按ctrl+s先保存，以防突然断电数据丢失;

3、修改title为html+css实现横向导航;

4、新建一个div id为“a”，添加ul li标签;

5、在li中添加自己想要的文字并调整好文字间距,按F12预览，如下图所示:

6、首先去掉字体前面的小黑点，代码如下：

7、预览，如图所示:

8、接下来，使文字横向排列，设置代码如下，给li设置左浮动效果；

9、按F12预览，效果如下：

好了，文章到此结束，希望可以帮助到大家。