php实战第二十天

严格来说这几天实战得是 div+css和ps的修炼中.

css来来去去也都是那几个属性.

[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; 
} 
 
.nav li a{ 
    padding: 0 15px; 
     
    color: #585858; 
    display: block; 
    line-height: 54px; 
     
    border-right: 1px solid #E8E8E8; 
} 
 
 
#main{ 
 
    position:relative; 
    top:82px; 
     
    margin:0 auto; 
 
    width:960px; 
    height: auto; 
    } 
 
#left{ 
    float: left; 
 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 1px solid #C7C7C7; 
    width: 630px; 
 
    
} 
 
#right{ 
    float:right; 
 
    //background: none repeat scroll 0 0 #FFFFFF; 
   // border: 1px solid #C7C7C7; 
    width: 314px; 
 
     
} 
 
 
 
#footer{ 
    float: left; 
 
    margin-top:90px; 
 
    border-top: solid 1px #ccc; 
 
    width: 100%; 
 
 
} 
 
#f_center{ 
    width: 960px; 
    height: 54px; 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
#f_top{ 
 
    width:700px; 
    margin: 0 auto; 
    margin-top: 10px; 
} 
 
#f_top ul{ 
    list-style: none; 
} 
 
#f_top li{ 
    float: left; 
    padding: 10px; 
    border-right: solid 1px #ccc; 
} 
 
#f_bottom{ 
    float: left; 
    text-align: center; 
    width: 960px; 
 
} 
 
.left_kuai{ 
    padding-left: 10px; 
    padding-bottom:10px; 
} 
 
.left_kuai_t{ 
    background-image:url("../img/item_left.png"); 
    width: 412px; 
    height:65px; 
 
    margin-top:20px; 
    margin-left: -19px; 
 
    color: #FFFFFF; 
    font-weight: 700; 
    height: 65px; 
    line-height: 55px; 
 
    text-indent: 2em; 
} 
 
.right_kuai{ 
    margin-top:0px; 
    margin-bottom: 20px; 
    width:100%; 
    border: solid 1px #ccc; 
    background-color: #fff; 
 
    padding-left: 10px; 
    padding-bottom:10px; 
 
} 
 
.right_kuai_t{ 
    background-image:url("../img/item_right.png"); 
    width: 166px; 
    height: 30px; 
 
    margin-top:-12px; 
    margin-left:20px; 
 
    color: #FFFFFF; 
    font-size: 15px; 
    font-weight: 700; 
    line-height: 30px; 
 
    text-indent: 1em; 
 
} 

@charset "utf-8";
/* CSS Document  微凉 QQ:496928838 http://wl.125.la*/
*{
 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;
}

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

#main{

 position:relative;
 top:82px;
 
 margin:0 auto;

 width:960px;
 height: auto;
 }

#left{
 float: left;

 background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C7C7C7;
    width: 630px;

  
}

#right{
 float:right;

 //background: none repeat scroll 0 0 #FFFFFF;
   // border: 1px solid #C7C7C7;
    width: 314px;

   
}

#footer{
 float: left;

 margin-top:90px;

 border-top: solid 1px #ccc;

 width: 100%;

}

#f_center{
 width: 960px;
 height: 54px;
 margin: 0 auto;

 text-align: center;

}

#f_top{

 width:700px;
 margin: 0 auto;
 margin-top: 10px;
}

#f_top ul{
 list-style: none;
}

#f_top li{
 float: left;
 padding: 10px;
 border-right: solid 1px #ccc;
}

#f_bottom{
 float: left;
 text-align: center;
 width: 960px;

}

.left_kuai{
 padding-left: 10px;
 padding-bottom:10px;
}

.left_kuai_t{
 background-image:url("../img/item_left.png");
 width: 412px;
 height:65px;

 margin-top:20px;
 margin-left: -19px;

 color: #FFFFFF;
    font-weight: 700;
    height: 65px;
    line-height: 55px;

    text-indent: 2em;
}

.right_kuai{
 margin-top:0px;
 margin-bottom: 20px;
 width:100%;
 border: solid 1px #ccc;
 background-color: #fff;

 padding-left: 10px;
 padding-bottom:10px;

}

.right_kuai_t{
 background-image:url("../img/item_right.png");
 width: 166px;
 height: 30px;

 margin-top:-12px;
 margin-left:20px;

    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    line-height: 30px;

    text-indent: 1em;

}