09CSS网页布局基础

标签：20px   最简   ``   container   lan   abs   自适应   ade   高度   

[目录]

一、基础介绍

认识布局：

• 以最适合浏览器的方式将图片和文字排放在页面的不同位置
• 布局模式有多种，不同的制作者会有不同的布局设计

二、经典的行布局

1. 行布局自适应；行布局自适应限制最大宽；行布局垂直水平居中

   
   
   
   
   这是页面内容
   
   
   

2. 行布局固定宽；行布局某部位自适应；行布局导航随屏幕滚动

   
   
   
   
   
   
   这是页面的头部
       
   这是页面的banner部分
       
   这是页面的内容部分
       
   这是页面的底部
   
   
   

三、经典的列布局

1. 两列布局固定；两列布局自适应

   
   
   
   
   
   
   
       
   这是页面的左侧
       
   这是页面的右侧
   
   
   
   

2. 三列布局固定；三列布局自适应

   
   
   
   
   
   
   
       
   这是页面的左侧
       
   这是页面的中间
       
   这是页面的右侧
   
   
   
   

四、混合布局

混合布局固定；混合布局自适应

```






这是页面的头部
    
这是页面的轮播图
    

        
这是页面的左侧
        
这是页面的右侧
    
    
这是页面的底部


```

五、圣杯布局

1. 圣杯布局是由国外的KevinCornell提出的一个布局模型概念；在国内由淘宝UED的工程师传播开来

2. 布局要求：

   • 三列布局，中间宽度自适应，两边定宽
   • 中间栏要在浏览器中优先展示渲染
   • 允许任意列的高度最高
   • 用最简单的CSS，最少的HACK语句

3. 流程方式：Middle部分首先要放在container的最前部分，然后是left、right

   
   
   
   
   
   
   
           
   header
       
       
   
           
   
               
   middle
               
   这是页面的中间内容
           
           
   
               
   left
               
   这是页面的左边内容
           
           
   
               
   right
               
   这是页面的右边内容
           
       
       
   
           
   footer
       
   
   
   

六、双飞翼布局

1. 经淘宝UED的工程师针对圣杯布局改良后得出双飞翼布局，去掉相对布局，只需要浮动和负边距

2. 优点：

   • 主要的内容先加载的优化
   • 兼容目前所有的主流浏览器，包括IE6在内
   • 实现不同的布局方式，可以通过调整相关CSS属性即可实现

3. 流程方式：main要放最前面，其次是sub、extra

   
   
   
   
   
   
   
       
   
           
   
               
   main
           
       
       
   
           
   sub
       
       
   
           
   extra
       
       
   
           
   footer
       
   
   
   

09CSS网页布局基础

标签：20px   最简   ``   container   lan   abs   自适应   ade   高度   

原文地址：https://www.cnblogs.com/yujiao-99/p/12916098.html