用html+css实现左边导航右边显示主要内容的页面,导航包括:头像、首页、我的宿舍、申请调速、保修申请、个人信息。右边内容包括天气预报、日期、新闻、宿舍人数分布图,当前时间等。
时间: 2023-11-29 10:36:41 浏览: 18
以下是一个简单的实现:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>导航页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="nav">
<div class="avatar">
<img src="avatar.png">
</div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">我的宿舍</a></li>
<li><a href="#">申请调速</a></li>
<li><a href="#">保修申请</a></li>
<li><a href="#">个人信息</a></li>
</ul>
</div>
<div class="main">
<div class="weather">
<h2>天气预报</h2>
<p>今天晴,最高温度25℃,最低温度15℃</p>
</div>
<div class="date">
<h2>当前日期</h2>
<p>2020年7月1日</p>
</div>
<div class="news">
<h2>新闻</h2>
<p>这里是新闻内容。</p>
</div>
<div class="dormitory">
<h2>宿舍人数分布图</h2>
<p>这里是宿舍人数分布图。</p>
</div>
<div class="time">
<h2>当前时间</h2>
<p>10:00</p>
</div>
</div>
</div>
</body>
</html>
```
CSS代码:
```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
}
.nav {
flex: 0 0 200px;
background-color: #f5f5f5;
padding: 20px;
}
.avatar {
margin-bottom: 20px;
}
.avatar img {
width: 100px;
height: 100px;
border-radius: 50%;
}
ul {
list-style-type: none;
}
li {
margin-bottom: 10px;
}
li a {
color: #333;
text-decoration: none;
font-size: 18px;
}
li a:hover {
color: #f60;
}
.main {
flex: 1;
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.weather, .date, .news, .dormitory, .time {
flex: 0 0 400px;
margin-right: 20px;
margin-bottom: 20px;
background-color: #f5f5f5;
padding: 20px;
}
h2 {
font-size: 24px;
margin-bottom: 20px;
}
p {
font-size: 18px;
line-height: 1.5;
}
```
效果图:
![导航页面效果图](https://i.imgur.com/E4C7gJv.png)
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![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)