CSS常见布局

2017-09-05  本文已影响0人  zh_yang

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

上一篇 下一篇

猜你喜欢

热点阅读