Div+CSS布局入门教程(五)
四、页面制作(1)—-用好border和clear
由于找工作找房子的原因，隔了这么久才能开始写教程，心里感觉很对不起一直在关注本站的朋友，今天是找到房子的第二天，于是赶快继续写教程。
这一节里面，主要就是想告诉大家如何使用好border和clear这两个属性。
首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在
中加入这么一段就可以了，你可以试试：
大家可以再次参考手册，然后你就能明白dashed、solid、dotted…等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。
程序代码 以上代码便可以实现设计草图中的banner，在css.css中加入以下样式：
[code]#banner {
background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
width:730px; /*设定层的宽度*/
margin:auto; /*层居中*/
height:240px; /*设定高度*/
border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
clear:both /*清除浮动*/
}[/code]
通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。
另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动，如果不清除则会影响banner层位置的设定。
[code]
[/code]
以上是页面主体部分，我们在css.css中添加以下样式：
[code]#pagebody {
width:730px; /*设定宽度*/
margin:8px auto; /*居中*/
}
#sidebar {
width:160px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
}
#mainbody {
width:570px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden
}[/code]
为了可以查看到效果，建议在#sidebar和#mainbody中加入以下代码，预览完成后可以删除这段代码：
[code]border:1px solid #E00;
height:200px[/code]
保存预览效果，可以发现这两个层完美的浮动，在达到了我们布局的要求，而两个层的实际宽度应该[color=#E00000]160+2(border)+570+2=734px，已经超出了父层的宽度，由于clear的原因，这两个层才不会出现错位的情况，这样可以使我们布局的页面不会因为内容太长（例如图片）而导致错位。
而之后添加的overflow:hidden则可以使内容太长（例如图片）的部份自动被隐藏。通常我们会看到一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加overflow:hidden就可以解决这个问题。
CSS中每一个属性运用得当，就可以解决许多问题，或许它们与你在布局的页并没有太大的关系，但是你必须知道这些属性的作用，在遇到难题的时候，可以尝试使用这些属性去解决问题。
源文件可以再下一节中再次下载。
相关文章：
Div+CSS布局入门教程(一) # — 页面布局与规划
Div+CSS布局入门教程(二) # — 写入整体层结构与CSS
Div+CSS布局入门教程(三) # — 页面顶部制作(1)
Div+CSS布局入门教程(四) # — 页面顶部制作(2)—-使用列表
制作菜单
Div+CSS布局入门教程(五) # — 用好border和clear
优化你的CSS代码 #
转载请注明出处：番茄's Blog
05月 14th, 2006 at 00:29:34
站长做个友情 文字连接
贵站已经做好
http://www.chinadhcp.com
05月 17th, 2006 at 18:05:06
#sidebar {
width:160px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
}
#mainbody {
width:570px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden
}
为什么我写入这段代码后，pagebody 层看不到如教程所示的效果呢？
05月 18th, 2006 at 00:22:28
不明白为什么要设banner的div的高度为240？
而banner的图片高度只有206啊。
不明白background:url(banner.jpg) 0 30px 里的 0 30px 是设置什么位置。
05月 18th, 2006 at 00:43:49
楼主加油哦！！
等着你下面的教程
05月 18th, 2006 at 09:56:56
楼主加油啊，继续关注
05月 18th, 2006 at 13:18:07
怎么在 #pagebody 中不加入：
clear:both /*清除浮动*/
05月 23rd, 2006 at 19:01:59
请问站长，
最近开始学css
现在最头疼的一件事就是我用列表做菜单 ul li
但是被菜单下面的层档住了。在firefox和opera里都没事儿，就在ie里，被下面的层档住了。有什么简洁的好法子没有啊？
06月 9th, 2006 at 14:13:13
#sidebar {
width:160px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
}
为什么float:left; 后又clear:left;
06月 14th, 2006 at 13:55:44
请问当height的值变为一定的程度，线的长度就不变了
比如我文字设为12px，如何使line的高度和字一样高呢？
06月 23rd, 2006 at 16:55:14
顶 ~~~~~~~~~~~
太好了，佩服佩服~~~~~~~~~`
比买的书写的明白~~~~~~~~~~~
06月 27th, 2006 at 17:40:08
非常期待番茄的下一节教程
06月 28th, 2006 at 11:04:17
真是太好了，期待您的下一节教程
07月 6th, 2006 at 22:07:10
[razz]真是高手啊，佩服佩服！！
07月 10th, 2006 at 15:26:00
怎么让线居中
07月 27th, 2006 at 12:29:48
期待继续更新
08月 5th, 2006 at 17:21:58
怎么还不更新啊，大哥，帮帮忙，大家都在等着你呢！！！！！！！！！！！！！！！！！！！！！！！
08月 6th, 2006 at 23:21:17
兄弟，大家都在等着下一篇啊？真是望眼欲穿啊？盼啊，盼啊，一直盼到忘了，还是没有更新，真是失望。
08月 9th, 2006 at 14:54:50
I am waiting for next article for a long time, please!!!
08月 21st, 2006 at 19:29:29
我也来感谢站长~继续努力啊！
还有，留言框的图标是用AJAX调入的吗？
08月 29th, 2006 at 09:16:53
你好站长,我正在为公司做博客!可是遇到了问题!我正作到更改也面主题!正好用到了div+css技术!看了一份您不错的教程,可是不太完整,如您有时间的话,赶紧写完好不好?我急用啊!!!!!!!谢谢!!!!!
08月 29th, 2006 at 17:11:43
下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇下一篇
我等的花都谢了
08月 30th, 2006 at 15:49:05
楼主写的代码问题*_^(楼主不要怪我~hehe)
虽然是小问题，但是楼主画得效果是显示不出来的~
层的名字是区分大小写的，楼主给出的代码里面没有区分，所以。。。
改成大小写一致就没问题了。
09月 3rd, 2006 at 22:33:01
我要是女的绝对爱你。可惜不是，，呵呵
10月 29th, 2006 at 13:35:40
你的网页上面的这个效果，我在本机上运行不出来，能有办法解决吗
11月 1st, 2006 at 10:41:02
很棒!
11月 1st, 2006 at 10:41:55
楼主写得非常好
11月 21st, 2006 at 19:41:44
能不能出个CHM的供大家一起下载啊
11月 22nd, 2006 at 09:34:09
很好的一篇儿入门帖 终于看懂
期待你的后作！
12月 1st, 2006 at 23:12:23
回复上面的朋友，去掉height即可．
12月 7th, 2006 at 17:23:00
楼主你真是好人啊!好人会有好报的.
12月 14th, 2006 at 13:40:02
要引用，呵呵
12月 28th, 2006 at 14:35:55
非常感谢番茄大哥对初学者的我的照顾。能不能麻烦番茄大哥发一张切好的PSD的图。table排版时的切片跟现在的有不同吗？。（我都是在PS里切的，FK我不会）
01月 2nd, 2007 at 00:56:39
牛人啊，好崇拜啊，真期待可以看到更多的文章[em_08]
01月 2nd, 2007 at 22:29:59
值得学习！
01月 7th, 2007 at 16:03:47
我觉得浮动好像没什么用 请指教，我的QQ是 260859084
01月 8th, 2007 at 09:39:38
嗨
我是一名初学者．
我不知道要把div+css学好要先看一些什么内容啊．
先看htm吗？好是去买书拉．有不知道那一种适合想我们初学者的啊；
你可以告诉我
01月 9th, 2007 at 10:05:00
想要你的网页代码[2006-10-29 01:35 PM]
兄台,仔细点看看～N多没有结束标记对，请先研究一下
01月 13th, 2007 at 22:25:44
不错,期待更多
01月 14th, 2007 at 00:51:29
左边 和 右边显示 的 情况，为什么我自己建立的 css就不行？用下载的你的源文件就可以实习左右显示？谢谢
01月 14th, 2007 at 00:54:05
#sidebar {
width:160px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
}
#mainbody {
width:570px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden
}
为什么我写入这段代码后，pagebody 层看不到如教程所示的效果呢？ email： fsz521job@hotmail.com 期待您的回答谢谢
01月 16th, 2007 at 23:40:12
楼下的
overflow:hidden
}
最后少了个分号;
01月 23rd, 2007 at 13:10:20
#sidebar {
width:160px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
}
#mainbody {
width:570px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden
}
为什么我写入这段代码后，pagebody 层看不到如教程所示的效果呢？
–我也看不到，为什么啊？？
02月 9th, 2007 at 15:36:45
不需要密码
04月 6th, 2007 at 10:04:20
我希望看到你写的更多的关于div+css的文章,谢谢的慷慨!
04月 16th, 2007 at 14:06:47
牛人呀[em_42][em_42][em_42][em_42][em_42]
04月 17th, 2007 at 10:35:10
写得太精彩了 希望以后还能看到您有关的文章
04月 28th, 2007 at 15:10:37
不能显示效果,可能是ID大小写的缘故
05月 6th, 2007 at 03:18:17
哈，正学这个，收藏了
byskyw.blog.hexun.com
05月 7th, 2007 at 14:47:35
为什么不是左右显示呀
05月 16th, 2007 at 15:34:41
太感谢了,你太牛了,可以做个朋友吗!
05月 31st, 2007 at 19:30:25
层定义时ID大小写没有统一，造成无法显示左右边框．