如何用 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 前端课程!!

来源: http://www.css88.com/qa/css3/18040.html