目录
效果图
代码
CSS部分
* {
padding: 0;
margin: 0;
}
.抬头 {
position: fixed;
height: 80px;
width: 100%;
background-color: rgb(0, 0, 0);
}
.content {
width: auto;
height: 1500px;
font-family: "微软雅黑,宋体,黑体";
background-image: url(海边.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.left-content {
position: fixed ;top : 80px;
width: 20%;
height: 800px;
float: left;
}
.right-content {
width: 80%;
height: 1500px;
background-color: rgba(255, 255, 255, 0.8);
float: right;
}
.title a {
display: block;
height: 80px;
width: 100%;
line-height: 80px;
text-align: center;
color: #0d0d0d;
background-color: rgba(60, 60, 60, 1);
font-size: 25px;
}
.nav-name a {
display: block;
height: 70px;
width: 100%;
line-height: 70px;
background-color: rgba(111, 112, 112, 0.5);
text-align: center;
font-weight: 1000;
color: #0d0d0d;
}
.nav-title a {
display: block;
height: 60px;
width: 100%;
line-height: 60px;
text-align: center;
font-weight: 500;
background-color: rgba(160, 160, 160, 0.5);
color: #0d0d0d;
}
.nav-content a {
display: block;
height: 40px;
width: 100%;
line-height: 40px;
text-align: center;
font-weight: 200;
background-color: rgba(178, 178, 178, 0.5);
color: #0d0d0d;
}
a {
text-decoration: none;
}
a:hover {
background-color: bisque;
color: rgb(79, 37, 42);
}
.biaoshi{
font-style: italic;
font-size: 60px;
float: left;
color: white;
}
.biaoti {
font-size: 20px;
float: right;
color: white;
line-height: 80px;
padding-right: 20px;
}
HTML部分
<body>
<div class="content">
<div class="抬头">
<div class="biaoshi">Symbol</div>
<div class="biaoti">后台实时情况</div>
</div>
<div class="left-content">
<ul>
<li class="title"><a href="#">网站导航</a></li>
</ul>
<ul>
<li class="nav-name"><a href="#">总体概述</a></li>
<li class="nav-title"><a href="#">小区概述</a></li></ul>
<ul>
<li class="nav-name"> <a href="#">数据管理</a> </li>
<li class="nav-title"> <a href="#">可视化图表</a></li>
<li class="nav-title"> <a href="#">数据管理</a></li>
<li class="nav-title"> <a href="#">地图</a></li></ul>
<ul><li class="nav-name"> <a href="#">通知发布</a></li>
<li class="nav-title"> <a href="#">评分计划</a></li>
<li class="nav-title"> <a href="#">文件上传</a></li>
<li class="nav-title"> <a href="#">文本通知</a></li></ul>
<ul><li class="nav-name"> <a href="#">使用手册</a></li>
<li class="nav-title"> <a href="#">系统使用手册</a></li></ul>
</div>
<div class="right-content"></div>
</div>
</body>