[Css]实例

page：

}

导航1

   

       

• 1

       

• 2

       

• 3

       

• 4

   

导航2

   

       

• 1

       

• 2

       

• 3

       

• 4

   

导航3

   

       

• 1

       

• 2

       

• 3

       

• 4

   

 

导航4

   

       

• 1

       

• 2

       

• 3

       

• 4

   

 

     

       

• logo

       

• 登录

   

   

       

• 注销

   

   

         

   

 

---

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;

}