CSS网页布局介绍

CSS网页布局介绍

1、 CSS网页布局介绍

认识布局：

-以最适合浏览的方式将图片和文字排放在页面的不同位置

-布局模式有多种，不同的制作者会有不同的布局设计

-学习网页布局是制作一个网页的基础

 

课程包含内容

-行布局

-多列布局

-圣杯布局

-双飞翼布局

 

 

基础布局

1、 经典的行布局-1***

-基础的行布局

-行布局自适应

-行布局自适应限制最大宽

-行布局垂直水平居中

 

2、 经典的行布局-2

-行布局固定宽

-行布局某部位自适应

-行布局导航随屏幕滚动         

 

3、 经典的两列布局

-两列布局固定

-两列布局自适应

-三列布局固定

-三列布局自适应

 

4、 经典的三列布局

-两列布局固定

–两列布局自适应

-三列布局固定

-三列布局自适应

 

5、 混合布局

-混合布局固定

-混合布局自适应

 

经典布局

1、 圣杯布局

-圣杯布局是由国外的Kevin Cornell提出的一个布局模型概念

-在国内由淘宝UED的工程师传播开来

 

布局要求

-三列布局，中间宽度自适应，两边定宽

-中间栏要在浏览器中优先展示渲染

-允许任意列的高度最高

-用最简单的CSS、最少的HACK语句

 

2、 双飞翼布局及案例

-经淘宝UED的工程师针对圣杯布局改良后得出双飞翼布局

-去掉相对布局，只需要浮动和负边距