谁帮我把这个页面用div+css写出来，在手机平台用的，所以要自适应的，求大神帮忙啊

用css3的分栏属性好做，可惜所谓的更标准几个浏览器FF、OP、CF、SF对这个属性目前还支持得不太一样，兼容性差。

不用css3很烦人的就是黄色那个div和绿色的div上下距离必须要用js实时计算出来。

ie6-8没测试，我认为没这个必要，这个界面理论上的最终用户应该都是手机、平板，这些设备上不存在ie6-8的问题。

如果你在浏览器下看，拉动窗口大小时，黄、绿div之间的上下边距是不变的，要刷新才会跟着窗口宽度而相应的变大或小，就是说手机用户进去了再旋转屏幕方向的话，那个距离的值就会出错，需要刷新一下才会重新计算出正确的值。我再不去睡觉明天爬不起来了，所以没给你写这段重新计算值的js，你可以自己改些代码上去一直监听浏览器尺寸变化，一旦变化了就重算出这个值赋值给那个div。

<!doctype?html>

<html?lang="zh-cn">

<head>

<title>Test?WinPhone?Style</title>

</head>

<body>

<div?id="wrapper">

<div?id="a">1</div>

<div?id="b-c">

<div?id="b">2</div>

<div?id="c">3</div>

</div>

<div?id="d">4</div>

<div?id="e">5</div>

</div>

</body>

</html>

<style>

html,?body,?div,?span,?object,?iframe,

a,?h1,?h2,?h3,?h4,?h5,?h6,

p,?blockquote,?pre,?abbr,?address,?cite,

code,?del,?dfn,?em,?img,?ins,?kbd,?q,

samp,?small,?strong,?sub,?sup,?var,?b,?i,

dl,?dt,?dd,?ol,?ul,?li,?fieldset,?form,

label,?legend,?table,?caption,?figcaption,

tbody,?tfoot,?thead,?tr,?th,?td,?article,

aside,?figure,?footer,?header,?hgroup,

menu,?nav,?section,?time,?mark,?audio,

video,?details,?summary,dialog?{

margin:?0;

padding:?0;

border:?0;

font-size:?100%;

vertical-align:?baseline;

background:?transparent;

}

.c{outline:red?dotted?1px;}

#wrapper?{

width:?96%;

margin:?0?auto;

padding:?2%;

text-align:?left;

}

#a{

width:?100%;

height:?110px;

background:?#FF5353;

margin:?0?0?2%?0;

}

#b-c{

width:?49%;

margin:?0?2%?2%?0;

float:?left;

background:?#94C62F;

}

#b{

width:?100%;

height:?160px;

background:?#FAB414;

border-bottom:?1px?#fff?solid;

}

#c{

width:?100%;

height:?80px;

background:?#94C62F;

}

#d{

width:?49%;

height:?auto;

background:?#17C38B;

float:?right;

margin-bottom:?-2%;?

}

#e{

width:?100%;

height:?110px;

background:?#1C98EE;

clear:?both;

}

</style>

function?addLoadEvent(func)?{?

var?oldonload?=?window.onload;?

if?(typeof?window.onload?!=?"function")?{

window.onload?=?func;

}

else?{?

window.onload?=?function()?{?

if?(oldonload)?{

oldonload();

}

func();

}

addLoadEvent(SameH("b-c","d"));

addLoadEvent(autoBR);

//让#b-c和#d的高度一样

function?SameH(leftDiv,rightDiv)?{

var?a?=?document.getElementById(leftDiv);

var?b?=?document.getElementById(rightDiv);

if(a.scrollHeight?<?b.scrollHeight){a.style.height=b.scrollHeight+"px";}

else{b.style.height=a.scrollHeight+"px";}

}

//根据页面宽度计算出#b的边框值

function?autoBR()?{

var?autoBR?=?document.getElementById("b");

var?W?=?document.getElementById("a").offsetLeft;//document.getElementById(wp).offsetWidth-b.offsetWidth*2;

alert?(autoBR.offsetHeight-?W);

autoBR.style.borderBottomWidth?=?W?+?"px";

autoBR.style.height?=?autoBR.scrollHeight?-?W?+?1?+?"px";

}

</script>