Div+CSS布局入门教程(二)
二、写入整体层结构与CSS
接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
[code]
[/code]
这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
下面，我们在
标签对中写入DIV的基本结构，代码如下：[code]
[/code]
为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：
[code]
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
/*页面层容器*/
#container {width:100%}
/*页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}
/*页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}
/*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}
[/code]
把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。
关于以上CSS的说明（详细请参考CSS2.0中文手册，网上有下载）：
1、请养成良好的注释习惯，这是非常重要的；
2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；
3、讲解一些常用的CSS代码的含义：
font:12px Tahoma；
这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；
margin:0px；
也使用了缩写，完整的应该是：
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
或
margin:0px 0px 0px 0px
顺序是 上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，
另外还有以下几种写法：
margin:0px auto；
说明上下边距为0px，左右为自动调整；
我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，
只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。
text-align:center
文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。
background:#FFF
设置背景色为白色，这里颜色使用了缩写，完整的应该是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色系表)。
4、如何使页面居中？
大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？
是因为我们在#container中使用了以下属性：
margin:0 auto;
按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。
如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。
通过margin:auto我们就可以轻易地使层自动居中了。
5、这里我只介绍这些常用的CSS属性了，其他的请参看CSS2.0中文手册。
相关文章：
Div+CSS布局入门教程(一) # — 页面布局与规划
Div+CSS布局入门教程(二) # — 写入整体层结构与CSS
Div+CSS布局入门教程(三) # — 页面顶部制作(1)
Div+CSS布局入门教程(四) # — 页面顶部制作(2)—-使用列表
制作菜单
Div+CSS布局入门教程(五) # — 用好border和clear
优化你的CSS代码 #
转载请注明出处：番茄's Blog
03月 20th, 2006 at 18:11:52
[Belial]
顶啊,兄弟们
03月 20th, 2006 at 20:10:14
期待（3） 站长加油~ 正为BLOG 风格没有自己特色烦恼了
03月 21st, 2006 at 14:26:59
努力啊，站长，我们都在期待下一篇。
04月 21st, 2006 at 15:17:30
我还是不明白
是不是我太菜了??
保存在什么笔记本里
不懂 …
我怎么这么笨年??
05月 17th, 2006 at 15:08:56
好东西，顶:)
06月 9th, 2006 at 14:29:37
白痴。页面居中明显是body的text-align:center的功劳。
竟然说是margin:0 auto;
你还没入门吧？？
06月 9th, 2006 at 15:02:48
[quote=SB]白痴。页面居中明显是body的text-align:center的功劳。
竟然说是margin:0 auto;
你还没入门吧？？
你可以尝试一下去掉margin:0 auto;
在FireFox、IE、Opera查看一下不同的效果就知道了，
你还可以去掉text-align:center在不同浏览器下查看一下效果!
06月 9th, 2006 at 15:12:43
另外，因为我不是专家，写文章难免有错误的地方，我欢迎大家提出错误。
但是，我并不欢迎那些没有教养的人来阅读我的文章，你要知道，尊重别人也就是尊重你自己！
06月 11th, 2006 at 02:27:13
支持站长,看的人只能提出疑问,但是不可以没文化的说那个兄弟说的话,…
06月 13th, 2006 at 14:46:08
Quote :
白痴。页面居中明显是body的text-align:center的功劳。
我无语。。。。。
06月 18th, 2006 at 21:57:34
http://www.seoconsultants.com/css/tips/
到这个网站去,让你把CSS菜单看个爽
06月 27th, 2006 at 10:47:37
div+css 我试过 虽然写法比较简洁 但是再写的过程中可能比TABLE的要麻烦些(个人意见) 用于比较简单的网站设计 是比较合适的 如果用于较复杂的页面设计 可能会让 设计者大伤脑筋 我写了一个一般点的网站http://chinastone.nease.net/
06月 27th, 2006 at 11:14:21
谢谢站长！
06月 27th, 2006 at 11:18:12
background:url('bg.gif') 20px 100px;
这里的20px 100px是相对于整个页面呢？
还是相对于当前div的呢？？
06月 29th, 2006 at 10:30:04
写的不错~~我都看明白了~~
06月 30th, 2006 at 00:37:39
各位如果如CSS在页面中加入FLASH文件呀!??谢谢!
07月 11th, 2006 at 22:19:47
这么好的内容，俺要象齐达内一样狠狠地顶一下！
08月 8th, 2006 at 13:35:35
这个sidebai和mainbody怎么写呢??
怎么写才能实现侧边栏和主体内容的效果??
08月 21st, 2006 at 21:38:46
我是初学者,站长所说的却是有点错误,我把text-align:center去掉后页面就不再居中显示了,而我把margin:0px auto 去掉后页面仍然居中显示啊
08月 24th, 2006 at 14:33:23
如果想学，推荐本好的教材吧
10月 12th, 2006 at 13:28:26
=”css.css” rel=”stylesheet” type=”text/css” /
为什么我用这样子就图片不能显示了？？
=”style/css.css” rel=”stylesheet” type=”text/css” /
路径错误？但是文字效果还是在的啊？
10月 30th, 2006 at 16:58:38
本来就是爱好者一起讨论，别人有错误了，也不必骂人吧？纠正出来就行了！
12月 12th, 2006 at 11:54:40
骂人的是猪
再一次感谢作者
12月 13th, 2006 at 16:18:18
这个网站有时候会打不开啊 大概每个钟会断一次[em_01]
12月 13th, 2006 at 16:25:15
楼主别往心里去 .骂人的人很明显的妒忌楼主,觉得自己太烂.所以产生了报复的心理. 这种人很可怜的…
01月 7th, 2007 at 15:49:53
真是郁闷啊!
01月 11th, 2007 at 09:19:20
恩，写的还不错，以前是用表格布局，现在学习用DIV+CSS。哈哈[em_02]
01月 11th, 2007 at 16:09:03
[em_53]支持
03月 2nd, 2007 at 11:31:25
不错！加我的QQ一起学习415782479
03月 8th, 2007 at 16:27:34
不错
04月 9th, 2007 at 14:22:08
白痴。页面居中明显是body的text-align:center的功劳。
竟然说是margin:0 auto;
你还没入门吧？？
说这话的人是垃圾…顶番茄红了.不用理会这种垃圾人…..[em_24]
04月 14th, 2007 at 15:59:16
为什么我刚才保存的那个CSS.CSS不能在IE中浏览呢??谁在线呢求大家帮个忙告诉我吧!!
04月 16th, 2007 at 11:42:17
ＡＳＰ 开发ＱＱ群：３８１９７９１３
04月 17th, 2007 at 09:18:13
LZ！写的不错哦！谢谢哦！
学了很多东西！
04月 19th, 2007 at 14:37:57
人无完人 错了也不是什么大不了的事情
但是 那种为大众学习无私提供材料的人就值得尊敬
LZ 你辛苦了
05月 9th, 2007 at 10:34:00
thank you
05月 9th, 2007 at 16:04:44
搞笑啊，那位叫SB的自己连文字对齐和页面对齐都不分的居然还骂别人白痴，快回去玩泥巴吧！
05月 21st, 2007 at 17:13:56
我想要請教一下 如果我在目前div按下連結
可是我想要把連結的結果show再另ㄧ個div中那我該怎麼做?
謝謝
06月 2nd, 2007 at 16:23:46
我总感觉要写代码的东西难。为什么了呢~~~~~~[em_37]
06月 2nd, 2007 at 16:25:48
喝杯白酒 交个朋友~~~~~~[em_13]