对网站重构，css设计，抛弃表格后的疑惑？

梦aiq逍遥 · 发表于 2009-5-17 04:06:21

对网站重构，css设计，抛弃表格后的疑惑？
以前是采用DW、FP、FW来制作网页，在最初只是用FP、DW,排版上很简单，再后来学会了FW配合DW，在学会FW后，曾经为网站页面切图和编辑工具的完美结合，高兴过很长一段时间，那个时候为<Table>的强大排版效果所吸引，为此也曾经学习了<Table>的拆分、嵌套等复杂的图文排版。
但是现在用CSS来做页面之后，关键就是完全抛弃<Table>，这让我很不习惯，也很迷茫，看到一个效果，曾经用<Table>很容易就可以实现，但是现在却变得较麻烦，我想阿捷做为标准推广的代表，也希望大家更快的接受这种设计方式。为了让大家更快的接受这种新的设计方式，版主有必要对大家的疑惑或难点，做出针对性的解决。
目前我最困惑的就是抛弃表格后的排版如何进行，如果有相关大教程，希望版主能够置顶。

我贴几个图出来，我想这样更利于问题的解决。
问题：类似图一的表格页面如何用Css实现呢？

访问http://www.macromedia.com，在首页的下面一点，有这样的页面。
“Solutions”栏目，显示效果如下：

另存为"macromedia首页"，DW、FP编辑后显示效果如下:

代码如下，但显示还是不和图一一样：(其对应的css，我也从Macromedia网站的css文件中找出来了，可是还是显示不对)

<br />
<html><br />
<head><br />
<style type="text/css"><br />
.columns-2-AB-A {<br />
      FLOAT: left; MARGIN-BOTTOM: 0.5em; WIDTH: 122px<br />
}<br />
.columns-2-AB-B {<br />
      FLOAT: right; MARGIN-BOTTOM: 0.5em; WIDTH: 122px<br />
}<br />
.rule-marker {<br />
      PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 5px; MARGIN: 10px 0px 0px; PADDING-TOP: 0px<br />
}<br />
.pod {<br />
      PADDING-RIGHT: 9px; PADDING-LEFT: 9px; PADDING-BOTTOM: 0px; MARGIN: 0px 1px; PADDING-TOP: 0px; BACKGROUND-COLOR: #fff<br />
}<br />
</style><br />
</head><br />
<body><br />
<DIV class=pod id=solutions-section><br />
<br />
<H3><A href="http://www.macromedia.com/solutions/?promoid=home_sol_082403">Solutions </A></H3><br />
<DIV class=columns-2-AB-A><br />
<UL class=rule-marker><br />
  <LI><A href="http://www.macromedia.com/resources/business/?promoid=home_sol_biz_082403">Business</A> <br />
  <LI><A href="http://www.macromedia.com/resources/government/?promoid=home_sol_gov_082403">Government</A> <br />
  <LI><A href="http://www.macromedia.com/resources/education/k12/?promoid=home_sol_edu_010904">K-12 Education</A> <br />
  <LI><A href="http://www.macromedia.com/resources/education/hed/?promoid=home_sol_edu_010904">Higher Education</A> <br />
  <LI><A href="http://www.macromedia.com/resources/student/?promoid=home_sol_stu_082403">Students</A> <br />
  </LI><br />
</UL><br />
</DIV><br />
<br />
<DIV class=columns-2-AB-B><br />
<UL class=rule-marker><br />
  <LI><A href="http://www.macromedia.com/resources/business/rich_internet_apps/?promoid=home_sol_ria_082403">Rich  Internet Apps</A> <br />
  <LI><A href="http://www.macromedia.com/resources/elearning/?promoid=home_sol_learn_082403">eLearning</A> <br />
<br />
  <LI><A href="http://www.macromedia.com/software/flash/flash_ad_kit/?promoid=home_sol_rma_020904">Rich  Media Ads</A> <br />
  <LI><A href="http://www.macromedia.com/macromedia/accessibility/?promoid=home_sol_acc_082403">Accessibility</A> <br />
  <LI><A href="http://spectra15.macromedia.com/index_top.cfm?">Partners</A> <br />
</LI><br />

</UL><br />
</DIV><br />
<BR class=clear-both><br />
<br />
</DIV><br />
<br />
</body><br />
</html><br />

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

朗月星空 · 发表于 2010-1-15 17:05:03

看了楼主的帖子,不由得精神为之一振,自觉七经八脉为之一畅,七窍倒也开了六窍半

		自动登录	找回密码
密码			注册

对网站重构，css设计，抛弃表格后的疑惑？

浏览过的版块