页面布局步骤

/**** 第一部分，重置公共默认样式*****/
/*重置默认样式*/
body,ul,li,p,h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
}
a{
    color: #333;
    text-decoration: none;
}
ul,li{
    list-style: none;
}

/**** 第二部分，设置当前页面公共样式*****/

body{
    font: 14px/1.5 "Microsoft YaHei","微软雅黑",sans-serif;
    color: #656565;
}

/*让页面上的内容都居中,宽度固定在900px 以内*/
.container{
    width: 900px;
    margin: 0 auto;
}


/***** 第三部分, 写页面功能区块 *****/

/*头部*/
#header{
    height: 50px;
    background: #333;
}
#header .logo img{
    height: 40px;
}
#header .nav{
    float: right;
}
#header .nav > li{
    float: left;
    margin-right: 15px;
}
#header .nav a{
    display: block;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    color: #fff;
}
#header .nav a:hover{
    background-color: #fff;
    color: #333;
}

/*侧边栏*/

#content{
    margin-top: 10px;
}
#content:after{
    content: '';
    display: table;
    clear: both;
}

#content .aside{
    float: left;
    width: 200px;
    min-height: 500px;
    background-color: #eee;
}



/*主区块*/
    
#content .main{
    margin-left: 210px;
    padding: 20px 10px;
    background-color: #eee;
}
#content .main h1{
    margin: 20px 0;
}   

/*尾部*/
#footer{
    background-color: #333;
    padding: 10px 0;
}
#footer:after{
    content: '';
    display: table;
    clear: both;
}
#footer li{
    float: left;
    margin-left: 10px;
}
#footer a{
    color: #fff;
}