css导航栏,侧边栏
要创建一个CSS导航栏和侧边栏,你可以使用HTML和CSS来实现。以下是一个简单的例子:
HTML:
<div class="navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<div class="sidebar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
CSS:
.navigation {
background-color: #333;
overflow: hidden;
}
.navigation li {
float: left;
}
.navigation li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navigation li a:hover {
background-color: #111;
}
.sidebar {
background-color: #f2f2f2;
position: fixed;
height: 100%;
width: 200px; /* Adjust width as needed */
top: 0;
left: 0;
}
.sidebar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.sidebar li a:hover {
background-color: #555;
color: white;
}
这个例子包括了一个水平导航栏和一个固定宽度的侧边栏。导航栏有背景颜色,并且链接在悬停时改变颜色。侧边栏固定在页面左侧,可以通过调整宽度来适应设计。
评论已关闭