選項(xiàng)卡，也稱之為標(biāo)簽頁(yè)，通過(guò)單擊相應(yīng)的標(biāo)簽名后將內(nèi)容顯示在固定的區(qū)域。而在網(wǎng)頁(yè)設(shè)計(jì)中，我們可以以多種不同的形式表現(xiàn)。一般通過(guò)JavaScript腳本輔助顯示需要瀏覽的內(nèi)容，隱藏暫時(shí)不需要瀏覽的內(nèi)容。本示例使用純CSS設(shè)計(jì)這種效果。

【操作步驟】

第1步，設(shè)計(jì)原理。這類選項(xiàng)卡主要是由選項(xiàng)卡標(biāo)題以及其內(nèi)容區(qū)域所組成，并且是由多個(gè)相同類似性質(zhì)的內(nèi)容組成了一個(gè)選項(xiàng)卡群體，通過(guò)鼠標(biāo)單擊選項(xiàng)卡標(biāo)題的事件或者鼠標(biāo)經(jīng)過(guò)選項(xiàng)卡標(biāo)題的事件觸發(fā)選項(xiàng)卡標(biāo)題相對(duì)應(yīng)的內(nèi)容區(qū)域顯示。下面以效果示意圖分析一下在網(wǎng)頁(yè)制作中選項(xiàng)卡是怎么通過(guò)CSS樣式實(shí)現(xiàn)最終效果圖中的布局方式的。

選項(xiàng)卡主要是由多個(gè)“選項(xiàng)卡標(biāo)題”和“選項(xiàng)卡內(nèi)容區(qū)域”組成。通過(guò)CSS樣式中的浮動(dòng)（float）屬性或者定位（position）屬性將“選項(xiàng)卡標(biāo)題”和“選項(xiàng)卡內(nèi)容區(qū)域”分別控制在某個(gè)區(qū)域，例如，可以通過(guò)浮動(dòng)（float）的方式將“選項(xiàng)卡標(biāo)題”橫向排列在一排，再通過(guò)定位（position）的方式將“選項(xiàng)卡內(nèi)容區(qū)域”定位在“選項(xiàng)卡標(biāo)題”的下面。

第2步，設(shè)計(jì)選項(xiàng)卡結(jié)構(gòu)。首先利用一個(gè)div標(biāo)簽將所有的內(nèi)容包含在一個(gè)容器中，再根據(jù)示意圖所展示的效果書(shū)寫(xiě)“選項(xiàng)卡標(biāo)題”和“選項(xiàng)卡內(nèi)容區(qū)域”的代碼結(jié)構(gòu)。在“選項(xiàng)卡標(biāo)題”（<divclass="tab-1">包含框）區(qū)域包含一個(gè)列表結(jié)構(gòu)，在“選項(xiàng)卡內(nèi)容區(qū)域”（<div class="content">）中包含多個(gè)內(nèi)容框。

<div class="tab">    

<div class="tab_1">        

<ul>            

<li><a href="#a"><span>欄目公告</span></a></li>            

<li><a href="#b"><span>新聞動(dòng)態(tài)</span></a></li>            

<li><a href="#c"><span>社會(huì)大觀</span></a></li>            

<li><a href="#d"><span>百態(tài)人生</span></a></li>            

<li><a href="#e"><span>精品博文</span></a></li>            

<li><a href="#f"><span>本站團(tuán)購(gòu)</span></a></li>        

</ul>    

</div>    

<div class="content">        

<div class="tab_2"    id="a">            

<h3>欄目公告</h3>            

<p>1.2011年第一季度優(yōu)秀作者  06-10  ·《來(lái)稿精選》第四期推出。</p>            

<p>2.動(dòng)畫(huà)片，動(dòng)畫(huà)夢(mèng)工場(chǎng)...文集信息 標(biāo)題:欄目公告 簡(jiǎn)介: 創(chuàng)建：2008-01-09。</p>            

<p>3.欄目旨在為廣大河南網(wǎng)友提供一個(gè)發(fā)表建議、反映社會(huì)各層面問(wèn)題的公共網(wǎng)絡(luò)平臺(tái)。</p>           

<p>4.VIP用戶資費(fèi)即日開(kāi)始調(diào)整[gongxm][2009-07-23] 即日開(kāi)始VIP欄目實(shí)現(xiàn)限制訪問(wèn)。</p>        

</div>        

<div class="tab_2" id="b">            

<h3>新聞動(dòng)態(tài)</h3>            

<p>·南方五省區(qū)電力供應(yīng)告急，緊張情況或持續(xù)</p>            

<p>·二三線城市限購(gòu)名單呼之欲出“金九銀十”</p>            

<p>·華電新疆公司亞歐博覽會(huì)保電工作準(zhǔn)備就緒</p>            

<p>·住建部正研究相關(guān)政策使房地產(chǎn)去投機(jī)投資化</p>        

</div>        

<div class="tab_2" id="c">            

<h3>社會(huì)大觀</h3>            

<p>1.2011年第一季度優(yōu)秀作者  06-10  ·《來(lái)稿精選》第四期推出。</p>

