CSS教程之剧本把持DIV三行三列结构自顺应高度

显示全部楼层 · 发表于 2015-1-16 10:40:19

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

我们需要重新进行页面布局，比如对背景图片的定义，只用针对每一个Div元素重新定义其具体位置、样式就行了。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmllang="en"xml:lang="en"xmlns="http://www.w3.org/1999/xhtml"><head><title>剧本把持三行三列自顺应高度DIV结构</title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><scripttype="text/javascript">/*------------------------------------------------PVIIEqualCSSColumnsscriptsCopyright(c)2005ProjectSevenDevelopmentwww.projectseven.comVersion:1.5.0------------------------------------------------*/functionP7_colH(){//v1.5byPVII-www.projectseven.comvari,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;if(dA&&dA.length){for(i=0;i<dA.length;i++){dA.style.height=auto;}for(i=0;i<dA.length;i++){oh=dA.offsetHeight;h=(oh>h)?oh:h;}for(i=0;i<dA.length;i++){if(an){dA.style.height=h+px;}else{P7_eqA(dA.id,dA.offsetHeight,h);}}if(an){for(i=0;i<dA.length;i++){hh=dA.offsetHeight;if(hh>h){dA.style.height=(h-(hh-h))+px;}}}else{document.p7eqa=1;}document.p7eqth=document.body.offsetHeight;document.p7eqtw=document.body.offsetWidth;}}functionP7_eqT(){//v1.5byPVII-www.projectseven.comif(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){P7_colH();}}functionP7_equalCols(){//v1.5byPVII-www.projectseven.comif(document.getElementById){document.p7eqc=newArray;for(i=0;i<arguments.length;i++){document.p7eqc=document.getElementById(arguments);}setInterval("P7_eqT()",10);}}functionP7_eqA(el,h,ht){//v1.5byPVII-www.projectseven.comvarsp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);ch=(ch)?ch:h;varad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+px;oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+px;}if(nh<adT){setTimeout("P7_eqA("+el+","+nh+","+ht+")",sp);}}</script><styletype="text/css">body{PADDING-RIGHT:0px;PADDING-LEFT:0px;FONT-SIZE:75%;PADDING-BOTTOM:0px;MARGIN:5px;LINE-HEIGHT:100%;PADDING-TOP:0px;FONT-FAMILY:Verdana,Geneva,Arial,Helvetica,sans-serif}#header{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0pxauto;WIDTH:760px;PADDING-TOP:0px}#mid{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0pxauto;WIDTH:760px;PADDING-TOP:0px}#footer{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0pxauto;WIDTH:760px;PADDING-TOP:0px}#header{BACKGROUND:#f4f4f4;MARGIN-BOTTOM:5px;HEIGHT:60px}h3{MARGIN:0px;COLOR:#708090;PADDING-TOP:25px;TEXT-ALIGN:center}h5{MARGIN:0px;COLOR:#708090;PADDING-TOP:25px;TEXT-ALIGN:center}#fbox{BACKGROUND:#f1f1f1;FLOAT:left;WIDTH:195px}#mbox{PADDING-RIGHT:0px;PADDING-LEFT:0px;BACKGROUND:#dff7ff;FLOAT:left;PADDING-BOTTOM:0px;MARGIN:0px5px;WIDTH:360px;PADDING-TOP:0px}#sbox{BACKGROUND:#ffebcc;FLOAT:right;WIDTH:195px}p{PADDING-RIGHT:10px;PADDING-LEFT:10px;PADDING-BOTTOM:10px;MARGIN:0px;TEXT-INDENT:2em;LINE-HEIGHT:130%;PADDING-TOP:10px}#footer{CLEAR:both;BORDER-TOP:#ffffff5pxsolid;BACKGROUND:#cddbed;HEIGHT:60px;TEXT-ALIGN:center}</style><metacontent="MSHTML6.00.2800.1515"name="GENERATOR"/></head><bodyonload="P7_equalCols(fbox,mbox,sbox)"><divid="header"><h3>剧本把持三行三列自顺应高度DIV结构</h3></div><divid="mid"><divid="fbox"><p>亲和力指的其实不只是关于瞽者和屏幕浏览器。另有很多人固然不是瞽者，可是有目力停滞-你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最复杂的办法就是同意用户改动笔墨巨细；回绝供应如许的选择就褫夺了用户的主导权，极可能利用户没法温馨地浏览。</p><p>亲和力指的其实不只是关于瞽者和屏幕浏览器。另有很多人固然不是瞽者，可是有目力停滞-你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最复杂的办法就是同意用户改动笔墨巨细；回绝供应如许的选择就褫夺了用户的主导权，极可能利用户没法温馨地浏览。</p></div><divid="mbox"><p>亲和力指的其实不只是关于瞽者和屏幕浏览器。另有很多人固然不是瞽者，可是有目力停滞-你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最复杂的办法就是同意用户改动笔墨巨细；回绝供应如许的选择就褫夺了用户的主导权，极可能利用户没法温馨地浏览。</p><p>假如计划者利用像素为单元指定笔墨巨细，年夜多半的用户将没法缩放笔墨，由于InternetExplorer改动笔墨巨细的体例与其余扫瞄器分歧。Mozilla和Opera能够缩放已设定像素巨细的笔墨，而Windows下的IE却不克不及。</p><p>亲和力指的其实不只是关于瞽者和屏幕浏览器。另有很多人固然不是瞽者，可是有目力停滞-你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最复杂的办法就是同意用户改动笔墨巨细；回绝供应如许的选择就褫夺了用户的主导权，极可能利用户没法温馨地浏览。</p><p>假如计划者利用像素为单元指定笔墨巨细，年夜多半的用户将没法缩放笔墨，由于InternetExplorer改动笔墨巨细的体例与其余扫瞄器分歧。Mozilla和Opera能够缩放已设定像素巨细的笔墨，而Windows下的IE却不克不及。</p></div><divid="sbox"><p>亲和力指的其实不只是关于瞽者和屏幕浏览器。另有很多人固然不是瞽者，可是有目力停滞-你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最复杂的办法就是同意用户改动笔墨巨细；回绝供应如许的选择就褫夺了用户的主导权，极可能利用户没法温馨地浏览。</p></div></div><divid="footer"><h5>仅供演示WWW.AA25.CN</h5></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
我们应当活用HTML为我们提供的标签。

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

[DIV+CSS] CSS教程之剧本把持DIV三行三列结构自顺应高度

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子