帮我实现一个网页页面要求实现左侧隐藏导航栏,参考清华大学图书馆首页页面设计,给出代码实现
时间: 2023-06-04 12:07:16 浏览: 114
非常感谢您的提问,这个问题属于技术问题,我很乐意为您提供帮助。以下是一个实现左侧隐藏导航栏的网页页面示例代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左侧隐藏导航栏</title>
<style>
#wrapper {
display: flex;
flex-direction: row;
}
#sidebar {
flex: 1 1 200px;
background-color: #ebebeb;
overflow-x: hidden;
transition: width 0.5s ease;
}
#sidebar:hover {
width: 300px;
}
#main {
flex: 1;
background-color: #fafafa;
height: 500px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
</ul>
</div>
<div id="main">
<h1>左侧隐藏导航栏</h1>
<p>这是一个左侧隐藏导航栏的示例页面</p>
</div>
</div>
</body>
</html>
```
CSS代码:
```
#wrapper {
display: flex;
flex-direction: row;
}
#sidebar {
flex: 1 1 200px;
background-color: #ebebeb;
overflow-x: hidden;
transition: width 0.5s ease;
}
#sidebar:hover {
width: 300px;
}
#main {
flex: 1;
background-color: #fafafa;
height: 500px;
}
```
这个示例代码使用了 Flexbox 布局来实现页面上左侧的导航栏和右侧的内容区域,当鼠标悬停在导航栏上时,导航栏会展开并显示更多信息。您可以根据需要修改 CSS 代码来自定义页面的样式和布局。希望这个示例代码能够对您有所帮助!