首页帮我用html5和css写一个侧边导航栏

帮我用html5和css写一个侧边导航栏

时间: 2023-10-30 20:04:56 浏览: 157

当然可以！下面是一个简单的示例，展示如何使用 HTML5 和 CSS 创建一个侧边导航栏： HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>侧边导航栏</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="sidebar"> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> <a href="#">链接4</a> <a href="#">链接5</a> </div> <div class="content">  </div> </body> </html> ``` CSS 代码（保存为 style.css 文件）： ```css .sidebar { height: 100%; width: 200px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #f5f5f5; overflow-x: hidden; padding-top: 20px; } .sidebar a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 20px; color: #000000; display: block; } .sidebar a:hover { background-color: #555555; color: white; } .content { margin-left: 200px; padding: 20px; } ``` 这是一个基本的结构，其中 `.sidebar` 类定义了侧边栏的样式，`.content` 类定义了主要内容区域的样式。你可以根据自己的需求修改样式，并在 `<div class="sidebar">` 内添加自己的链接。希望这能帮到你！如果有任何问题，请随时提问。

阅读全文