CSS+DIV 实现个人网页简单样板

实现如图：

 HTML：

    
    
    
    

    
    





    

        
LinuxCast.net Demo Site
        
LinuxCast.net演示页面，Linux学习不再晦涩难懂
    
    

        

            
首页
            
闲言碎语
            
我是谁
        
    
    






    


        

            

                
            

            

                
示例标题示例标题
                
作者:twilight 日期：2017-2-2
                
示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容
            
        

        

            

                
            

            

                
示例标题示例标题
                
作者:twilight 日期：2017-2-2
                
示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容
            
        

        

            

                
            

            

                
示例标题示例标题
                
作者:twilight 日期：2017-2-2
                
示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容
            
        

        

            

                
            

            

                
示例标题示例标题
                
作者:twilight 日期：2017-2-2
                
示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容
            
        

        

            

                
            

            

                
示例标题示例标题
                
作者:twilight 日期：2017-2-2
                
示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容
            
        

        

            

                
            

            

                
示例标题示例标题
                
作者:twilight 日期：2017-2-2
                
示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容
            
        

    

    

        

            

                
            
            

                
twilight

                
cease to struggle and you cease to live
            
        
        

            
推荐文章
            

                
推荐文章1
                
推荐文章2
                
推荐文章3
                
推荐文章4
                
推荐文章5
                
推荐文章6
            
        
        

            
访客100
            
文章数100
        
    
    






    
Copyright © 1999-2016, balalalalal, All Rights Reserved
    

        

            
关于我们
            
联系我们
            
使用条款
            
意见反馈
        
    

 

 

CSS：

body{
    background-image:url("2.jpg");
}

/*-------------头部-------------*/
#header{
    width:960px;
    color:gray;
    border-bottom:dashed 1px white;
    margin:0 auto;
    margin-bottom:10px;
}

.logo_title{
    float:left;
}

.logo_title h3{
    font-size:30px;
    margin-top:14px;
} 
.logo_title p{
    font-size:20px;
}

/*---------------------------------*/
.navi{
    float:right;
    margin:0 auto;
    margin-top:66px;
    color: red;
}
.navi a{
    color:grey;
    text-decoration:none;
}

.navi ul {
    list-style:none;
}
.navi ul li{
    display:inline;
    margin-right:8px;
    border:1px solid grey;
    padding:4px 8px;
    border-radius:6px;
}
.clear{
    clear:both;
}

/*----------------主体-----------------*/
#wrapper{
    width:960px;
    margin:0 auto;
    margin-bottom:15px;
}
.main{
    width:610px;
    background-color:white;
    border-radius:8px;
    float:left;
    padding:20px;
}
.item_img{
    float:left;
    margin:10px;
    margin-top:4px;
}
.item_img img{
    width:80px;
    height:80px;
}
.item_content{
    margin-left:100px;
}

.item_content h3{
    font-size:22px;
    color:#a5612d;
    margin:0;
}
.item_info{
    font-size:12px;
    font-style:italic;
    margin:0;
    color:#999;
}
.item_desc{
    font-size:14px;
    margin:0;
    color:gray;
    margin-top:10px;
    padding-left:5px;
    border-left:solid 1px #999;
}

.item{
    border-bottom:dashed 1px #999;
    padding :20px;
}
.sidebar{
    width:300px;
    background-color:white;
    border-radius:8px;
    float:right;
    padding-top:10px;
}

.author_img img{
    width:120px;
    height:120px;
    border-radius:10px;
}

.author_img{
    width:120px;
    height:120px;
    margin: 0 auto;

}

.author_info{
    margin: 10px 10px;
    padding:0;
    border:solid #ddd 1px;
    border-radius:8px;
    background-color:#eee;

}

.author_info h4{
    margin:0;
    padding:0;
    text-align:center;
    font-weight:bold;
}


.article h3{
    font-style:italic;
    margin-left:10px;
    border-bottom:dashed 1px #aaa;
    padding-bottom:4px;
}

.article ul {
    list-style:none;
    padding:0;
    margin-left:40px;
}

.site_info{
    border-top :dashed 1px #aaa;
}
.site_info p {
    text-align:center;
    font-size:12px;
    color:gray;
}






/*---------------尾部-----------------*/
#footer{
    width:960px;
    height:100px;
    margin:0 auto;
    background-color:blue;
    border-top:dashed white 1px;
}

#footer .left{
    color:grey;
    float:left;
    margin-top:10px;
}

#footer .right{
    color:grey;
    float:right;
    font-size:14px;

}

#footer .right ul {
    margin-top:10px;
    list-style:none;
}

#footer .right ul li {
    display:inline-block;
    margin-right:5px;
}