CSS---布局设计

217 阅读1分钟

关于布局

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

基础布局

行布局

  • 基础的行布局
  • 行布局自适应
  • 行布局自适应限制最大宽
  • 行布局垂直水平居中

基础行布局

行布局自适应

自适应宽度和限制最大宽

使用到了百分比来设置宽度

行布局垂直水平居中(使用到了position绝对定位)

经典行布局

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

实现了头部的固定

经典列布局

两列布局与三列布局相同,自适应时则改变宽度值为百分比

两列布局

三列布局

混合布局

将行布局与列布局结合在一起

圣杯布局与双飞翼

详见另一篇单独介绍的文章