div+css布局入门教程

资源名称：div+css布局入门教程

内容简介：

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

　　所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来

　　　　设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。

　　　　background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：

　　　　background:#ccc url('bg.gif') top left no-repeat；

　　　　表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，

　　　　top left

　　　　表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。

　　　　top/right/left/bottom/center

　　　　用于定位背景图片，分别表示 上 / 右 / 下 / 左 / 中；还可以使用

　　　　background:url('bg.gif') 20px 100px;

　　　　表示X座标为20像素，Y座标为100像素的精确定位；

　　　　repeat/no-repeat/repeat-x/repeat-y

　　　　分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。

　　　　height / width / color

　　　　分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。

如何使页面居中？

　　　　大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？

　　　　是因为我们在#container中使用了以下属性：

　　　　margin:0 auto;

　　　　按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。

　　　　如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。

　　　　通过margin:auto我们就可以轻易地使层自动居中了。

资源截图：