经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › CSS怎么将区块之间留出空白间距(附CSS及HTML源代码)

查看: 1288|回复: 8

[求助] CSS怎么将区块之间留出空白间距(附CSS及HTML源代码) [复制链接]

zyfpb　楼主

高级会员

帖子: 276
体力: 1325
威望: 0
居住地: 贵州省黔东南苗族侗族自治州

发表于 2008-7-7 22:08:06 |显示全部楼层

正在将一个TABLE站修改成DIV+CSS站,由于以前对DIV+CSS接触得比较少,现在遇到一个问题一直解决不了,请高手指教一下
我想将如图所示的四个区块间的距离加宽一点,就是在各区块之间留出一定距离,使各区块之间不要显示太拥挤了,应该怎么改CSS文件

测试地址:http://www.zytx.info/test.htm

/*源文件...................................*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

/*综合设置-------------------------------------------------------------------------------------------综合设置*/

* { word-break: break-all; } /*在IE中实行强制换行*/
body { margin: 0 auto; padding: 0; color: #000; text-align: center; font: 12px Arial, Helvetica, sans-serif; }

#wrap { margin: 0 auto; text-align: left; width: 900px; padding: 0 4px; width: 900px; }

/*链接样式*/
a {font-family: "宋体", Arial;font-size: 12px;color: #124ABB;text-decoration: underline;line-height: normal;
}
a:hover {font-family: "宋体", Arial;font-size: 12px;color: #FF0000;text-decoration: underline;
}
a img { border: none; }

/*文章列表中的作者、日期*/
li cite { font-style: normal; font-size: 12px; float: right; width: 4em; color: #999; }
	li cite a { color: #999; font-size: 12px !important; }
		li cite a:visited { color: #999; }

/*选项卡*/
h3.tabs { background-color: #E8F7FC !important; height: 26px; padding-left: 0 !important; }
	h3.tab { font-weight: normal; float: left; padding: 0 10px; cursor: pointer; border-right: 1px solid #C1D8E0; }
		h3.curtab { background: #FFF; border-right-color: #B2C9D3; font-weight: bold; }

/*主体框架风格*/
#content{ width: 900px;height:1%;padding:5px;5px}
	#content ul {  margin: 0 ; padding: 0; width: 100%; overflow: hidden; }
	#content li {  margin: 3px 0 0 0;padding: 5px 15px; text-align: left; width: 100%; overflow: hidden; white-space: nowrap; }

#main_box{  /*正文区大容器*/
  width:900px;height:1%;background:#ffffff;}

.main_row{  /*定义每行*/
  width:100%;clear:both;
}

/*单行信息列表*/
.msgtitlelist { margin: 0; padding: 0; list-style: none; line-height: 1.8em;width:298px }
     .msgtitlelist ul { list-style: none; margin: 0 1em; padding: 0; width: 100%; overflow: hidden;  }
	.msgtitlelist li { height: 1.2em; overflow: hidden; padding-left: 0.8em; background: url([img]http://www.zytx.info/templates/default/images/dot3.gif[/img]) no-repeat 3px 1em; }
	/*最新资讯列表*/
   
	.block .msgtitlelist { padding: 3px 5px; }

.blockcategorylist {width:900px; border: 1px solid #B2C9D3; border-top: none; margin-bottom: 6px; overflow: hidden;  }

/*\*/ * html .blockcategorylist { height: 1%; } /**/
	.blockcategory { float: left; width: 300px; border-top: 2px solid #B2C9D3; height: 280px; overflow: hidden; }
		.blockcategory h3 {width: 300px; line-height: 26px; background:  url([img]http://www.zytx.info/templates/default/images/columnbg.gif[/img]) repeat-x bottom; margin: 1px 0 0; font-size: 1em; height: 20px; }
			.blockcategory h3 strong { background:  url([img]http://www.zytx.info/templates/default/images/columnbg.gif[/img]) repeat-x bottom; border-right: 1px solid #B2C9D3;border-left: 1px solid #E3E3E3; float: left; padding: 0 10px; max-width: 180px; height: 26px;text-align:center bottom; overflow: hidden; }
				.blockcategory h3 strong a { color: #633; font-size:15px; text-decoration:none}
			.blockcategory .msgtitlelist { margin: 0 0 0 10px; padding: 0 0 0 20px; height: 280px; font-size: 1em;border-bottom: 1px solid #E3E3E3;border-left: 1px solid #E3E3E3;border-right: 1px solid #E3E3E3;}
	        .blockcategory .msgtitlelist ul { list-style: none; margin: 0 3em; padding: 0 0 0 20px;  width: 100%; overflow: hidden;  }
		    .blockcategory .msgtitlelist li { float: left;  width: 100%; padding: 0 0 0 20px; overflow: hidden; white-space: nowrap; }

.latesthot { float: left; width: 225px; border-top: 2px solid #B2C9D3; height: 280px; overflow: hidden; }
		.latesthot h3 {width: 225px; line-height: 26px; background:  url([img]http://www.zytx.info/templates/default/images/columnbg.gif[/img]) repeat-x bottom; margin: 1px 0 0; font-size: 1em; height: 20px; }
			.latesthot h3 strong { background:  url([img]http://www.zytx.info/templates/default/images/columnbg.gif[/img]) repeat-x bottom; border-right: 1px solid #B2C9D3;border-left: 1px solid #E3E3E3; float: left; padding: 0 10px; max-width: 180px; height: 26px;text-align:center bottom; overflow: hidden; }
				.latesthot h3 strong a { color: #633; font-size:15px; text-decoration:none}
			.latesthot .msgtitlelist { margin: 5px; height: 280px; font-size: 1em;border-bottom: 1px solid #E3E3E3;border-left: 1px solid #E3E3E3;border-right: 1px solid #E3E3E3;}

.bbshot { float: left; width: 225px; border-top: 2px solid #B2C9D3; height: 280px; overflow: hidden; }
		.bbshot h3 {width: 225px; line-height: 26px; background:  url([img]http://www.zytx.info/templates/default/images/columnbg.gif[/img]) repeat-x bottom; margin: 1px 0 0; font-size: 1em; height: 20px; }
			.bbshot h3 strong { background:  url([img]http://www.zytx.info/templates/default/images/columnbg.gif[/img]) repeat-x bottom; border-right: 1px solid #B2C9D3;border-left: 1px solid #E3E3E3; float: left; padding: 0 3px; max-width: 140px; height: 26px;text-align:center bottom; overflow: hidden; }
				.bbshot h3 strong a { color: #090; font-size:14px; text-decoration:none}
			.bbshot .msgtitlelist { margin: 5px; height: 280px; font-size: 1em;border-bottom: 1px solid #E3E3E3;border-left: 1px solid #E3E3E3;border-right: 1px solid #E3E3E3;}

a.more { float: right; height: 26px; line-height: 26px; color: #5086A5;  padding: 0; font-weight: normal; }
	
</style>

<DIV id=main_box>
<DIV class="blockcategorylist ">
<DIV class=bbshot>
<H3><STRONG><A href="javascript:setTab('hotarticle','day')">本周热点</A></STRONG> 
<STRONG><A href="javascript:setTab('hotarticle','week')">本月热点</A></STRONG> 
<STRONG><A class=tab  
href="javascript:setTab('hotarticle','all')">热帖排行</A></STRONG> </H3>
<DIV  style="OVERFLOW: hidden; HEIGHT: 320px">
<UL class=msgtitlelist></UL></DIV>
<DIV  
style="DISPLAY: none; OVERFLOW: hidden; HEIGHT: 320px">
<UL class=msgtitlelist></UL></DIV>
<DIV  
style="DISPLAY: none; OVERFLOW: hidden; HEIGHT: 230px">
<UL class=msgtitlelist>
  <LI><CITE><A href="http://localhost/?uid-2">zytx</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-2">会写字就会打字，不会打字的有福音了！</A> <SPAN 
  class=smalltxt title=共有0条回复>(0)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-2">zytx520</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-33">贵州省2008年省、市、县三级机关统一面向...</A> 
  <SPAN class=smalltxt title=共有3条回复>(3)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-1">admin</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-24">黔东南州2008国家公务员招考职位一览表提...</A> 
  <SPAN class=smalltxt title=共有0条回复>(0)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-8">zytx520</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-21">2008年 黔东南招考公务员305人</A> <SPAN 
  class=smalltxt title=共有0条回复>(0)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-2">zytx520</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-30">论文代理发表　</A> <SPAN 
  class=smalltxt title=共有0条回复>(0)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-1">admin</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-17">国外怎样看待中国四川地震的</A> <SPAN 
  class=smalltxt title=共有1条回复>(1)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-8">zytx520</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-23">急招会计1名</A> <SPAN 
  class=smalltxt title=共有0条回复>(0)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-1">admin</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-14">测试下载组织部干部信息采集</A> <SPAN 
  class=smalltxt title=共有2条回复>(2)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-14">诚信天下镇远</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-18">共建旅游和谐 快乐人生</A> <SPAN 
  class=smalltxt title=共有0条回复>(0)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-13">天字一号</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-32">我知道的镇远名人</A> <SPAN 
  class=smalltxt title=共有2条回复>(2)</SPAN> </LI></UL></DIV></DIV>
<DIV class=latesthot>
<H3><A class=more href="http://localhost/?action-forumdisplay-fid-16"><IMG 
src="http://www.zytx.info/templates/default/images/newsmore.gif" border=0></A> 
<STRONG><A href="http://localhost/?action-forumdisplay-fid-16">出售信息</A></STRONG> 
</H3>
<UL class=msgtitlelist>
  <LI style="WIDTH: 299px"><A 
  href="http://localhost/?action-viewthread-tid-30">论文代理发表　</A><CITE>05-26 
  </CITE></LI>
  <LI style="WIDTH: 299px"><A 
  href="http://localhost/?action-viewthread-tid-2">会写字就会打字，不会打字的有福音了！</A><CITE>05-21 
  </CITE></LI></UL></DIV>
<DIV class=latesthot>
<H3><A class=more href="http://localhost/?action-forumdisplay-fid-17"><IMG 
src="http://www.zytx.info/templates/default/images/newsmore.gif" border=0></A> 
<STRONG><A href="http://localhost/?action-forumdisplay-fid-17">求购信息</A></STRONG> 
</H3>
<UL class=msgtitlelist></UL></DIV>
<DIV class=latesthot>
<H3><A class=more href="http://localhost/?action-forumdisplay-fid-17"><IMG 
src="http://www.zytx.info/templates/default/images/newsmore.gif" border=0></A> 
<STRONG><A href="http://localhost/?action-forumdisplay-fid-17">求购信息</A></STRONG> 
</H3>
<UL class=msgtitlelist></UL></DIV></DIV>
</DIV></BODY></HTML>

提示：您可以先修改部分代码再运行

[ 本帖最后由 zyfpb 于 2008-7-7 22:37 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

西部数码顶级域名注册商39元抢注！

使用道具举报

mental　

小鱼的理想

银牌会员 

帖子: 568
体力: 2304
威望: 1
居住地: 山东省济宁市

发表于 2008-7-7 22:14:40 |显示全部楼层

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

/*综合设置-------------------------------------------------------------------------------------------综合设置*/

* { word-break: break-all; } /*在IE中实行强制换行*/
body { margin: 0 auto; padding: 0; color: #000; text-align: center; font: 12px Arial, Helvetica, sans-serif; }

#wrap { margin: 0 auto; text-align: left; width: 900px; padding: 0 4px; width: 900px; }

/*链接样式*/
a {font-family: "宋体", Arial;font-size: 12px;color: #124ABB;text-decoration: underline;line-height: normal;
}
a:hover {font-family: "宋体", Arial;font-size: 12px;color: #FF0000;text-decoration: underline;
}
a img { border: none; }

/*文章列表中的作者、日期*/
li cite { font-style: normal; font-size: 12px; float: right; width: 4em; color: #999; }
       li cite a { color: #999; font-size: 12px !important; }
              li cite a:visited { color: #999; }

/*选项卡*/
h3.tabs { background-color: #E8F7FC !important; height: 26px; padding-left: 0 !important; }
       h3.tab { font-weight: normal; float: left; padding: 0 10px; cursor: pointer; border-right: 1px solid #C1D8E0; }
              h3.curtab { background: #FFF; border-right-color: #B2C9D3; font-weight: bold; }

/*主体框架风格*/
#content{ width: 900px;height:1%;padding:5px;5px}
       #content ul {  margin: 0 ; padding: 0; width: 100%; overflow: hidden; }
       #content li {  margin: 3px 0 0 0;padding: 5px 15px; text-align: left; width: 100%; overflow: hidden; white-space: nowrap; }

#main_box{  /*正文区大容器*/
  width:900px;height:1%;background:#ffffff;}

.main_row{  /*定义每行*/
  width:100%;clear:both;
}

/*单行信息列表*/
.msgtitlelist { margin: 0; padding: 0; list-style: none; line-height: 1.8em;width:298px }
     .msgtitlelist ul { list-style: none; margin: 0 1em; padding: 0; width: 100%; overflow: hidden;  }
       .msgtitlelist li { height: 1.2em; overflow: hidden; padding-left: 0.8em; background: url() no-repeat 3px 1em; }
       /*最新资讯列表*/
   
       .block .msgtitlelist { padding: 3px 5px; }

.blockcategorylist {width:900px; border: 1px solid #B2C9D3; border-top: none; margin-bottom: 6px; overflow: hidden;  }

/*\*/ * html .blockcategorylist { height: 1%; } /**/
       .blockcategory { float: left; width: 300px; border-top: 2px solid #B2C9D3; height: 280px; overflow: hidden; }
              .blockcategory h3 {width: 300px; line-height: 26px; background:  url() repeat-x bottom; margin: 1px 0 0; font-size: 1em; height: 20px; }
                     .blockcategory h3 strong { background:  url() repeat-x bottom; border-right: 1px solid #B2C9D3;border-left: 1px solid #E3E3E3; float: left; padding: 0 10px; max-width: 180px; height: 26px;text-align:center bottom; overflow: hidden; }
                            .blockcategory h3 strong a { color: #633; font-size:15px; text-decoration:none}
                     .blockcategory .msgtitlelist { margin: 0 0 0 10px; padding: 0 0 0 20px; height: 280px; font-size: 1em;border-bottom: 1px solid #E3E3E3;border-left: 1px solid #E3E3E3;border-right: 1px solid #E3E3E3;}
               .blockcategory .msgtitlelist ul { list-style: none; margin: 0 3em; padding: 0 0 0 20px;  width: 100%; overflow: hidden;  }
                  .blockcategory .msgtitlelist li { float: left;  width: 100%; padding: 0 0 0 20px; overflow: hidden; white-space: nowrap; }

.latesthot { float: left; width: 225px; border-top: 2px solid #B2C9D3; height: 280px; overflow: hidden; }
              .latesthot h3 {width: 225px; line-height: 26px; background:  url() repeat-x bottom; margin: 1px 0 0; font-size: 1em; height: 20px; }
                     .latesthot h3 strong { background:  url() repeat-x bottom; border-right: 1px solid #B2C9D3;border-left: 1px solid #E3E3E3; float: left; padding: 0 10px; max-width: 180px; height: 26px;text-align:center bottom; overflow: hidden; }
                            .latesthot h3 strong a { color: #633; font-size:15px; text-decoration:none}
                     .latesthot .msgtitlelist { margin: 5px; height: 280px; font-size: 1em;border-bottom: 1px solid #E3E3E3;border-left: 1px solid #E3E3E3;border-right: 1px solid #E3E3E3;}

.bbshot { float: left; width: 225px; border-top: 2px solid #B2C9D3; height: 280px; overflow: hidden; }
              .bbshot h3 {width: 225px; line-height: 26px; background:  url() repeat-x bottom; margin: 1px 0 0; font-size: 1em; height: 20px; }
                     .bbshot h3 strong { background:  url() repeat-x bottom; border-right: 1px solid #B2C9D3;border-left: 1px solid #E3E3E3; float: left; padding: 0 3px; max-width: 140px; height: 26px;text-align:center bottom; overflow: hidden; }
                            .bbshot h3 strong a { color: #090; font-size:14px; text-decoration:none}
                     .bbshot .msgtitlelist { margin: 5px; height: 280px; font-size: 1em;border-bottom: 1px solid #E3E3E3;border-left: 1px solid #E3E3E3;border-right: 1px solid #E3E3E3;}

a.more { float: right; height: 26px; line-height: 26px; color: #5086A5;  padding: 0; font-weight: normal; }
       
</style>

<DIV id=main_box>
<DIV class="blockcategorylist ">
<DIV class=bbshot>
<H3><STRONG><A href="javascript:setTab('hotarticle','day')">本周热点</A></STRONG> 
<STRONG><A href="javascript:setTab('hotarticle','week')">本月热点</A></STRONG> 
<STRONG><A class=tab  
href="javascript:setTab('hotarticle','all')">热帖排行</A></STRONG> </H3>
<DIV  style="OVERFLOW: hidden; HEIGHT: 320px">
<UL class=msgtitlelist></UL></DIV>
<DIV  
style="DISPLAY: none; OVERFLOW: hidden; HEIGHT: 320px">
<UL class=msgtitlelist></UL></DIV>
<DIV  
style="DISPLAY: none; OVERFLOW: hidden; HEIGHT: 230px">
<UL class=msgtitlelist>
  <LI><CITE><A href="http://localhost/?uid-2">zytx</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-2">会写字就会打字，不会打字的有福音了！</A> <SPAN 
  class=smalltxt title=共有0条回复>(0)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-2">zytx520</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-33">贵州省2008年省、市、县三级机关统一面向...</A> 
  <SPAN class=smalltxt title=共有3条回复>(3)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-1">admin</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-24">黔东南州2008国家公务员招考职位一览表提...</A> 
  <SPAN class=smalltxt title=共有0条回复>(0)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-8">zytx520</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-21">2008年 黔东南招考公务员305人</A> <SPAN 
  class=smalltxt title=共有0条回复>(0)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-2">zytx520</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-30">论文代理发表　</A> <SPAN 
  class=smalltxt title=共有0条回复>(0)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-1">admin</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-17">国外怎样看待中国四川地震的</A> <SPAN 
  class=smalltxt title=共有1条回复>(1)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-8">zytx520</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-23">急招会计1名</A> <SPAN 
  class=smalltxt title=共有0条回复>(0)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-1">admin</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-14">测试下载组织部干部信息采集</A> <SPAN 
  class=smalltxt title=共有2条回复>(2)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-14">诚信天下镇远</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-18">共建旅游和谐 快乐人生</A> <SPAN 
  class=smalltxt title=共有0条回复>(0)</SPAN> </LI>
  <LI><CITE><A href="http://localhost/?uid-13">天字一号</A> </CITE><A 
  href="http://localhost/?action-viewthread-tid-32">我知道的镇远名人</A> <SPAN 
  class=smalltxt title=共有2条回复>(2)</SPAN> </LI></UL></DIV></DIV>
<DIV class=latesthot>
<H3><A class=more href="http://localhost/?action-forumdisplay-fid-16"><IMG 
src="论坛 - 镇远天下--镇远人的网络家园 - Powered by SupeSite.files/newsmore.gif" border=0></A> 
<STRONG><A href="http://localhost/?action-forumdisplay-fid-16">出售信息</A></STRONG> 
</H3>
<UL class=msgtitlelist>
  <LI style="WIDTH: 299px"><A 
  href="http://localhost/?action-viewthread-tid-30">论文代理发表　</A><CITE>05-26 
  </CITE></LI>
  <LI style="WIDTH: 299px"><A 
  href="http://localhost/?action-viewthread-tid-2">会写字就会打字，不会打字的有福音了！</A><CITE>05-21 
  </CITE></LI></UL></DIV>
<DIV class=latesthot>
<H3><A class=more href="http://localhost/?action-forumdisplay-fid-17"><IMG 
src="论坛 - 镇远天下--镇远人的网络家园 - Powered by SupeSite.files/newsmore.gif" border=0></A> 
<STRONG><A href="http://localhost/?action-forumdisplay-fid-17">求购信息</A></STRONG> 
</H3>
<UL class=msgtitlelist></UL></DIV>
<DIV class=latesthot>
<H3><A class=more href="http://localhost/?action-forumdisplay-fid-17"><IMG 
src="论坛 - 镇远天下--镇远人的网络家园 - Powered by SupeSite.files/newsmore.gif" border=0></A> 
<STRONG><A href="http://localhost/?action-forumdisplay-fid-17">求购信息</A></STRONG> 
</H3>
<UL class=msgtitlelist></UL></DIV></DIV>
</DIV></BODY></HTML>

提示：您可以先修改部分代码再运行

这样比较容易看吧

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

mental　

小鱼的理想

银牌会员 

帖子: 568
体力: 2304
威望: 1
居住地: 山东省济宁市

发表于 2008-7-7 22:19:18 |显示全部楼层