如何用css进行页面布局?

如何用css进行页面布局?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

网页布局:

又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。网页设计特点(相对纸媒来说)。

特点:

1、网页可以自适应宽度

2、网页的长度理论上可以无限延长

3:页面为:头部,主体部分,底部。

分栏又称为分列:一列布局 二列布局 三列布局 以及混合布局(用的最多),布局通过浮动和定位来完成(实现UI界面效果)。

一列布局:

body{margin:0;parding:0;}清除默认样式,各个浏览器的默认边距不一样,这样可以避免一些浏览器差异。当然也可以用*通配符把所有标签元素重置一遍,如:*{margin:0;padding:0px;},但是不推荐,因为会把所有的标签元素都给重置一遍,影响性能。需要用哪个就重置哪个吧。

水平居中,margin:0 auto

两列布局:

因为宽度要自适应,所以要设置左侧left的width:xx��需要左右排列,所以设置float:left;另一侧right也设置width和float(left和right都可以吧,再微调)

固定宽度的情况,left和right增加一个父div#main,设置这个main的width,以及margin 0 auto;如果要精确控制left和right的宽度,可以使用px。

浮动(float)和 绝对定位(position:absolute)可以让元素脱离标准文档流。

三列布局--中间自适应:

不用浮动,用定位

左右两边分别定位(position:absolute;letf/right:xpx;top:xpx;)

中间部分使用margin值确定(margin:0 xpx 0 xpx) ---左右延生到了下面,margin值大于左右宽度才能看到隔断区域

混合布局:我们可以把一列布局加入“左”和“右”改造为混合布局。

在中部mian中加入子div 分别是(左,右)。 然后分别在style中加入“.left和.right”的样式!“left和right”都要加浮动“float”,还可以在混合布局下进行更复杂的混合布局,可以将right定义为sub_right和sub_right 分为化为更为密集的混合布局。

清除浮动有两种方法:1.clear:both 2.overflow:hidden

clear:both; //清除两边元素的浮动对他的影响
overflow: hidden; // 用在浮动元素本身清除对父元素的影响

其实网页布局就是块与块之间的关系:1.挨着关系 2.嵌套的关系 3.叠加的关系 进行各种组合。

更多css的相关知识,可访问:web前端课程!!

以上就是如何用css进行页面布局?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读