打印

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

zyfpb [楼主]

高级会员

帖子: 272
体力: 810
威望: 0
当前: 贵州黔东南
离线: 6 天

1^# 大中小发表于 2008-7-7 22:08

正在将一个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">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>论坛</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gbk">
<style>
/*
(C) 2001-2006 镇远天下.
[url]http://www.zytx.info[/url]
*/
/*综合设置-------------------------------------------------------------------------------------------综合设置*/
* { 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>
<META content="MSHTML 6.00.2900.3354" name=GENERATOR></HEAD>
<BODY>
<DIV id=wrap>

<DIV id=content>
<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 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

西部数码VPS主机1G内存仅266元

mental

小鱼的理想

高级会员

认证
帖子: 462
体力: 805
威望: 1
当前: 山东威海
离线: 15 天

专长 PHP

2^# 大中小发表于 2008-7-7 22:14

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>论坛</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gbk">
<style>
/*
(C) 2001-2006 镇远天下.
http://www.zytx.info
*/
/*综合设置-------------------------------------------------------------------------------------------综合设置*/
* { 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>
<META content="MSHTML 6.00.2900.3354" name=GENERATOR></HEAD>
<BODY>
<DIV id=wrap>

<DIV id=content>
<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>

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

这样比较容易看吧

好吃分一半

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

mental

小鱼的理想

高级会员

认证
帖子: 462
体力: 805
威望: 1
当前: 山东威海
离线: 15 天

专长 PHP

3^# 大中小发表于 2008-7-7 22:19

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>论坛</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gbk">
<style>
/*
(C) 2001-2006 镇远天下.
http://www.zytx.info
*/
/*综合设置-------------------------------------------------------------------------------------------综合设置*/
* { 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>
<META content="MSHTML 6.00.2900.3354" name=GENERATOR></HEAD>
<BODY>
<DIV id=wrap>

<DIV id=content>
<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>

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

这样比较容易看吧

好吃分一半

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

zyfpb [楼主]

高级会员

帖子: 272
体力: 810
威望: 0
当前: 贵州黔东南
离线: 6 天

4^# 大中小发表于 2008-7-7 22:40

谢谢你,已经修改成运行代码框了
盼高手帮忙

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

zyfpb [楼主]

高级会员

帖子: 272
体力: 810
威望: 0
当前: 贵州黔东南
离线: 6 天

5^# 大中小发表于 2008-7-8 09:18

再顶,急盼高手帮忙指教

TOP

zyfpb [楼主]

高级会员

帖子: 272
体力: 810
威望: 0
当前: 贵州黔东南
离线: 6 天

6^# 大中小发表于 2008-7-8 20:35

怎么就没有人能帮忙说下呢

TOP

4511916

高级会员

帖子: 483
体力: 931
威望: 0
当前: 江苏南京
离线: 106 天

专长 网页设计,平面,策划

7^# 大中小发表于 2008-7-10 08:21

把四个内容的大框变小点

margin-right:1px;不就行了?

TOP

wyysf

中级会员

帖子: 193
体力: 380
威望: 0
当前: 安徽淮北
离线: 1 天

专长 Flash,前端制作

8^# 大中小发表于 2008-7-10 10:15

对啊7#说的很对只需要在加margin-right:?;
就可以实现了

TOP

zyfpb [楼主]

高级会员

帖子: 272
体力: 810
威望: 0
当前: 贵州黔东南
离线: 6 天

9^# 大中小发表于 2008-7-11 18:12

谢谢楼上的两位,你
们说的方法我试过了,不会用,不是你们的说的方法不行,只因为你们说得太简单,我CSS水平菜得很,不知道从哪个位置加代码
不过我现在找到了现存的代码,为方便和我一样的菜鸟,贴代码如下:
/*单行两列信息列表*/
.list2col { margin: 0; padding: 10px 0; list-style: none; line-height: 1.8em; background: url(../images/dotline_v.gif) repeat-y center; }
/*\*/ * html .list2col { height: 1%; } /**/ *>.list2col { overflow: hidden; }
.list2col li { height: 1.8em; overflow: hidden; background: url(../images/list_icon.gif) no-repeat 3px 7px; float: left; display: inline; margin: 0 5px; padding-left: 10px; width: 275px; }

[ 本帖最后由 zyfpb 于 2008-7-11 18:14 编辑 ]

TOP