display 第三頁

display 3

測試 compact。 <style type='text/css'> .inl { width:250px; background:#337; font-size:80% } </style> <span style='display:compact'> John F. Kennedy said: </span> <span class=inl> ask not what your country can do for you </span> - ask what you can do for your country.

• IE6, Firefox3.0 無法展現。IE8, Safari, Chrome 都正常展現。

測試 table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption。 <style type='text/css'> .tbl {display:table; border-spacing:16px} .tr {display:table-row} .td {display:table-cell; border:solid 4px red} </style> <div class=tbl> <div class=tr> <div class=td>益智遊戲</div> <div class=td>空戰遊戲</div> </div> <div class=tr> <div class=td>賽車遊戲</div> <div class=td>益智遊戲</div> </div> </div>

• 上例，IE6 失敗；Firefox, Safari, Chrome 成功。

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {width:120px; background:blue; overflow:hidden; white-space:nowrap; } .hvr:hover {display:inline;} .hvr:active {display:inline-block; vertical-align:middle; white-space:pre; } </style> <p class='hvr'>好玩遊戲, 射擊遊戲, 賽車遊戲, 小遊戲. </p> 免費玩

• 上例，Firefox 完全成功；Safari, Chrome 失敗。

javascript 應用。可以用 style 物件 的特徵 display 作動態變化。此範例使用到 toggleCSS()。 <div id='test' style='background:red; width:200px; height:150px'> 射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲, 冒險遊戲. </div> <script type='text/javascript'> function toggleCSS(id, pty, v1, v2, ms) { var os=document.getElementById(id).style; os[pty]= (os[pty] == v1 ) ? v2 : v1; setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms); } toggleCSS("test", "display", "block", "inline", 1500); </script>

display（你正在看 第三頁）

:

第一頁

第二頁

第三頁