选项卡，也称之为标签页，通过单击相应的标签名后将内容显示在固定的区域。而在网页设计中，我们可以以多种不同的形式表现。一般通过JavaScript脚本辅助显示需要浏览的内容，隐藏暂时不需要浏览的内容。本示例使用纯CSS设计这种效果。

【操作步骤】

第1步，设计原理。这类选项卡主要是由选项卡标题以及其内容区域所组成，并且是由多个相同类似性质的内容组成了一个选项卡群体，通过鼠标单击选项卡标题的事件或者鼠标经过选项卡标题的事件触发选项卡标题相对应的内容区域显示。下面以效果示意图分析一下在网页制作中选项卡是怎么通过CSS样式实现最终效果图中的布局方式的。

选项卡主要是由多个“选项卡标题”和“选项卡内容区域”组成。通过CSS样式中的浮动（float）属性或者定位（position）属性将“选项卡标题”和“选项卡内容区域”分别控制在某个区域，例如，可以通过浮动（float）的方式将“选项卡标题”横向排列在一排，再通过定位（position）的方式将“选项卡内容区域”定位在“选项卡标题”的下面。

第2步，设计选项卡结构。首先利用一个div标签将所有的内容包含在一个容器中，再根据示意图所展示的效果书写“选项卡标题”和“选项卡内容区域”的代码结构。在“选项卡标题”（<divclass="tab-1">包含框）区域包含一个列表结构，在“选项卡内容区域”（<div class="content">）中包含多个内容框。

<div class="tab">    

<div class="tab_1">        

<ul>            

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

<li><a href="#b"><span>新闻动态</span></a></li>            

<li><a href="#c"><span>社会大观</span></a></li>            

<li><a href="#d"><span>百态人生</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年第一季度优秀作者  06-10  ·《来稿精选》第四期推出。</p>            

<p>2.动画片，动画梦工场...文集信息 标题:栏目公告 简介: 创建：2008-01-09。</p>            

<p>3.栏目旨在为广大河南网友提供一个发表建议、反映社会各层面问题的公共网络平台。</p>           

<p>4.VIP用户资费即日开始调整[gongxm][2009-07-23] 即日开始VIP栏目实现限制访问。</p>        

</div>        

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

<h3>新闻动态</h3>            

<p>·南方五省区电力供应告急，紧张情况或持续</p>            

<p>·二三线城市限购名单呼之欲出“金九银十”</p>            

<p>·华电新疆公司亚欧博览会保电工作准备就绪</p>            

<p>·住建部正研究相关政策使房地产去投机投资化</p>        

</div>        

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

<h3>社会大观</h3>            

<p>1.2011年第一季度优秀作者  06-10  ·《来稿精选》第四期推出。</p>

<p>2.动画片，动画梦工场...文集信息 标题:栏目公告 简介: 创建：2008-01-09。</p>            

<p>3.栏目旨在为广大河南网友提供一个发表建议、反映社会各层面问题的公共网络平台。</p>            

<p>4.VIP用户资费即日开始调整[gongxm][2009-07-23] 即日开始VIP栏目实现限制访问。</p>        

</div>        

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

<h3>百态人生</h3>            

<p>1.男子欲爬行回家续：被送走后重现郑州  。</p>            

<p>2.网络文学先驱“痞子蔡”沉寂10年重出江湖。</p>            

<p>3.初三学生不服调查管教用板凳将女教师打晕。</p>            

<p>4.重庆妈妈得病无钱治 姐妹俩上街卖头发（组图）。</p>        

</div>        

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

 <h3>精品博文</h3>            

<p>1.济缘算命，哪种八字适合嫁入豪门？命理点评。</p>            

<p>2.楼市新政引发海外购房热 国人恋房情结令人担忧。</p>            

<p>3.佛教在线精品博文频道，汇集佛教界法师博客中的精品文章，为大家提供的平台。</p>            

<p>4远离黑暗的提示不要让情感乱了心智，在“假相、妄想”中“求不得”。</p>        

</div>        

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

<h3>本站团购</h3>            

<p>1.世界知名品牌Swissgear专场！仅48元全国包邮。</p>            

<p>2.上网一族必备！仅39.9元，原价228元香港RAKISH电脑防辐。</p>            

<p>3.2011新款9726，第一团首发震撼全新上市！99元全国包邮。</p>            

<p>4.世界知名品牌Swissgear专场！仅48元全国包邮，即享原价1。</p>

</div>    

</div></div>

第3步，定义网页基本属性和外层包含框样式。

* {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;}

在以上代码中，首先定义了网页基本属性，统一网页字体大小为12像素，并定义网页背景色为灰色。清除列表结构的项目符号，清除列表缩进，设置选项卡包含框宽度为500像素，固定高度。

第4步，设置内层包含框和内容样式。

.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;}

在网站建设时，以上代码包括3部分：第一部分是前5个样式，逐层定义选项卡标题包含框样式，从外到内，逐层设置；第二部分是定制内容包含框样式；第三部分定义鼠标经过标题栏时，选项卡的样式。