写一个网页,带有能够伸缩的左侧导航栏
时间: 2023-12-15 07:05:21 浏览: 97
<!DOCTYPE html>
<html>
<head>
<title>可伸缩左侧导航栏</title>
<style>
body {
margin: 0;
padding: 0;
}
#sidebar {
background-color: #333;
height: 100vh;
position: fixed;
width: 100px;
transition: all 0.3s ease-out;
}
#sidebar:hover {
width: 200px;
}
#sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
#sidebar li {
padding: 10px;
text-align: center;
}
#sidebar li:hover {
background-color: #555;
}
#content {
margin-left: 100px;
padding: 20px;
}
h1 {
font-size: 36px;
margin-top: 0;
}
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
</ul>
</div>
<div id="content">
<h1>这是一个可伸缩的左侧导航栏</h1>
<p>这是一个示例网页,演示了如何使用 CSS3 过渡动画实现可伸缩的左侧导航栏。</p>
<p>当鼠标悬停在导航栏上时,它会展开到200像素的宽度,当鼠标离开时,它会恢复到100像素的宽度。</p>
<p>您可以根据自己的需要修改导航栏的内容和样式。</p>
</div>
</body>
</html>
阅读全文