<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nav2</title>
<link rel="stylesheet" href="css初始化.css"/>
<link rel="stylesheet" href="查询.css" type="text/css"/>
</head>
<body>
<div class="header">
<ul class="nav">
<li class="nav1">
<a href="#">油井分布</a>
</li>
<li class="nav2">
<a href="#">工艺流程</a>
</li>
<li class="nav3">
<a href="#">报警管理</a>
</li>
<li class="nav4">
<a href="#">曲线报表</a>
</li>
<li class="nav5">
<a href="#">电网平台</a>
</li>
<li class="nav6">
<a href="#">基本信息</a>
</li>
<li class="nav7">
<a href="#">通讯监控</a>
</li>
<li class="nav8">
<a href="#">用户管理</a>
</li>
<li class="nav9">
<a href="#">退出系统</a>
</li>
</ul>
</div>
</body>
.header{
background: url("img/logo.png") no-repeat #191d39 20px 10px;
width: 100%;
height: 84px;
color: #fff;
font-size: 12px;
}
.nav{
width: 100%;
height: 84px;
float: left;
position: absolute;
}
.nav li{
border-left: 1px solid #252947;
border-right: 1px solid #252947;
list-style: none;
float: left;
height: 84px;
position: relative;
left:345px;
}
.header h1{
font:400 22px/84px "microsoft yahei";
color: #fff;
margin-left: 107px;
float: left;
}
li a{
display: block;
width: 109px;
text-align: center;
line-height: 132px;
color:#818496;
text-decoration: none;
font-size: 14px;
}
li a:hover{
color: #f6b22c;
}
li.nav1{
background: url("img/normal油井分布%20.png") no-repeat 35px 12px;
}
li.nav1 a:hover{
background: url("img/selected油井分布%20.png") no-repeat 35px 12px #252947;
}
li.nav2{
background: url("img/normal工艺流程.png") no-repeat 35px 12px;
}
li.nav2:hover{
background: url("img/selected工艺流程.png") no-repeat 35px 12px #252947;
}
li.nav3{
background: url("img/normal报警管理.png") no-repeat 35px 12px;
}
li.nav3:hover{
background: url("img/selected报警管理.png") no-repeat 35px 12px #252947;
}
li.nav4{
background: url("img/normal曲线报表.png") no-repeat 35px 12px;
}
li.nav4 a:hover{
background: url("img/selected曲线报表.png") no-repeat 35px 12px #252947;
}
li.nav5{
background: url("img/normal电网平台.png") no-repeat 35px 12px;
}
li.nav5:hover{
background: url("img/selected电网平台.png") no-repeat 35px 12px #252947;
}
li.nav6{
background: url("img/normal基本信息.png") no-repeat 35px 12px;
}
li.nav6:hover{
background: url("img/selected基本信息.png") no-repeat 35px 12px #252947;
}
li.nav7{
background: url("img/normal通讯监控.png") no-repeat 35px 12px;
}
li.nav7:hover{
background: url("img/selected通讯监控.png") no-repeat 35px 12px #252947;
}
li.nav8{
background: url("img/normal用户管理.png") no-repeat 35px 12px;
}
li.nav8:hover{
background: url("img/selected用户管理.png") no-repeat 35px 12px #252947;
}
li.nav9{
background: url("img/normal退出系统.png") no-repeat 35px 12px ;
}
li.nav9 a:hover{
background: url("img/normal退出系统.png") no-repeat 35px 12px #252947;
color: #fff;
}
.nav9 li {
border-right: 1px solid #252947;
}
