page：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page</title>
<link rel="stylesheet" type="text/css" href="nv-css.css">
<link rel="stylesheet" type="text/css" href="page.css">
}
</head>
<body>
<div class="container">
<div class="nav">
<div class="nav-li">
<div class="tit">導(dǎo)航1</div>
? ? <ul>
? ? ? ? <li>1</li>
? ? ? ? <li>2</li>
? ? ? ? <li>3</li>
? ? ? ? <li>4</li>
? ? </ul>
</div>
<div class="nav-li">
<div class="tit">導(dǎo)航2</div>
? ? <ul>
? ? ? ? <li>1</li>
? ? ? ? <li>2</li>
? ? ? ? <li>3</li>
? ? ? ? <li>4</li>
? ? </ul>
</div>
<div class="nav-li">
<div class="tit">導(dǎo)航3</div>
? ? <ul>
? ? ? ? <li>1</li>
? ? ? ? <li>2</li>
? ? ? ? <li>3</li>
? ? ? ? <li>4</li>
? ? </ul>
</div>
<div class="nav-li">
? <div class="tit">導(dǎo)航4</div>
? ? <ul>
? ? ? ? <li>1</li>
? ? ? ? <li>2</li>
? ? ? ? <li>3</li>
? ? ? ? <li>4</li>
? ? </ul>
? </div>
</div>
<div class="top">
? ? ? <ul>
? ? ? ? <li class="left">logo</li>
? ? ? ? <li class="left">登錄</li>
? ? </ul>
? ? <ul>
? ? ? ? <li class="right">注銷</li>
? ? </ul>
</div>
? ? <div class="main">
? ? ? ? ? <div class="footer"></div>
? ? </div>
? </div>
</div>
</body>
</html>
nav-li.css:
.nav{
height: auto;
width: 160px;
position: fixed;
}
.nav-li{
height: auto;
width: 160px;
background-color:? #a3c9e6;
border-bottom: 1px solid #1086e3;
}
.tit{
height: 40px;
width: 160px;
text-align: center;
line-height: 40px;
}
.nav-li ul{
height: auto;
width: 160px;
list-style-type: none;
background-color: #c2eced;
display: none;
}
.nav-li:hover ul{
display: block;
}
.nav-li:hover{
background-color: gray;
}
.nav-li ul li:hover{
background-color: gray;
}
.nav-li ul li{
height: 40px;
width: 160px;
text-align: center;
line-height: 40px;
border-bottom: 1px dashed #244672;
? ? ? ? }
page.css
? *{
margin: 0;
padding: 0;
}
.container{
height: 1500px;
width: 1000px;
}
.top{
height: 50px;
width: 100%;
background-color: #50d1d4;
position: fixed;
top: 0;
}
ul{
list-style-type: none;
}
.left{
float: left;
height: 50px;
width: 60px;
text-align: center;
line-height: 50px;
padding-right: 10px;
color: #284949;
}
.right{
float: right;
display:block;
height: 50px;
width: 60px;
line-height: 50px;
color: #284949;
}
.main{
height: 50px;
width: 80%;
margin-top: 60px;
margin-left: auto;
background-color: #c2eced;
padding-top: 1450px;
}
.footer{
height: 50px;
width: 100%;
background-color: #50d1d4;
}
