測試 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. - 執行結果： John F. Kennedy said: ask not what your country can do for you - 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（你正在看 第三頁） | : | 第一頁 | 第二頁 | 第三頁 |
