高分求一简单页面布局(用CSS实现)!

我有一页面如下链接,是用表格实现的。我想改为css布局(赶潮流嘛)
http://www.freepgs.com/21ee/static_html/1/0505/304.html
就是典型的三行二列居中高度自适应布局(要求中间右边的列具有固定宽度160px,右边的列随浏览器的宽度改变,其实就是为了在1200与800象素都能满页显示。).要求至少在IE与FIREFOX下显示正常。
找到了个例子。
http://www.w3cn.org/article/layout/2004/3h2l.html(不满足原因是中间的两列都是宽度固定)

谢谢。

这样:

 1<html xmlns="http://www.w3.org/1999/xhtml">
 2<head>
 3<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
 4<meta content="GB2312" http-equiv="Content-Language"/>
 5<meta content="DSclub,兀儿-干部" name="author"/>
 6<meta content="任兀" name="Copyright"/>
 7<meta content="代码" name="keywords"/>
 8<title>XHML1.0 DOC</title>
 9<style id="internalStyle" type="text/css">   
10body{margin: 0; padding: 0;}   
11p{display:block;font: bold 12px serif; color: #339;}   
12#header{height: 64px; background: #F00; color: #FFF; font: bold 24px "Impact",serif;line-height:160%; text-indent: 36px;}   
13#maincontent{margin-top:20px;}   
14#right{float: right; width: 160px; background: #DEF;}   
15#left{margin-right: 180px; background: #CFC; color: #999; }   
16#left h1{text-decoration: underline;font: italic bold 16px serif;}   
17#footer{clear: both; min-height: 80px; background: #EEE; text-align: center; font: italic bold 20px "Impact",sans-serif; color: #999;margin-top:20px;}   
18</style>
19</head>
20<body>
21<div id="header">Head Info</div>
22<div id="maincontent">
23<div id="right">
24<p>Right Info</p>
25<p>#right{</p><p>float: right; </p><p>margin: 20px; </p><p>width: 160px; </p><p>background: #DEF;</p><p>}</p>
26</div>
27<div id="left">
28<h1>Style:</h1>
29<p>#left{</p>
30<p>margin-right: 180px;</p>
31<p>background: #CFC;</p>
32<p>color: #999;</p>
33<p>}</p>
34<h1>Main Content! Main Content! Main Content! Main Content! Main Content! Main Content! Main Content! </h1>
35<h1>Main Content! Main Content! Main Content! Main Content! Main Content! Main Content!</h1>
36<h1>Main Content! Main Content! Main Content! Main Content! Main Content! </h1>
37<h1>Main Content! Main Content! Main Content! Main Content!</h1>
38<h1>Main Content! Main Content! Main Content!</h1>
39<h1>Main Content! Main Content!</h1>
40<h1>Main Content!</h1>
41</div>
42</div>
43<div id="footer">Powered By DSclub</div>
44</body>
45</html>

---------------------------------------------------------------

之所以选择CSS+DIV来实现布局,是为什么呢?
答案在http://www.onestab.net/seybold/everything.html已经很明确了。

直接看到效益就是带宽资源的节省和让浏览者更快的得到网站的信息。

如果既然决定了使用CSS+DIV布局为什么还要使用Table呢?

当然,事无绝对,我们不赞成使用Table布局但是不能100%将Table打死,毕竟在一些报表处理上和数据显示上Table还是很有用武之地的。上面的文章也有提到表格比div优秀的地方。如何抉择,这是一个经验积累的过程!

楼主说很难用DIV实现,其实我想说:没有难不难只有能不能!
W3C经历了css1.0~css3.0的制定,并且还在引领这个地球的转动。
它的目的应该不是让开发者越来越难过吧?

没有什么复不复杂的,看看ESPN,那么大的规模照样CSS Layout!多牛!

我这两天刚刚写了一个CSS布局的页面,大家可以拿去看看!

http://csscn.hy00.com

最后要说的是,开发不是给自己找麻烦,如果一个CSS你写不出或是不能在大多数浏览器上保持一样的身段,那么就换个布局方案来试试!

Published At
Categories with Web编程
Tagged with
comments powered by Disqus