選項(xiàng)卡原身是Windows操作系統(tǒng)的一個(gè)創(chuàng)意，即通過(guò)交換選項(xiàng)，讓很多項(xiàng)目信息輪替顯示在大小和位置都固定的小塊區(qū)域里。因此選項(xiàng)卡具有占用篇幅小，輻射內(nèi)容大的特點(diǎn)。一個(gè)典型的例子是你打開(kāi)IE瀏覽器，依次點(diǎn)擊“工具”-“Internet選項(xiàng)”，這個(gè)表單就是一個(gè)選項(xiàng)卡典型布局。當(dāng)然了，這里所說(shuō)的選項(xiàng)卡效果是要在Web頁(yè)面實(shí)現(xiàn)的，并非應(yīng)用程序里的菜單選項(xiàng)，在網(wǎng)頁(yè)中應(yīng)用選項(xiàng)卡可以使網(wǎng)頁(yè)顯得更緊湊，結(jié)合AJAX技術(shù)可以使頁(yè)面在有限的空間內(nèi)展現(xiàn)更多的內(nèi)容。本文主要介紹一種簡(jiǎn)潔的選項(xiàng)卡效果的實(shí)現(xiàn)，兼容性較好，方便大家直接使用。

以下是引用片段：
<style type="text/css">
body {
 margin:0px;
 text-align:center;
 font-size:12px;
}
#divall {
 margin:auto;
 margin-top:35px;
 width:300px;
 height:200px;
 background-color:#7DA7D9;
 border:0px;
}
#title {
 width:300px;
 height:20px;
 font-size:14px;
 margin-top:4px;
}
#table1 table {
 width:300px;
 height:30px;
 font-size:12px;
}
#table2 table {
 width:300px;
 height:30px;
 font-size:12px;
}
#content1,#content2,#content3,#content4,#content5,#content6,#msg1,#msg2 {
 margin:auto;
 height:110px;
 width:290px;
 background-color:#eee;
 position:relative;
}
#content1 div,#content2 div,#content3 div,#content4 div,#content5 div,#content6 div {
 position:absolute;
 bottom:3px;
 right:3px;