当前位置:Gxlcms > html代码 > CSS3中webkit-box布局页面实例_html/css_WEB-ITnose

CSS3中webkit-box布局页面实例_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:7人阅读

之前布局都是用float布局或者是display:inline-block;+width:**%;来计算,所以都不是真正意义上的流布局;

接下来的实例能完整的教给大家如何建立CSS3当中的流布局(以chrome为例)

  • 三列自适应布局
  • 1

    2

    3


    如图:

  • 三列布局,一列定宽,其余两列按1:2的比例自适应
  • 200px

    比例1

    比例2


    如图:

  • 一个常见的web page 的基本布局
  • Header

    定宽200

    比例3

    比例1

    Footer


    如图:

    人气教程排行