html 左侧显示导航栏右侧显示不同内容
时间: 2023-11-09 14:02:53 浏览: 189
这可以通过使用 HTML 和 CSS 来实现。可以将导航栏和内容区域放到不同的 div 容器中,并使用 CSS 将它们分别定位在页面的左侧和右侧。
以下是一个示例代码,其中 nav 元素表示导航栏,content 元素表示内容区域:
```
<!DOCTYPE html>
<html>
<head>
<title>Navigation and Content</title>
<style type="text/css">
.container {
display: flex;
flex-direction: row;
}
nav {
width: 20%;
background-color: #f2f2f2;
padding: 20px;
box-sizing: border-box;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
margin-bottom: 10px;
}
nav a {
text-decoration: none;
color: #333;
font-weight: bold;
}
.content {
width: 80%;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia, nisi nec malesuada ullamcorper, lorem ipsum lobortis velit, vel accumsan eros sem ac nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Vivamus et maximus erat, eget lacinia diam. Proin gravida, augue vel ultricies malesuada, nibh sapien euismod nisi, vel vehicula dolor magna in ex. Sed convallis ipsum id ipsum bibendum, at tempor magna porttitor. Vestibulum euismod leo ante, vel scelerisque justo lacinia at. Donec semper pellentesque metus, ut consequat diam iaculis ut. Sed euismod lectus vel nulla placerat, sit amet sodales lacus egestas. Donec aliquam lectus ut semper faucibus.</p>
</div>
</div>
</body>
</html>
```
在上面的代码中,我们使用了 flexbox 布局来将导航栏和内容区域水平排列。nav 元素的宽度为 20%,content 元素的宽度为 80%。通过设置这两个元素的宽度比例,我们实现了左侧显示导航栏右侧显示不同内容的效果。