html -- div table布局 -- 加 布局简单例子

div布局，div.html：

  
    
    
    
    
	
  
  
	

		
头部
		
左菜单
		
内容主体
		
右菜单
		
底部
	
  

table布局，table.html：

  
    
    
  
  
	

		

			
头部
		
		

			
左菜单
			
内容主体
			
右菜单
		
		

			
底部
		
	
  

===================================================================================================================

简单布局例子：

simple.html

    
    
    



    

        

            

                

                    勇哥俱乐部
                
                

                    

                        
首页
                        
技术课程
                        
技术问答
                        
VIP会员
                    
                

                

                    
                
                

                    

                        
                    
                
            
        
        

            

                
勇哥俱乐部
                
加入俱乐部，学习最新的技术课程，引领潮流

            
            

            

        
    
    

        作者邮箱：[email protected]
    

样式表，my.css:

*{
    margin:0px;
    padding:0px;
}
body{
    background-color:snow;
}
.wrapper{
    width:80%;
    height:1000px;
    background-color: antiquewhite;
    margin:0px auto;
}
.header{
    widht:100%;
    height:90px;
    background-color: snow;
    margin:0px auto;
}
.header_nav{
    padding-bottom:30px;
    padding-top:30px;
    width:100%;
    height:30px;
    position:relative;
}
.header_title{
    float:left;
    font-family:Arial Harrington sans-serif;
    font-size:30px;
    color:burlywood;
}
.header_img img{
    border-radius:30px;
    width:26px;
    height:26px;
    display:inline;
    box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
    float:right;
}
.header_spotlight form input{
    margin-right:40px;
    width:100px;
    height:26px;
    float:right;
    position:relative;
}
form input{
    border-radius:30px;
    height:26px;
}
ul{
    float:left;
    margin-left:40px;
    list-style-type:none;
    padding-top:6px;
    padding-bottom:6px;
}
li{
    margin-left:40px;
    display:inline;
}
a:link, a:visited{
    font-weight:bold;
    color:darkgray;
    text-align:center;
    padding:6px;
    text-decoration:none;
}
a:hover, a:active{
    color:dimgray;
}
.body{
    padding:30px;
    height:auto;
    weight:auto;
}
.body_title h3{
    font-size:30px;
    font-family: "Arial Harrington";
    color:#333333;
}
.body_title p{
    margin-top:20px;
    margin-bottom:20px;
}
.footer{
    padding-top:20px;
    padding-bottom:20px;
    color:gray;
    text-align:center;
    font-size:10px;

}