用CSS与DIV进行网页布局（框架）

    CSS代码一般是写在一个.css文件里面，然后在HTML代码中引用该文件。

    下面是一个用CSS和DIV实现的网页布局示例：

首先是CSS代码，写在一个.css文件里面

body{
	background-color:white;font-size:10pt;font-family:arial;
	margin:0;padding:0;color:#333333;
}
#wapper{
	width:960px;margin:0;padding:0;background-color:#09460f;
}
#header{
	clear:both;width:960px;height:130px;padding-top:5px;background-color:#c3bb1f;
}
#logo{
	width:960px;height:100px;padding-left:25px;background-color:#4dc5d6;
}
#topmenu{
	float:left;width:960px;height:30px;padding-left:25px;background-color:#f9630d;
}
#content{
	clear:both;width:960px;height:500px;background-xolor:#f7ae16;
}
#leftmenu{
	float:left;width:200px;height:500px;line-height:14pt;padding-bottom:10px;background-color:#cccccc;
}
#centercontent{
	float:left;width:600px;line-height:14pt;height:500px;padding-bottom:10px;background-color:#c59a6f;
}
#rightsider{
	float:left;width:160px;line-height:14pt;height:500px;padding-bottom:10px;background-color:#faf93c;
}
#footer{
	clear:both;width:960px;height:30px;text-align:center;line-height:14pt;background-color:#ee88cd;
}

然后是在HTML代码里面引用该文件

  
     rel="stylesheet" type="text/css" href="test_main.css">
    
   
   



   
   
  
    
    

    
     
     

      
      
      

       
       网页logo
      
      
      
      
      

       
       网友顶部导航
      
      
    
     
     
    
     
     

        
      
      

       
       网页左边导航栏
      
      
        
      
      

       
       网页主体内容
      
      
        
      
      

       
       网页右边导航栏
      
      
    
     
     
    
     
     

      
      网页版权声明
     
     
  
    
    

   
   

这里有必要给大家看看这个示例的效果图：

    当然了，很多网页都是这样布局的，有兴趣的朋友可以自己试试设计一个自己的网页布局框架哦。