首页html和css做一个侧导航栏

html和css做一个侧导航栏

时间: 2024-12-12 21:20:26 浏览: 12

HTML 和 CSS 结合可以创建一个响应式的侧边导航栏，这是网站设计中常见的元素。下面是一个简单的例子：首先，用 HTML 创建基本结构： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> <title>侧边导航栏</title> </head> <body> <div class="sidenav"> <a href="#">首页</a> <a href="#">关于我们</a> <a href="#">服务</a> <a href="#">联系我们</a> </div> </body> </html> ``` 然后，在 CSS 文件 `styles.css` 中添加样式： ```css /* 预设一些通用样式 */ body { font-family: Arial, sans-serif; } .sidenav { position: fixed; /* 固定侧边栏位置 */ top: 0; left: 0; width: 200px; /* 根据需求调整宽度 */ height: 100%; background-color: #333; overflow-y: auto; /* 自动滚动条 */ padding: 20px; } .sidenav a { display: block; color: white; text-decoration: none; padding: 14px 16px; transition: all 0.3s ease; } .sidenav a:hover { background-color: #ddd; color: black; } ``` 这个例子中，我们创建了一个固定的侧边导航栏，其中包含了一些链接。当鼠标悬停在链接上时，会改变背景颜色。你可以根据需要自定义颜色、布局以及响应式设计。

阅读全文