菜鸟学习笔记:表格布局和div+css布局

网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局

    
        
        
    
    
        

            

                

                    
导航
                
            
            

                

                    

                        
推荐文章
                        

                            

                                
一个猴子成长史
                                
你看个毛线
                                
我就瞅你咋地
                                
村里出了个半边天
                            
                        
                    
                
                

                    
一个猴子的成长史
                    

                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                    
                
            
            

                

                    
页脚
                
            
        
    

实现效果

表格布局

**表格布局的思路就是把整个网页看成一个简单的表格,然后在不同的单元格内进行内容填充.下面我们再使用div+css进行布局,一般的div结构元素如下图
**

图片来自实验楼

撸起袖子写代码

    
        
        
        
    
    
        

            

                
这是一个导航
            
            

            

                

                    
优秀文章展现
                    

                        

                            
你好,一只鸡
                            
我在西河大桥看大腿
                            
啊,大海好多水
                            
我们走皮皮虾
                        
                    
                
                
            
            

            
开学啦
            
坑比小学僧们再见啦
            
            
            
            
good good study, day day up
        
    

css部分

#container{
    width: 100%;
    /*clear: both;*/
}
#header{
    width: 100%;
    background-color: blue;
    text-align: center;
    float: left;
    /*clear: both;*/
}
#pagebody{
    //float: left;
}
#sidebar{
    width: 40%;
    height: 500px;
    background-color: red;
    float: left;
    /*clear: both;*/
}
#mainbody{
    width: 60%;
    height: 500px;
    background-color: yellow;
    float: left;
}
#footer{
    width: 100%;
    background-color: gray;
    text-align: center;
    font-size: 50px;
    float: left;
}

实现效果

div+css布局

div布局的思路是是把页面看成一个大盒子,用盒子来盛装内容,至于两种布局方法的区别,看这里看这里: 浅析div+css与表格布局的区别