【一、项目背景】

让更多的人学习Html。以广东科技大学的导航栏为例，教你如何制作水平导航栏。

[二。项目准备]

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

点击确定，弹出下图。

[三。项目实施]

1.在

注意:

& lt李& gt标签可以在有序列表中使用(< ol & gt)和无序列表(< ul & gt).

2.写运行后(运行:点击右下角f12运行)，看效果，如下图所示:

3.添加css样式表(这里使用内部样式表)。

3.1 CSS样式表有两种添加方式，如图所示:

3.2去除李带来的小黑点:

李{ 列表式:无； }

4.基于上述步骤，如下图所示运行它:

5.设置导航栏的样式。

1)设置列表ul的宽度、高度、背景颜色和文本位置中心(边距:0自动)。

李设定了同样的高度。

2)去掉小黑点，然后设置文字的颜色、高度、内边距(喜欢看着舒服就行)

3)设置文字大小，去掉下划线(文字-修饰:无；)。

以下为详细备注。

ul Li { float:left；#将内容向左浮动，使其可以水平排列 width:100px；#设置每个li的宽度 高度:30px#设置每个li的高度 背景色:粉色#设置li的背景色为粉色 边框:1px纯色6495ED#设置li text-align: center的边框颜色和边框大小；#将li中的文本样式设置为居中 行高:30px#设置李中文文本示例的上边框高度 } ulli:hover { background-color:aqua；} #设置鼠标放在li时的背景色 ul Li:hover a { color:black；} #设置将鼠标放在li中A标签的内容上时的文本颜色

6.完整的代码，如下图所示。

7.操作后，效果图如下图所示。

[四。摘要]

1.Html可以做很多事情。希望你能耐心学习。同时也希望你能积极的去搜索问题。如果你尝试了，总会有解决的办法。

2.如需本文源代码，请在微信官方账号后台回复“导航栏”字样。

看完这篇文章你有什么收获吗？请转发分享给更多人

它共享房子

想了解更多关于Python网络爬虫和数据挖掘的知识，可以去专业网站:http://pdcfighting.com/.