css div frame table

用CSS 而不是Table来制作圆角框

abloz 2006-01-11
2006-01-11 
周海汉：用CSS而不是表格Table来做圆角的框   

CSS的[
箱子模式](http://www.htmldog.com/guides/cssbeginner/margins/)
： 


作者：[
周海汉](http://abloz.com/)
  

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"></br>
	  </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></br>
	CSS的<a href="http://www.htmldog.com/guides/cssbeginner/margins/">
	箱子模式</a>
	： <p>
	作者：<a href="http://abloz.com/">
	周海汉</a>
	<br></br>
	msn: ablo_zhou@hotmail.com <br></br>
	QQ: 7268188 </p>
	<p>
	在网页制作中，为了美观，需将边框制作成圆角。以往都是采用表格来定位。而表格嵌套有许多缺陷。能不能不用表格直接用CSS制作漂亮的圆角边框？这是我自己用CSS制作的一个例子。查看原文件就可以看到，这个框架没有一处用到Table。</p>
	<p>
	margin:加边，设置后会导致元素的框移动，页边空白增加 <br></br>
	padding:填料，框内部的空白会增加 <br></br>
	border：元素的框 </p>
	<p>
	也可直接设置元素的这几个属性的四边。<br></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></br> 
	</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></br> </div>
	</div>
	</div>
	</div>
</div>

如非注明转载, 均为原创. 本站遵循知识共享CC协议,转载请注明来源

FEATURED TAGS
css vc6 http automake linux make makefile voip 乱码 awk flash vista vi vim javascript pietty putty ssh posix subversion svn windows 删除 编译 多线程 wxwidgets ie ubuntu 开源 c python bash 备份 性能 scp 汉字 log ruby 中文 bug msn nginx php shell wordpress mqueue android eclipse java mac ios html5 js mysql protobuf apache hadoop install iocp twisted centos mapreduce hbase thrift tutorial hive erlang lucene hdfs sqoop utf8 filter 草原 yarn ganglia 恢复 scrapy django fsimage flume tail flume-ng mining scala go kafka gradle cassandra baas spring postgres maven mybatis mongodb https nodejs 镜像 心理学 机器学习 Keras theano anaconda docker spark akka-http json 群论 区块链 加密 抽象代数 离散对数 同余 欧拉函数 扩展欧几里德算法 ES6 node-inspect debug win10 vscode 挖矿
FRIENDS