仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1146|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 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为我们提供的标签。
因胸联盟 该用户已被删除
沙发
发表于 2015-1-18 07:46:46 | 只看该作者
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
金色的骷髅 该用户已被删除
板凳
发表于 2015-1-26 23:21:35 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
愤怒的大鸟 该用户已被删除
地板
发表于 2015-2-5 03:48:19 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
谁可相欹 该用户已被删除
5#
发表于 2015-2-11 04:33:45 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
变相怪杰 该用户已被删除
6#
发表于 2015-3-1 21:45:55 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
7#
发表于 2015-3-11 01:24:18 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
深爱那片海 该用户已被删除
8#
发表于 2015-3-17 18:09:21 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
再见西城 该用户已被删除
9#
发表于 2015-3-24 20:41:54 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 13:48

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表