如何用css进行网页布局

html-css020

如何用css进行网页布局,第1张

实现网页布局的方式方法比较多,布局方式可以大概分为这几类。

布局种类:

1、table布局(网页的兴起,1995)

2、Flash布局(自由的黄金时代,1996)

3、div+css(CSS的诞生,1998)

4、栅格与响应式(移动端的兴起,2007与2010)

当前WEB前端开发使用DIV+CSS的布局方式会比较多也比较常用吧,网页布局看起来貌似简单,但是它需要综合使用很多HTML+CSS的知识,总的来说知识量是不小。如果想系统化的了解HTML+CSS方面的知识,建议你选择一本比较不错的HTML5相关书籍(主要看知识逻辑、知识的表达方式,比如《HTML5布局之路》)进行学习,让自己的知识更扎实一些,不然学的零零散散的。

Tips:学习好HTML+CSS有利于后面学习JavaScript,毕竟需要它们两者结合在一起才可以实现出可交互的前端页面。

1、一列布局:一般都是固定的宽高,设置margin : 0 auto来水平居中,用于界面显著标题的展示等。

2、两列布局:说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。

3、三列布局:两侧定宽中间自适应,首先设置父级元素的宽度,可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动,设置margin,调整间距。同样注意清除浮动的影响。

4、混合布局:在一列布局的基础上,保留top和foot部分,将中间的main部分改造成两列或三列布局,小的模块可以再逐级同理划分。