编写一个左侧有导航,有标题的页面
时间: 2024-05-24 15:12:36 浏览: 11
<!DOCTYPE html>
<html>
<head>
<title>左侧导航页面</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.nav {
background-color: #f2f2f2;
float: left;
width: 200px;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
margin-bottom: 10px;
}
.nav a {
display: block;
padding: 5px;
color: #333;
text-decoration: none;
}
.nav a:hover {
background-color: #333;
color: #fff;
}
.content {
float: left;
width: calc(100% - 200px);
height: 100%;
padding: 10px;
box-sizing: border-box;
}
h1 {
margin-top: 0;
}
</style>
</head>
<body>
<div class="header">
<h1>左侧导航页面</h1>
</div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
<div class="content">
<h1>欢迎访问我们的网站</h1>
<p>这是一个左侧有导航,有标题的页面的示例。</p>
<p>左侧的导航可以帮助用户快速找到所需的内容,方便用户使用。</p>
</div>
</body>
</html>
相关推荐
![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)