前端开发——导航栏的制作

在前端开发中，导航栏制作是比较基本的操作，这是我写的导航栏的代码。

先写基本的HTML文件，用div框起来，使用ul标签。

结果是这样的

使用css文件设置样式

先给导航栏设置宽，高和背景颜色，然后使用p标签左浮动，ul标签右浮动，使其脱离文档流在一行显示；将p标签的line-height和top的height值设置一样，使p标签居中显示；line-height设置垂直居中，text-align设置水平居中，导航栏完成

想给它加多一点样式，鼠标点到哪个栏目那个栏目就变色，效果如下

在li标签前加上a标签，css文件如下：

a为联级标签，用display将a标签设为块级标签，设置好宽和高：hover为当前鼠标点中时，背景颜色设为黄色，字体设为黑，完成。