【我.项目背景】
让更多人学习HTML，以广东科技大学导航栏为例，教大家如何制作水平导航栏。
[2.项目准备】
准备一个编程软件Dreamweer，打开软件点击文件新建一个项目，名称为navigation bar，如下图。
点击确定后，会弹出如下图。
【3.项目实施】
1．在标签中写一个框架：
注意：
- 无序列表的标签定义，
- 标签定义列表项。
- 标签可用于有序列表 (
- ) 和无序列表 (
- )。
2.写完运行（运行：点击右下角f12运行）看效果，如下图：
3.添加css样式表（这里使用内部样式表）。
3.1 添加CSS样式表有两种方法，如：
3.2 去除li带来的小黑点：
li{ list-style ： 没有任何 ;
4.基于以上步骤，运行如下：
5.设置导航栏的样式。
1) 设置列表ul的宽度、高度、背景颜色和文本位置（margin: 0 auto）。
李也定了高度。
2）去掉小黑点，然后设置文字的颜色，高度，内边距，（个人喜好看着舒服就好）
3）设置文本的大小，删除下划线（文本装饰：无；）。
以下为详细备注
ul li{float: left; # 设置每个li的高度 background-color:pink #设置li的背景色为粉色 border: 1px solid 6495ED; # 设置li text-align: center; 的边框颜色和大小# 设置li中的文字样式为center line-height: 30px; # 设置li中文文本示例上边框的高度} ulli:hover{background-color: aqua;} # 设置鼠标放在li上时的背景色 ul li:hover a{color: black;} # li
6.设置鼠标放在a标签内容时的文字颜色。完整代码如下。
7.运行后效果如下。
【四.摘要]
1. html可以做很多效果，希望大家耐心学习，同时希望大家积极搜索问题，尝试一下总会有解决方法的。
2.如需本文源码，请在公众号后台回复“导航栏”三个字获取。
导航栏的设计制作思路介绍到此结束（如何在网页设计中设计导航栏）。
文章来源于网络或者作者投稿，若有侵权请联系删除，作者：大象，如若转载，请注明出处：https://www.laoz.net/3136.html
