首页带有左侧导航栏，通过左侧导航栏更改右侧内容的html主页代码

带有左侧导航栏，通过左侧导航栏更改右侧内容的html主页代码

时间: 2024-11-20 18:38:05 浏览: 26

创建一个带有左侧导航栏并通过它控制右侧内容的HTML页面，通常会涉及到一些基本的结构元素和CSS样式。以下是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>左侧导航 + 右侧内容</title> <style> body { display: flex; min-height: 100vh; } #nav { width: 200px; /* 设置导航栏宽度 */ background-color: #f1f1f1; padding: 1rem; } #content { margin-left: 200px; /* 隔离出空间 */ flex-grow: 1; /* 内容区域自动填充剩余空间 */ overflow-y: auto; /* 如果内容超出滚动 */ } </style> </head> <body>  <div id="nav"> <ul> <li><a href="#section1">导航项1</a></li> <li><a href="#section2">导航项2</a></li>  </ul> </div>  <div id="content"> <h2 id="section1">部分1</h2> <p>这是部分1的内容...</p> <h2 id="section2">部分2</h2> <p>这是部分2的内容...</p>  </div> </body> </html> ``` 在这个例子中，当用户点击左侧的导航链接时，`id`与`href`相匹配的部分会在右侧内容区域显示。实际应用中，可能会通过JavaScript添加一些交互，比如Ajax请求来动态更新右侧内容。

阅读全文