html导航栏_一篇文章教会你如何制做精美导航条

最新推荐文章于 2024-08-21 15:28:06 发布

weixin_39869197

最新推荐文章于 2024-08-21 15:28:06 发布

阅读量6.5k

点赞数 6

文章标签： html导航栏 html导航栏怎么做 html底部导航栏 html底部导航栏代码

【一、项目背景】

让更多的人去学习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. 完整代码，如下图所示。