首页帮我做一个网页，有横向菜单，竖向菜单

帮我做一个网页，有横向菜单，竖向菜单

时间: 2023-12-11 16:04:50 浏览: 150

好的，我可以帮您做一个基本的网页，包含横向菜单和竖向菜单。以下是一个示例 HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>示例网页</title> <style> /* 横向菜单样式 */ .horizontal-menu { display: flex; background-color: #333; color: #fff; padding: 10px; } .horizontal-menu a { color: #fff; padding: 10px; text-decoration: none; font-weight: bold; text-transform: uppercase; transition: background-color 0.3s ease; } .horizontal-menu a:hover { background-color: #666; } /* 竖向菜单样式 */ .vertical-menu { background-color: #f2f2f2; padding: 10px; width: 200px; } .vertical-menu a { display: block; padding: 10px; color: #333; text-decoration: none; transition: background-color 0.3s ease; } .vertical-menu a:hover { background-color: #ccc; } </style> </head> <body>  <div class="horizontal-menu"> <a href="#">菜单项1</a> <a href="#">菜单项2</a> <a href="#">菜单项3</a> <a href="#">菜单项4</a> <a href="#">菜单项5</a> </div>  <div class="vertical-menu"> <a href="#">菜单项1</a> <a href="#">菜单项2</a> <a href="#">菜单项3</a> <a href="#">菜单项4</a> <a href="#">菜单项5</a> </div> </body> </html> ``` 在这个示例中，我们使用了 CSS 的 `flex` 布局来创建横向菜单，并使用了 `display: block` 的属性来创建竖向菜单。您可以根据需要修改颜色、字体大小等样式。请注意，此示例仅包含基本的 HTML 和 CSS 代码，您可能需要添加更多的代码来创建完整的网页。

阅读全文