html中左侧导航栏样式
时间: 2023-09-10 11:14:26 浏览: 139
html页面左侧导航
5星 · 资源好评率100%
左侧导航栏样式可以使用CSS来设置。以下是一个简单的示例代码:
HTML代码:
```html
<div class="sidebar">
<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>
</ul>
</div>
```
CSS代码:
```css
.sidebar {
width: 200px;
background-color: #f1f1f1;
height: 100%;
position: fixed;
left: 0;
top: 0;
}
.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar li {
border-bottom: 1px solid #ccc;
}
.sidebar li a {
display: block;
padding: 10px 15px;
color: #333;
text-decoration: none;
}
.sidebar li a:hover {
background-color: #ddd;
}
```
上述代码将创建一个宽度为200像素的固定定位的侧边栏,其中每个导航链接都有一些基本的样式,包括背景颜色,边框,内边距和鼠标悬停时的样式。您可以根据需要自定义这些样式。
阅读全文