php实战第十九天_PHP教程

今天涉猎了 ps,以及做了一个顶部导航条固定,下面给一个效果图布局.利用得是 position:fixed

[html]   
 

[css]  @charset "utf-8"; 
/* CSS Document */ 
*{ 
    margin:0px; 
    padding:0px; 
    font-size:14px; 
    } 
body{ 
        background-color:#ECECEC; 
        } 
#head{ 
    position:fixed; 
    top:0px; 
     
    background:#FAFAFA; 
     
    width:100%; 
    height:54px; 
     
    border-bottom: 1px solid #E8E8E8; 
    box-shadow: 0 1px 5px rgba(34, 25, 25, 0.2); 
    z-index:100; 
     
} 
 
#header{ 
    margin:0 auto; 
 
    width:960px; 
    height:54px; 
    } 
.nav{ 
    float: left; 
    height: 54px; 
    width: auto; 
    } 
     
.nav ul ,.nav li{ 
    float: left; 
    list-style: none outside none; 
} 
 
li a{ 
    padding: 0 15px; 
     
    color: #585858; 
    display: block; 
    line-height: 54px; 
     
    border-right: 1px solid #E8E8E8; 
} 
 
 
#main{ 
    position:relative; 
    top:66px; 
     
    margin:0 auto; 
    padding:10px; 
     
    width:960px; 
     
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 1px solid #C7C7C7; 
     
    } 

@charset "utf-8";
/* CSS Document */
*{
 margin:0px;
 padding:0px;
 font-size:14px;
 }
body{
  background-color:#ECECEC;
  }
#head{
 position:fixed;
 top:0px;
 
 background:#FAFAFA;
 
 width:100%;
 height:54px;
 
 border-bottom: 1px solid #E8E8E8;
 box-shadow: 0 1px 5px rgba(34, 25, 25, 0.2);
 z-index:100;
 
}

#header{
 margin:0 auto;

 width:960px;
 height:54px;
 }
.nav{
 float: left;
    height: 54px;
    width: auto;
 }
 
.nav ul ,.nav li{
 float: left;
    list-style: none outside none;
}

li a{
    padding: 0 15px;
   
    color: #585858;
    display: block;
    line-height: 54px;
 
 border-right: 1px solid #E8E8E8;
}

#main{
 position:relative;
 top:66px;
 
 margin:0 auto;
 padding:10px;
 
 width:960px;
 
 background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C7C7C7;
 
 }