首页用html和css创建一个深蓝色的div导航栏

用html和css创建一个深蓝色的div导航栏

时间: 2023-12-07 11:29:37 浏览: 154

可以尝试以下代码： ```html <!DOCTYPE html> <html> <head> <title>深蓝色导航栏</title> <style> nav { background-color: #1E90FF; height: 50px; display: flex; align-items: center; padding: 0 20px; } nav a { color: white; text-decoration: none; margin-right: 20px; font-size: 18px; } nav a:hover { color: #ADD8E6; } </style> </head> <body> <nav> <a href="#">首页</a> <a href="#">分类</a> <a href="#">标签</a> <a href="#">关于</a> </nav> </body> </html> ``` 解析： - `nav` 标签用于创建导航栏。 - `background-color` 属性设置背景颜色为深蓝色。 - `height` 属性设置导航栏高度为 50px。 - `display: flex` 和 `align-items: center` 属性用于将导航栏中的内容垂直居中。 - `padding: 0 20px` 属性用于设置导航栏左右内边距为 20px。 - `a` 标签用于创建导航链接。 - `color` 属性设置文字颜色为白色。 - `text-decoration` 属性设置文字无下划线。 - `margin-right: 20px` 属性用于设置导航链接之间的间距。 - `font-size: 18px` 属性用于设置文字大小。 - `a:hover` 伪类用于设置鼠标悬停时的样式。在本例中，将文字颜色改为浅蓝色。

阅读全文