CSS教程之剧本把持DIV三行三列结构自顺应高度
我们需要重新进行页面布局，比如对背景图片的定义，只用针对每一个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为我们提供的标签。 Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 学Dreamweaver技术的过程其实是一个增加信心的过程。 学Dreamweaver技术的过程其实是一个增加信心的过程。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。
页:
[1]