利用CSS+Div进行网页布局和排版

发布时间: 2012/8/20 17:31:52

本文将讲述如何进行网页的布局和排版。所谓布局，英文名称叫做Layouts，是指网页上不同功能分区的数量以及它们之间排列的位置和顺序。从事网页布局这项工作非常像报纸的主编，将每天大大小小长短不一的新闻在固定的版面中进行摆放，以达到最好的效果。

目前，利用CSS和Div组合对页面进行布局已经成为一个公认的标准方法，而在这之前，流行甚至唯一的方式就是利用表格进行页面布局。本文就先从它们两个各自的优缺点谈起。

1、表格还是Div

“生存还是死亡？这是一个问题。”对于网页布局来说，用表格还是用Div，也是一个问题。在Div+CSS占网页布局统治地位的今天，在学习它的时候，有必要先回顾一下表格的方法。

2、利用表格进行网页布局

3、利用Div+CSS进行网页布局

既然利用表格进行网页布局有前面所提到的一些缺点，近年来人们开始逐渐利用Div+CSS的方法实现布局的任务。

Div+CSS的方法最大的优点就是讲内容和布局分开处理，去掉了表格那么多的繁琐标签，缩减了网页文件大小。根据网页的流行结构，利用Div+CSS能够完成如下多种布局：

创建一列式网页布局。

创建两列式网页布局。

创建多列式网页布局。

创建不规则网页布局。

从下面的内容开始，我们将学习利用Div和CSS创建网页布局的具体过程。

4、用Div+CSS创建一列式网页布局

上文中提到了网页布局的概念与两种布局方法，特别是传统表格布局的优劣。本小节将介绍用Div+CSS创建网页布局的具体过程。

我们已经浏览过众多的网站，从目前流行的结构来看，主流网站的网页布局一般有如下几种：

一列式布局：整个网页一列到底部，不分左右两栏，类似大部分书籍的排版方式。

两列式布局：网页主要部分分为左、右两个区域，分别放置不同的内容，类似大部分杂志的排版方式，多用于一般商业网站、博客等等。

多列式布局：网页主要部分分为左、中、右三个甚至更多的区域，分别放置不同的内容，类似不少报纸的排版方式，多用于一般商业网站等等。

本文出自：亿恩科技【www.enkj.com】

服务器租用