我要一个侧边栏,侧边栏的右边是和侧边栏关联的板块 栏1对应板块1 栏2对应板块2 默认展示板块1 用html和css写
时间: 2024-04-08 11:36:26 浏览: 27
可以使用以下的HTML和CSS代码来创建一个带有侧边栏的页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>侧边栏示例</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.sidebar {
width: 200px;
background-color: #f0f0f0;
}
.content {
flex: 1;
padding: 20px;
}
/* 样式可以根据需求进行调整 */
.sidebar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar li {
padding: 10px;
}
.sidebar li.active {
background-color: #eaeaea;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li class="active">栏1</li>
<li>栏2</li>
</ul>
</div>
<div class="content">
<h2>板块1</h2>
<p>这是板块1的内容。</p>
</div>
</div>
</body>
</html>
```
你可以将上述代码保存为一个 HTML 文件并在浏览器中打开,即可看到一个带有侧边栏的页面。侧边栏位于页面的左侧,右侧是内容区域。默认展示的是板块1,你可以根据需要自行修改和扩展代码。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)