• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • 如何在網(wǎng)頁設(shè)計中設(shè)計選項卡

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

        【操作步驟】

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

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

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

        <div class="tab">    

        <div class="tab_1">        

        <ul>            

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

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

        <li><a href="#c"><span>社會大觀</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>本站團購</span></a></li>        

        </ul>    

        </div>    

        <div class="content">        

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

        <h3>欄目公告</h3>            

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

        <p>2.動畫片,動畫夢工場...文集信息 標題:欄目公告 簡介: 創(chuàng)建:2008-01-09。</p>            

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

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

        </div>        

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

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

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

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

        <p>·華電新疆公司亞歐博覽會保電工作準備就緒</p>            

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

        </div>        

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

        <h3>社會大觀</h3>            

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

        <p>2.動畫片,動畫夢工場...文集信息 標題:欄目公告 簡介: 創(chuàng)建:2008-01-09。</p>            

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

        <p>4.VIP用戶資費即日開始調(diào)整[gongxm][2009-07-23] 即日開始VIP欄目實現(xià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.重慶媽媽得病無錢治 姐妹倆上街賣頭發(fā)(組圖)。</p>        

        </div>        

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

         <h3>精品博文</h3>            

        <p>1.濟緣算命,哪種八字適合嫁入豪門?命理點評。</p>            

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

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

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

        </div>        

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

        <h3>本站團購</h3>            

        <p>1.世界知名品牌Swissgear專場!僅48元全國包郵。</p>            

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

        <p>3.2011新款9726,第一團首發(fā)震撼全新上市!99元全國包郵。</p>            

        <p>4.世界知名品牌Swissgear專場!僅48元全國包郵,即享原價1。</p>

        </div>    

        </div></div>

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

        * {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)頁基本屬性,統(tǒng)一網(wǎng)頁字體大小為12像素,并定義網(wǎng)頁背景色為灰色。清除列表結(jié)構(gòu)的項目符號,清除列表縮進,設(shè)置選項卡包含框?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è)時,以上代碼包括3部分:第一部分是前5個樣式,逐層定義選項卡標題包含框樣式,從外到內(nèi),逐層設(shè)置;第二部分是定制內(nèi)容包含框樣式;第三部分定義鼠標經(jīng)過標題欄時,選項卡的樣式。

        網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點擊可一鍵撥號)
        在线一区视频二区三区,av无码久久久不卡网站,亚洲国产人成精品,国产成人白丝视频
        • <abbr id="qqgmy"></abbr>
          <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
        • <rt id="qqgmy"><code id="qqgmy"></code></rt>