美文网首页
CSS常见布局

CSS常见布局

作者: zh_yang | 来源:发表于2017-09-05 17:48 被阅读0次

    1、实现页面头部两个按钮无缝居中的效果。

    方法一,浮动+包裹:http://js.jirengu.com/xoyiz/1/edit?html,output
    方法二,弹性布局:http://js.jirengu.com/hoyej/1/edit?html,output
    方法三,父元素font-size设为0,子元素font-size重新设置。
    方法四,HTML标签不留空白。

    2、实现两栏布局。

    方法一,浮动+margin,以左固定为例:http://js.jirengu.com/tiguw/3/edit
    方法二,弹性布局,以右固定为例:http://js.jirengu.com/ditah/1/edit

    3、实现三栏布局。

    方法一:浮动+margin,以左固定为例:http://js.jirengu.com/nager/1/edit
    方法二,弹性布局,以右固定为例:http://js.jirengu.com/wuvar/2/edit

    4、代码效果

    https://jirengu-yang.github.io/resume//demo4/l04.html

    5、代码效果

    https://jirengu-yang.github.io/resume/demo3/l02.html

    6、圣杯布局、双飞翼布局

    圣杯布局:http://js.jirengu.com/rilar/1/edit
    双飞翼布局:http://js.jirengu.com/xiyej/1/edit

    相关文章

      网友评论

          本文标题:CSS常见布局

          本文链接:https://www.haomeiwen.com/subject/gxzujxtx.html