周海汉:用CSS而不是表格Table来做圆角的框

CSS的
箱子模式

作者:
周海汉



msn: ablo_zhou@hotmail.com

QQ: 7268188

在网页制作中,为了美观,需将边框制作成圆角。以往都是采用表格来定位。而表格嵌套有许多缺陷。能不能不用表格直接用CSS制作漂亮的圆角边框?这是我自己用CSS制作的一个例子。查看原文件就可以看到,这个框架没有一处用到Table。

margin:加边,设置后会导致元素的框移动,页边空白增加

padding:填料,框内部的空白会增加

border:元素的框

也可直接设置元素的这几个属性的四边。

margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom , padding-left

Margin box
Border box
Padding box
Element box

 


 

源码:

<div style="BACKGROUND: #ccff66">
	<div style="BACKGROUND: url(/imgs/pic_01.gif) no-repeat left top; WIDTH: 45%">
	<div style="BACKGROUND: url(/imgs/pic_02.gif) repeat-x right top; MARGIN-LEFT: 20px; MARGIN-RIGHT: 20px">
	<div style="BACKGROUND: url(/imgs/pic_03.gif) no-repeat right top; MARGIN-RIGHT: -20px">
	<br style="BACKGROUND: #ffffcc"/>
	&nbsp; </div>
	</div>
	<div style="MARGIN-TOP: -45px; BACKGROUND: url(/imgs/pic_04.gif) repeat-y left top">
	<div style="MARGIN-TOP: 30px; BACKGROUND: #ffffff; MARGIN-LEFT: 20px">
	<div style="BACKGROUND: url(/imgs/pic_06.gif) repeat-y right top; MARGIN: -2em 0px 20px; PADDING-TOP: 25px">
	<div style="BACKGROUND: #ffffcc; MARGIN-LEFT: 20px; MARGIN-RIGHT: 20px">
	周海汉:用CSS而不是表格Table来做圆角的框 <br/>
	CSS的<a href="http://www.htmldog.com/guides/cssbeginner/margins/">
	箱子模式</a><p>
	作者:<a href="http://abloz.com/">
	周海汉</a>
	<br/>
	msn: ablo_zhou@hotmail.com <br/>
	QQ: 7268188 </p>
	<p>
	在网页制作中,为了美观,需将边框制作成圆角。以往都是采用表格来定位。而表格嵌套有许多缺陷。能不能不用表格直接用CSS制作漂亮的圆角边框?这是我自己用CSS制作的一个例子。查看原文件就可以看到,这个框架没有一处用到Table。</p>
	<p>
	margin:加边,设置后会导致元素的框移动,页边空白增加 <br/>
	padding:填料,框内部的空白会增加 <br/>
	border:元素的框 </p>
	<p>
	也可直接设置元素的这几个属性的四边。<br/>
	margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom , padding-left </p>
		<div style="PADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; MARGIN: 0px 2em 1em; PADDING-TOP: 0px; BACKGROUND-COLOR: #ccf">
		Margin box <div style="PADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; PADDING-TOP: 0px; BACKGROUND-COLOR: #66f">
		Border box <div style="PADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; PADDING-TOP: 0px; BACKGROUND-COLOR: #99f">
		Padding box <div style="BACKGROUND-COLOR: white">
	Element box </div>
	</div>
	</div>
</div>
<br />&nbsp;
	</div>
	</div>
	</div>
	</div>
	<div style="BACKGROUND: url(/imgs/pic_07.gif) no-repeat left bottom;margin-top: -40px ">
	<div style="BACKGROUND: url(/imgs/pic_08.gif) repeat-x right bottom; MARGIN-LEFT: 15px">
	<div style="PADDING-LEFT: 25px; BACKGROUND: url(/imgs/pic_09.gif) no-repeat right bottom; MARGIN-LEFT: 20px">
		<br/>&nbsp;</div>
	</div>
	</div>
	</div>
</div>


原创文章,转载请注明出自瀚海星空.
本文链接地址:http://abloz.com/2006/01/11/css-div-make-frame.html