首页html首页代码侧边菜单布局

html首页代码侧边菜单布局

时间: 2023-08-13 15:05:36 浏览: 40

以下是一个简单的HTML侧边菜单布局示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>侧边菜单布局</title> <style> * { box-sizing: border-box; } body { margin: 0; padding: 0; } #sidebar { position: fixed; top: 0; left: 0; width: 200px; height: 100%; background-color: #f0f0f0; padding: 20px; } #content { margin-left: 220px; padding: 20px; } </style> </head> <body> <div id="sidebar"> <h2>侧边菜单</h2> <ul> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> <li><a href="#">菜单项4</a></li> <li><a href="#">菜单项5</a></li> </ul> </div> <div id="content"> <h1>页面内容</h1> <p>这是一个侧边菜单布局示例。</p> </div> </body> </html> ``` 在上面的代码中，我们使用了CSS的 `position: fixed` 属性来固定了侧边菜单的位置，并使用 `margin-left` 属性将页面内容区域向右移动了一定距离，以便给侧边菜单腾出空间。在侧边菜单中，我们使用了无序列表和超链接来创建菜单项。