谁帮我把这个页面用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>
<meta?charset="utf-8"?/>
<title>Test?WinPhone?Style</title>
<meta?name="viewport"?content="width=max-device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"?/>
</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>
<script>
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>