AS常用语句
AS常用语句
Webjx核心提示：本例继续讲解AS的基础知识，今天讲解的是AS入门第四课AS常用语句。
本例继续讲解AS的基础知识，今天讲解的是AS入门第四课AS常用语句。
上一课：Flash新手入门教程：
AS常用语句
一.运算符1. = 赋值运算符,它不是数学中的等于,而是将=号右边的值赋给左边的变量. 2. 使用于字符串的运算符: 比较:== 等于. 用于比较两个字符串是否相等,如果相等则返回"true",否则返回false. 如: a="abc"; b="abc"; c="bcd"; d=(a==b);//d为true f=(a==c);//f为false 〉大于 . 〉= 大于等于 〈 小于 〈= 小于等于 字符串的大小比较由小到大的顺序是:A一Z一a一z. +:连接运算: 如:a="abc"; b="def"; c=a+b;//c为:"abcdef" trace(c); 可以把上述代码复制到帧动作面板中,测试影片,试试. 又如:a="123"; b=456; c=a+b;//c为:"123456" trace(c); 而:a=123; b=456; c=a+b;//c为:579 trace(c); 上面两个代码出现了不同的结果,这是因为第一段代码a被赋的值是被引号括起来的,那么它就是字符串,在字符串中+号是连接符号,不是数学中的加号.第二段代码,a、b被赋的值都没引号,AS就将它看着数字,在数字类型中+号就是数学中的加号. += 这也是连接符号,这是将+=符号左边的字符串与右边的字符串连接,如: a="abc"; b="def"; a+=b;//这时a为abcdef
3.对数字使用运算符: +、-、*、/:这就是数学中的加减乘除. %:求模运算符,即求余数,如: a=7; b=2; c=a%b;//c为a除以b的余数1 +=、-=:分别是符号左边的数字加上或减去右边的数字,并将结果赋值给左边的变量.如: a=7; b=2; a+=b;//这时a为9 a-=b;//这时a为7 *=、/=:同理 ++、--:递增递减运算符,即+或减1.如: a=7; a++;//这时a为8 a--;//这时a为7 比效:==:等于 !=:不等于 〉:大于 〉=:大于等于 〈:小于 &=:小于等于
二、条件语句
if 语句：如果怎么样,就做些什么事.可以把if理解为如果. 格式: if(条件表达式){ 要执行的语句 } 例: a=7; b=2; if (a==b){ trace("是的"); } 这个条件语句的意思是,如果a等于b,那么就输出"是的".将上面代码写到帧动作面板中,测试影片,发现并没有输出面板弹出.因为上面的语句是a等于b时才执行 trace("是的");,事实上现在a不等于b而是大于b,那么trace("是的");就不会执行.把代码改一下: a=7; b=2; if (a〉b){ trace("是的"); } 测试影片,那就会看到输出窗口中的"是的".
格式: if(条件表达式){ 要执行的语句 } else { 要执行的语句 } 例: a=7; b=2; if(a〈=b){ trace("a比b小或一样大"); } else { trace("a比b大"); } 看看这个代码,如果a小于等于b那么就输出:"a比b小或一样大".否则,就输出:"a比b大".测试影片,我们可以看到:"a比b大". if…else if:这个语句可以测试多个条件.这样理解这个语句,如果怎样就干点什么,又如果怎样,又干点什么,再如果怎样…. 还是这个例子: a =7; b=2; if(a&b){ trace("a比b小"); } else if("a==b"){ trace("a和b一样大"); } else if(a〉b){ trace("a比b大"); } 这段代码意思是:如果a小于b那么输出:"a比b小";如果a等于b那么输出:"a和b一样大";如果a大于b那么输出:"a比b大".测试影片,输出是:"a比b大".
switch语句：上面提到有要检测多个条件的情况,可以用多个else if,用switch语句也可以实现这个目的. 格式: switch(表达式){ case 表达式的值: 要执行的语句
case 表达式的值: 要执行的语句
… default: 要执行的语句 } 上面括号中的表达式也可以是一个变量,下面的大括号中可以有多个 case 表达式的值:,程序执行时会从第一个case开始检查,如果第一个case后的值是括号中表达式的值,那么就执行它后面的语句,如果不是括号中表达式的值,那么,程序就跳到第二个case检查,以此类推,直到找到与括号中表达式的值相等的case语句为止,并执行该case后面的语句.你可能会注意到每一句case后面都有一句这是跳出switch语句的意思,即当找到相符的case,并执行相应的语句后,程序跳出switch语句,不再往下检测.以免发生落空的错误.可能会有这样的情况,所有的case语句后的值都与表达式的值不相符,那么就应该用default: 语句,这时程序就会执行default: 后的语句.如果你确定不会出现这种情况,那么可以不要default: 语句. 例1: a=7; b=2; c=a+b; switch(c){ case 5: trace("小了");
case 12: trace("大了");
case 9: trace("对了");
} 测试影片,输出句"对了". 例2. a=7; b=2; switch(a+b){ case 5: trace("小了");
case 12: trace("大了");
case 8: trace("还是小了");
default: trace("都没算对"); } 测试影片输出为:"都没算对".
逻辑运算符：逻辑运算符在运算符那一节没有介绍,是因为它多半用在条件语句中,所以我们在这一节介绍.在上面的条件表达式中,都是单一的条件,比如是否大于是否小于等,实际上我们经常都可能用到复合条件,比如大小多少并且小于多少,大于多少或者小于多少等.在这样的复合条件语句中,有两个词:并且、或者,它们的符号: && 并且 丨丨 或者 并且是指两个条件都成立时为真,或者是指只要有一个条件成立时为真. 例1: a=7; if((a〉5)&&(a&10)){ trace("正确"); } 测试影片,将输出"正确".因为a=7的确即大于5又小于10,条件为真. 例2: a=7; if((a〉5)&&(a〉10)){ trace("正确"); } 测试影片,没有输出.说明 trace("正确");这句没执行.因为a〉5成立,而a〉10不成立,两个条件只有一个为真,整个条件则为假. 例3. a=7; if((a〉5)||(a〉10)){ trace("正确"); } 这个例子用的是"||"或者语句,只要有一个条件为真,整个条件表达式为真,测试影片,将输出"正确".
练习：猜数游戏
下面我们来做一个练习,猜数游戏,将上一节运算符及本节条件语句进行综合应用.游戏是由程序产生一个0-100的随机数,然后由用户来猜,程序根据用户猜的数与所产生的随机数进行比较,根据比较结果,给用户提示,直到用户猜中为止,并记录用户所猜次数. 为完成这个练习,我们先介绍一个函数:random(),这个函数将产生一个由0到括号中的数减1的整数.如: a=random(50),那么a的值为0到49之间的一个整数.
现在来做这个练习:新建一flash文件,用文本工具在舞台的上半部居中画一个文本框,在里面输入:”请猜一个0-100之间的数字:”;打开属性面板,设置文本框为静态文本,设置好文本字体的大小和颜色.
在这个文本框的下边,再画一个文本框,打开属性面板,设置文本框为动态文本,在变量框中输入c,这样变量c就代表这个文本框的内容,我们就可以用c来读取和设置这个动态文本框的内容.动态文框是在运行时可以给文本设置值的文本框.关于文本框的的知识,在后面将有专门的课程介绍,这里了解这么多就行了.
在动态文本框的下面,再画一个文本框,打开属性面板,设置文本框为输入文本.将在文本框周围显示边框按钮点下.在变量框中输入s.输入文本框是在运行时,用户可以在其中输入内容人.
下面新建两个按钮,一个标签为”确定”,一个标签为”重猜”.按钮的做法请参阅第二课.将两个按钮放到舞台上,最下面.打开属性面板,”确定”按钮命名为”qd_btn”,”重猜”按钮”命名为”cc_btn”.
新建一层,命名为”action”用来写代码.点中第一帧,点右键,打开动作面板,开始写代码:
首先声明一个变量,用来存放0-100间的随机数,所以第一行代码为: var a = random(101); 然后声明一个变量,用来存放猜的次数,现在还没猜,所以给它赋值为0,第二行代码为: var cs:Number = 0; 下面使用条件语句,来比较用户输入的数的产生的随机数: qd_btn.onRelease = function(){ //当点击确定按钮时,执行下面的语句. cs++; //猜的次数增加1 if (s&a){ //如果猜的数大于随机数. c = "大了点"; //动态文本框提示”大了点”. } else if (s==a){ //如果猜对了,根据猜的次数给出相应结果. if(cs&=5){ //如果猜的次数在5次以内 c = "哇,你只猜了" + cs + "次就猜对了,真历害!"; //给出表扬,注意这里用到了,字符串的连接. } else { // 如果不只猜5次. c="猜对了!你猜了"+cs+"次"; //提示猜对了,并给出猜的次数. } } else if (s&a) { //如果猜的数字小于随机数 c="小了点";//提示”小了点” } } 最后,来写重猜的代码: cc_btn.onRelease = function () { //当点击重猜按钮时执行以下语句 a = random(101);//重新产生随机数 cs = 0;//将猜的次数设为0 s="";清空输入文本框 c="";清空提示文本 }
作业：制作猜数游戏
for循环：格式: for(初值;条件表达式;增值){ 要执行的语句 } 这个语句,首先给一个变量设定一个初始值,然后将这个初始值带入条件表达式,如果条件表达式为真,则执行大括号中的语句,并且按括号中增值表达式对变量的值进行增减;然后再次带入条件表达式,如果为真则再次执行大括号中的语句.…,这样直到条件表达式为假为止. 例:var a=0; for(var i=0;i〈10;i++){ a += } trace(a); 我们来看看最后输出的a是多少.程序开始时,a等于0,然后进入for循环,循环开始i等于0,条件表达式i&10成立,那么执行a+=i,此时a、 i均为0,那么a为0,然后执行增值i++,则i为1,再检测条件表达式i〈10仍成立,执行a+=i,则a为1;执行i++,i为2……,这样反复循环,直到i为10时,条件表达式i〈10不成立,停止循环.明显可以看出循环进行了10次,这时a是多少呢?测试影片时输出为45
for…in循环：这是遍历或者叫循环访问一个组对象中的成员.比如影片剪辑的子级、对象的属性、数组等.由于数组等在前面还没有介绍,因此我们将for…in循环放到下一课介绍数组时再祥细介绍
while循环:有点类似if语句,只要条件成立就执行相应语句. 格式: while(条件表达式){ 要执行的语句 计数语句 } 当条件表达式为真时,执行大括号中的语句,执行计数语句,然后用计数语句的结果再次检测条件表达式,如此反复循环.直到条件表达式为假为止.这里需要注意的是,如果没有计数语句,或者计数语句的结果永远不能使条件表达式为假,那么循环将水远无休止地反复,这就形成了一个死循环,我们在编程的过程中一定要避免这种情况. 例1:下面的代码是一个死循环,请不要测试. var a=0; while(a&10){ trace(a); } 看看这段代码,程序执行时a等于0,然后进入循环,条件表达式a〈10成立,执行trace(a),输出0,然后再检查条件表达式,因为没有计数语句,a没发生变化,条件表达式仍成立,于是又输出一个0,然后又反复,一直不停地输出0,无休无止,直到天荒地老. 例2:下面的代码是一个死循环,请不要测试. var a=0; while(a&10){ trace(a); a--; } 这一例加上了计数语句a--,但a的初始值为0,每一个循环它减1,这样条件表达式a&10也是永远为真,因此循环也是永不停息,直到地老天荒. 例3: var a=0; while(a&10){ trace(a); a++; } 这一例将计数语句改为a++,这样每一循环,a加1,当10个循环后,a为10,条件表达式a&10为假,循环停止.测试本例我们会在输出面板中看到: 0 1 2 … 9
do…while循环：这个循环实际和while循环是一样的,只是它先执行一次语句,然后再检测条件语句,而while循环是先检测条件语句再执行大括号内的语句. do…while循环的格式为: do{ 要执行的语句 计数语句 }while(条件表达式);
发表评论：
TA的最新馆藏[转]&[转]&[转]&CSS实现完美垂直居中 - 蓝色理想
您的位置：　 &
& CSS实现完美垂直居中
　CSS实现完美垂直居中
作者：　时间： 　文档类型：原创　来自：
之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少，不一定要拘泥于和 table 布局一样。不过最近有人问了几个例子，看来对此的需求还不少。现在就把我经验拿出来分享一下，希望大家鼓鼓掌。
首先，要有一个概念：凡是 table 布局可以实现的，CSS 一定可以实现。CSS 可以实现的，table 未必能做到。
现在来几个例子：
一、单行内容的居中只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了.middle-demo-1{height: 4line-height: 4overflow:}
优点：1. 同时支持块级和内联极元素2. 支持所有浏览器缺点：1. 只能显示一行2. IE中不支持&img&等的居中要注意的是：1. 使用相对高度定义你的 height 和 line-height2. 不想毁了你的布局的话，overflow: hidden 一定要为什么？请比较以下两个例子：&p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans- height:24 width:370"&Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&/p&
&p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans- height:2 width:370 overflow:"&Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&/p&
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。
二、多行内容居中，且容器高度可变也很简单，给出一致的 padding-bottom 和 padding-top 就行.middle-demo-2{padding-top: 24padding-bottom: 24}
优点：1. 同时支持块级和内联极元素2. 支持非文本内容3. 支持所有浏览器缺点：容器不能固定高度
三、把容器当作表格单元CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。.middle-demo-3{display: table-height: 300vertical-align:}
可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。要注意的是：和一个合法的&td&元素必须在&table&里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。
优点：不用说了吧，就是表格，效果和表格一模一样缺点：IE下无效
四、以毒攻毒！用 IE 的 bug 解决 IE 中的绝对居中先不得不说一句，IE 真的是个很烂的浏览器，CSS1中的定义都不支持，害得要我们转个大圈子来造居中。不过就像我说的，凡是 table 布局可以实现的，CSS 一定可以实现，即使在 IE 里也不例外。我研究 IE layout 模式多年，还是找出了一个可以在 IE 中绝对居中的方法。这个方法就是基于 IE layout 的 bug，也可以算以毒攻毒。至于原理，不要问我，这是独门秘学，何况三言两语也讲不清楚，只要好用就行.middle-demo-4{height: 300position:}.middle-demo-4 div{position:top: 50%;left: 0;}.middle-demo-4 div div{position:top: -50%;left: 0;}
五、整合三和四，写出支持所有浏览器的垂直居中容器！思路是利用 IE 和 非IE 浏览器的 CSS hack, 整合三和四的CSS，写出兼容主流浏览器的垂直居中容器。具体代码就不给出了，大家权当作练习练习。例子可以在下面的附录中找到。最终实测支持的浏览器：IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下需要加上对合适模型的补正。推测支持的浏览器：Mozilla 1.5+, Netscape Navigator 7+, Opera 7+未测试浏览器：Konqueror最后附上自己写的，所有居中布局的范例网页，大家不明白可以参考。&?xml version="1.0" encoding="utf-8"?&
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&Demo:: vertical align: middle&/title&
&meta lang="en" name="author" content="Spenser Lee" /&
&meta lang="en" name="copyright" content="(c)2006 Liberty Studio" /&
&style media="screen" type="text/css"&
html,body,div,h1,h2,pre,dd,ol{margin: 0;padding: 0;border: 0}
html{min-width: 779px}
body{background: #color: #596480;text-align: center}
div#main-wrapper{padding: 12px 5width: 769margin: 0 auto}
div,code,p,h1,h2,address,dt,dd,li{font: normal 12px/1.5em Tahoma,"Lucida Grande",Helvetica,Verdana,Lucida,Arial,"Arial Unicode",sans-serif,serif}
h1{font-size: 22font-weight:border-left: 12px solid #324f96;background: #e0eaf4;color: #4868a9;height: 4line-height: 4padding: 0 12overflow: text-align: left}
h2{font-size: 12font-weight:background: #c0014e;color: #height: 2.5line-height: 2.5padding: 0 24overflow:margin: 12px 0;text-align: left}
h2 a{color: #background: transparent}
h2 a:hover{text-decoration: none}
p{margin: 6px 0;padding: 0 12px 0 24text-indent: 2text-align: left}
p.snap-back{text-align: right}
code{display:font-family: "Courier New", Courier, monospace, mono,margin: 12padding: 12border: 1px solid #596480;color:background: #f6f6f6;text-align:white-space:width: 350px}
strong{font-weight: bold}
em{font-style: italic}
address{display:padding: 0 12margin: 12px 0;text-align: right}
dl{margin: 6px 0;padding: 0 12px 0 24text-align: left}
dt{margin: 0;text-indent: 2font-weight: bold}
dd{margin-left: 24text-indent: 2em}
li{list-style:text-align: left}
ol#table-of-content{padding-left: 24px}
a{color: #c0014e;background:text-decoration: none}
a:hover{text-decoration: underline}
div.demo{width: 400margin: 12border: 1px solid #596480;color:background: #ffc}
div.demo p{text-align:margin: 24text-indent: 0}
p#demo-1{margin: 12padding: 0 12width: 400text-indent: 0;border: 1px solid #596480;color:background: #line-height: 4height: 4overflow: hidden}
div#demo-2{padding: 50px 0}
div#demo-4, div#demo-5{height: 300position: relative}
div#demo-4 div, div#demo-5 div{position:top: 50%;left: 0}
div#demo-4 p, div#demo-5 p{position:top: -50%}
div#demo-3{display:height: 300border-collapse: collapse}
div#main-wrapper&div#demo-5{position:display:table}
div#main-wrapper&div#demo-5&div{display:table-vertical-align:position:static}
div#demo-3&div{display: table-row}
div#demo-3&div&div{display: table-vertical-align: middle}
span.property{font-family: "Courier New", Courier, monospace, mono,border-bottom: 1px dotted #596480;background: #color: #c0014e}
p.copyright{line-height: 3text-align:border-top: 1px dotted #596480}
&div id="main-wrapper"&
&h1&Demo of middled vertical align&/h1&
Author: Spenser Lee, Liberty Studio&br /&
Originally posted on &a href="/bbs/" title="BlueIdea Forum"&BlueIdea Forum&/a&
&/address&
&h2&&a id="bullet-0"&Table of centents:&/a&&/h2&
&ol id="table-of-content"&
&li&&a href="#bullet-1" title="Single line countainer with/without a fixed height"&Single line countainer with/without a fixed height&/a&&/li&
&li&&a href="#bullet-2" title="Align multi-line container which does not have a fixed height"&Align multi-line container which does not have a fixed height&/a&&/li&
&li&&a href="#bullet-3" title="Simulating table layout in container with a fixed height"&Simulating table layout in container with a fixed height&/a&&/li&
&li&&a href="#bullet-4" title="IE's solution"&IE's solution&/a&&/li&
&li&&a href="#bullet-5" title="A perfect compounded sample"&A perfect compounded sample&/a&&/li&
&h2&&a id="bullet-1"&Case One: Single line countainer with/without a fixed height&/a&&/h2&
&p&If you only want to display a container which only holds a single line of text, you can set &span class="property"&line-height&/span& property to &span class="property"&height&/span& property, then set &span class="property"&overflow&/span& to hidden.&/p&
&p&&strong&Sample:&/strong&&/p&
&p id="demo-1"&Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&/p&
&p&&strong&Core code:&/strong&&/p&
&pre&&code&.middle-demo-1{
line-height: 4
}&/code&&/pre&
&dt&Notes:&/dt&
&li&I strongly recommend you use relative size in &span class="property"&height&/span& and &span class="property"&line-height&/span& property. &em&Why?&/em& You can simply set the font size larger if your browser support it. When it gets large enough, you will see the countainer is stretched and the &span class="property"&height&/span& is no longer equal to &span class="property"&line-height&/span& property, thus, the layout is messed up. Using relative size as &span class="property"&em, ex&/span& or &span class="property"&%&/span& will let your countainer stretch with the content.&/li&
&li&&span class="property"&overflow: hidden&/span& is a must. &em&Why?&/em& Same as above. Just ensure &span class="property"&height&/span& and &span class="property"&line-height&/span& are always equal.&/li&
&dt&Pros:&/dt&
&li&Fits in both &span class="property"&block&/span& elements and &span class="property"&inline&/span& elements.&/li&
&li&Capable of all 5th-gen browsers.&/li&
&dt&Cons:&/dt&
&li&Text length is limited. Max with only &em&one&/em& line.&/li&
&li&Does not work well on none text contents such as images and objects.&/li&
&p class="snap-back"&&a href="#bullet-0" title="Back top table of centents"&Back&/a&&/p&
&h2&&a id="bullet-2"&Case Two: Align multi-line container which does not have a fixed height&/a&&/h2&
&p&In this case, we should simply set a pair of fixed equivalences to padding-top and padding-bottom attribute. It works on both IE and non-IE browsers.&/p&
&p&&strong&Sample:&/strong&&/p&
&div class="demo" id="demo-2"&
&p&Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.&/p&
&p&&strong&Core code:&/strong&&/p&
&pre&&code&.middle-demo-2{
padding-top: 24
padding-bottom: 24
}&/code&&/pre&
&dt&Pros:&/dt&
&li&Fits in both &span class="property"&block&/span& elements and &span class="property"&inline&/span& elements.&/li&
&li&Works on none text contents as fine as text contents.&/li&
&li&Capable of all 5th-gen browsers. Might need a little tune-up for the box model bug of IE5 though.&/li&
&dt&Cons:&/dt&
&li&You can &em&not&/em& assign height in this solution.&/li&
&p class="snap-back"&&a href="#bullet-0" title="Back top table of centents"&Back&/a&&/p&
&h2&&a id="bullet-3"&Case Three: Simulating table layout in container with a fixed height&/a&&/h2&
&p&CSS offers a set of very convenient display atrribute values called &span class="property"&display: table&/span&, &span class="property"&display: table-row&/span&, &span class="property"&display: table-cell&/span& and other display values begin with &span class="property"&table-&/span&. It offers a way to simulate table layout in all elements. As a result, any element with &span class="property"&display: table-cell&/span&, &span class="property"&vertical-align: middle&/span& and a fixed height will display exactly like a table cell.&/p&
&p&&strong&Sample:&/strong& (You may not be able to view the effect on IE)&/p&
&div class="demo" id="demo-3"&
&div&&div&&p&Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.&/p&&/div&&/div&
&p&&strong&Core code:&/strong&&/p&
&pre&&code&.middle-demo-3{
display: table-
height: 300
vertical-align:
}&/code&&/pre&
&dt&Notes:&/dt&
&li&&span class="property"&display: table-cell&/span& must work with other elements with &span class="property"&display: table&/span& value sets in order to form a literal table. Or it might cause unexceptable bugs.&/li&
&li&Sadly IE series (including the latest IE 7 beta) does not support any of &span class="property"&display: table&/span& values, so it won't work in IE.&/li&
&dt&Pros:&/dt&
&li&It has the most perfect render for &span class="property"&vertical-align: middle&/span& align.&/li&
&dt&Cons:&/dt&
&li&It only works in latest versions of non-IE browsers, such as Mozilla, Firefox, Netscape 8, Opera 8, and Safari.&/li&
&p class="snap-back"&&a href="#bullet-0" title="Back top table of centents"&Back&/a&&/p&
&h2&&a id="bullet-4"&Case Four: IE's solution&/a&&/h2&
&p&Since IE is a lame browser when it comes to ANYTHING, so you can't use the solution above simply because IE does not recognize it at all. However, &strong&there has been nothing yet you can not code with CSS if you have already coded it with table&/strong&. It even offers you possibility to layout your page that tables can not do!&/p&
&p&So what's the solution for IE? Like what we always do: Hit IE's back with the BUGS it offers!&/p&
&p&&strong&Sample:&/strong& (You are able to view the correct result only on IE)&/p&
&div class="demo" id="demo-4"&
&div&&p&Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.&/p&&/div&
&pre&&code&.middle-demo-4{
height: 300
.middle-demo-4 div{
.middle-demo-4 div div{
top: -50%;
}&/code&&/pre&
&p&See? Don't ask me why it worked. This hack is based on years of study in IE's own stupid layout model and it works very well, even in IE5 given the box width hack. I won't tell you the theory behind all these. It's my top secret, with which I solved a lot of other cross browser layout problems, and I'm not going to share it with you. But you are free to use this IE hack It's kinda handful in most occassions.&/p&
&dt&Pros:&/dt&
&li&The only perfect vertical align method in IE. It works even better then add automatic &span class="property"&padding&/span&s.&/li&
&dt&Cons:&/dt&
&li&After all it's a CSS hack. We can avoid it if not for IE.&/li&
&p class="snap-back"&&a href="#bullet-0" title="Back top table of centents"&Back&/a&&/p&
&h2&&a id="bullet-5"&Case Five: A perfect compounded sample&/a&&/h2&
&p&Here's the perfect compounded solution on vertical centering that works on almost all latest browsers.&/p&
&p&&strong&Sample:&/strong& (This works on almost all browsers)&/p&
&div class="demo" id="demo-5"&
&div&&p&Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.&/p&&/div&
&p&I'm not going to give you the full code of this one. But it's not difficult to write it yourself, with the solution of case 3 and 4, and a little knowledge in IE/non-IE CSS hackers. And actually the hacking style is not limited, so I don't want to force you to use my hacking style neither. Stop being lazy, and write the code yourself!&/p&
&dt&Browser capability:&/dt&
&li&Works on: IE6+, Mozilla 1.5+, Netscape Navigator 7+, Opera 7+, Firefox 1.0+ and Safari 1.0+&/li&
&li&On IE5, you might need to apply the box model hacker to make the height correct.&/li&
&li&Untested: WebOmini, Konqueror.&/li&
&li&Fails on: Other browsers not reffered in the list above.&/li&
&p class="snap-back"&&a href="#bullet-0" title="Back top table of centents"&Back&/a&&/p&
&p class="copyright"&Copyright & Spenser Lee, 2006 Liberty Studio&/p&
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
责任编辑：
◎进入论坛、版块参加讨论
蓝色理想版权申明：除部分特别声明不要转载，或者授权我站独家播发的文章外，大家可以自由转载我站点的原创文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来自一节，自行链接）。文章版权归我站和作者共有。
转载要求：转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印，亦不能抹去我站点水印。
特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有，文章若有侵犯作者版权，请与我们，我们将立即删除修改。
说明：输入正确的用户名和密码才能参与评论。如果您不是本站会员，你可以 为本站会员。
注意：文章中的链接、内容等需要修改的错误，请用，以利文档及时修改。
注意：请不要在评论中含与内容无关的广告链接，违者封ID
请您注意：?不良评论请用，以利管理员及时删除。?尊重网上道德，遵守中华人民共和国的各项有关法律法规?承担一切因您的行为而直接或间接导致的民事或刑事法律责任?本站评论管理人员有权保留或删除其管辖评论中的任意内容
?您在本站发表的作品，本站有权在网站内转载或引用 ?参与本评论即表明您已经阅读并接受上述条款
专业书推荐
&1999-. 版权所有