css中的五种常见页面布局-css教程-PHP中文网

css中的五种常见页面布局

公共样式部分代码：

（推荐教程：CSS教程）

    html * {
      margin: 0;
      padding: 0;
    }
    .layout {
      margin-bottom: 20px;
    }
    .layout article {
      width: 100%;
     }
    .layout article > div {
      min-height: 100px;
    }
    .layout article .left {
      width: 300px;
      background: red;
    }
    .layout article .center {
      background: orange;
    }
    .layout article .right {
      width: 300px;
      background: blue;
    }

float布局

  
  
    
    
      
      
      
        这是float布局
        这是一段文字

							
								
								
									Kuwebs企业网站管理系统3.1.5 UTF8
									酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描
								
								下载 
							
						
立即学习“前端免费学习笔记（深入）”；
        这是一段文字
立即学习“前端免费学习笔记（深入）”；

absolute布局

 
  
    
    
      
      
        这是absolute布局
        这是一段文字
立即学习“前端免费学习笔记（深入）”；
        这是一段文字
立即学习“前端免费学习笔记（深入）”；

flex布局

  
  
    
    
      
      
        这是flex布局
        这是一段文字
立即学习“前端免费学习笔记（深入）”；
        这是一段文字
立即学习“前端免费学习笔记（深入）”；

table布局

  
  
    
    
      
      
        这是table布局
        这是一段文字
立即学习“前端免费学习笔记（深入）”；
        这是一段文字
立即学习“前端免费学习笔记（深入）”；

grid布局

  
  
    
    
      
      
        这是grid布局
        这是一段文字
立即学习“前端免费学习笔记（深入）”；
        这是一段文字
立即学习“前端免费学习笔记（深入）”；