网页整体布局基本模板

一、效果

二、代码

1、html文件

	
    	
        
        
    
    
    	

        	
页眉header
        
        

        	

            	菜单一
                菜单二
                菜单三
                菜单四
                菜单五
                菜单六
                菜单七
                菜单八
            
            

            	
侧栏Aside
                
侧栏内容
                
侧栏内容
                
侧栏内容
                
侧栏内容
                
侧栏内容
            
            

            	

                	

                    	
文章页眉Article Header
                    
                    
正文内容
                    
正文内容
                    
正文内容
                    
正文内容
                    
正文内容
                    
正文内容
                    

                    	
文章页脚Article Footer
                    
                
                
                

                	

                    	
文章页眉Article Header
                    
                    
正文内容
                    
正文内容
                    
正文内容
                    

                    	
文章页脚Article Footer
                    
                
           
           

            	
侧栏Aside
                
侧栏内容
                
侧栏内容
                
侧栏内容
                
侧栏内容
                
侧栏内容
            
            

                
页脚Footer
            
          
       

2、css文件

body{
	background-color:#CCCCCC;
	margin::0px auto;
	max-width:2000px;
	boder-color:#FFFFFF;
	color:black;
}
header{
	background-color:#2289F0;
	display:block;
	color:#FFFFFF;
	text-align:center;
}
h1{
	font-size:72px;
	margin:0px;
	txet-align:center;
}
h2{
	font-size:24px;
	margin:0px;
	text-align:center;
}
h3{
	font-size:18px;
	magin:0px;
	text-align:center;
}
nav{
	display:block;
	width:100%;
	float:left;
	text-align:center;
	background-color:white;
	padding-top:20px;
	padding-bottom:20px;
}
nav a:link,nav:visited{
	display:inline;
	border-bottom:3px solid #fff;
	padding:10px;
	text-decoration:none;
	font-weight:bold;
	margin:5px;
}
nav a:hover{
	color:white;
	background-color:#F47D31;
}
nav h3{
	margin:15px;
}
#container{
	background-color:#CCC
}
section{
	display:block;
	width:60%;
	float:left;
}
article{
	background-color:#eee;
	display:block;
	margin:10px;
	padding:10px;
}
article header{
	padding:5px;
}
article footer{
	padding:5px;
}
article:h1{
	font-size:18px;
}
aside{
	display:block;
	width:20%;
	float:left;
}
aside:h3{
	margin:15px;
}
aside p{
	margin:15px;
	font-weight:bold;
}
footer{
	clear:both;
	display:block;
	background-color:#2289F0;
	color:#FFFFFF;
	text-align:center;
	padding:15px;
}
footer h2{
	font-size:14px;
	color:white;
}
a{
	color:#F47D31;
}
a:hover{
	text-decoration:underline;
}

3、注意事项

html文件与css文件应位于同一文件夹下。