<p>2.動(dòng)畫(huà)片，動(dòng)畫(huà)夢(mèng)工場(chǎng)...文集信息 標(biāo)題:欄目公告 簡(jiǎn)介: 創(chuàng)建：2008-01-09。</p>            

<p>3.欄目旨在為廣大河南網(wǎng)友提供一個(gè)發(fā)表建議、反映社會(huì)各層面問(wèn)題的公共網(wǎng)絡(luò)平臺(tái)。</p>            

<p>4.VIP用戶資費(fèi)即日開(kāi)始調(diào)整[gongxm][2009-07-23] 即日開(kāi)始VIP欄目實(shí)現(xiàn)限制訪問(wèn)。</p>        

</div>        

<div class="tab_2" id="d">            

<h3>百態(tài)人生</h3>            

<p>1.男子欲爬行回家續(xù)：被送走后重現(xiàn)鄭州  。</p>            

<p>2.網(wǎng)絡(luò)文學(xué)先驅(qū)“痞子蔡”沉寂10年重出江湖。</p>            

<p>3.初三學(xué)生不服調(diào)查管教用板凳將女教師打暈。</p>            

<p>4.重慶媽媽得病無(wú)錢(qián)治 姐妹倆上街賣頭發(fā)（組圖）。</p>        

</div>        

<div class="tab_2" id="e">

 <h3>精品博文</h3>            

<p>1.濟(jì)緣算命，哪種八字適合嫁入豪門(mén)？命理點(diǎn)評(píng)。</p>            

<p>2.樓市新政引發(fā)海外購(gòu)房熱 國(guó)人戀房情結(jié)令人擔(dān)憂。</p>            

<p>3.佛教在線精品博文頻道，匯集佛教界法師博客中的精品文章，為大家提供的平臺(tái)。</p>            

<p>4遠(yuǎn)離黑暗的提示不要讓情感亂了心智，在“假相、妄想”中“求不得”。</p>        

</div>        

<div class="tab_2" id="f">            

<h3>本站團(tuán)購(gòu)</h3>            

<p>1.世界知名品牌Swissgear專場(chǎng)！僅48元全國(guó)包郵。</p>            

<p>2.上網(wǎng)一族必備！僅39.9元，原價(jià)228元香港RAKISH電腦防輻。</p>            

<p>3.2011新款9726，第一團(tuán)首發(fā)震撼全新上市！99元全國(guó)包郵。</p>            

<p>4.世界知名品牌Swissgear專場(chǎng)！僅48元全國(guó)包郵，即享原價(jià)1。</p>

</div>    

</div></div>

第3步，定義網(wǎng)頁(yè)基本屬性和外層包含框樣式。

* {font-size:12px;}html, body {    margin:0;   

 text-align:center;    

overflow:hidden;    

height:100%;    

width:100%;   

padding-left:30px;    

background:#999999;}ul {    list-style-type:none;    margin:0px;}.tab {

width:500px;    

clear:both;    

height: 200px;    

margin: 20px 0 2px 0;}

在以上代碼中，首先定義了網(wǎng)頁(yè)基本屬性，統(tǒng)一網(wǎng)頁(yè)字體大小為12像素，并定義網(wǎng)頁(yè)背景色為灰色。清除列表結(jié)構(gòu)的項(xiàng)目符號(hào)，清除列表縮進(jìn)，設(shè)置選項(xiàng)卡包含框?qū)挾葹?00像素，固定高度。

第4步，設(shè)置內(nèi)層包含框和內(nèi)容樣式。

.tab_1 {    width:100%;    

background:#f1b1de;    

font-size:93%;    

line-height:normal;}

.tab_1 ul {    margin:0;    

padding:10px 10px 0 35px;    

list-style:none;    

float:left;}.tab_1 li {    display:inline;    

margin:0;    

padding:0;    

cursor: pointer;}

.tab_1 a {   

float:left;

background:url("images/1.gif") no-repeat left top;    

margin:0;    

padding:0 0 0 4px;   

 text-decoration:none;}.tab_1 a span {    float:left;    

display:block;    

background:url("images/2.gif") no-repeat right top;    

padding:5px 15px 4px 6px;    

color:#666;}div.content{    margin:0px;    

width:500px;    

height:190px;    

overflow:hidden;    

border: 1px solid #CCCCCC;}

.tab_1 a:hover span {    color:#FF9834;   

display:block;    

background-position:100% -42px;}

.tab_1 a:hover {    background-position:0% -42px;}

.tab_2 {    height:auto;    padding:20px;   

 clear:both;    

text-align:left;}

在網(wǎng)站建設(shè)時(shí)，以上代碼包括3部分：第一部分是前5個(gè)樣式，逐層定義選項(xiàng)卡標(biāo)題包含框樣式，從外到內(nèi)，逐層設(shè)置；第二部分是定制內(nèi)容包含框樣式；第三部分定義鼠標(biāo)經(jīng)過(guò)標(biāo)題欄時(shí)，選項(xiàng)卡的樣式。