* {
list-style-type:none;
font-size:12px;
text-decoration:none;
margin:0;
padding:0;
}

　　总体布局声明，去除列表项预设标记，设置文字大小为12px，去除文字装饰线，外边距与内边距均为零。

Example Source Code []

.woaicss {
width:438px;
height:300px;
overflow:hidden;
margin:50px auto;
}

　　总体标签切换窗口的样式定义，宽高设置，溢出为隐藏，上下外边距为50px，左右为自动，实现水平居中对齐。

Example Source Code []

.woaicss_title {
width:438px;
height:30px;
background:#fff url(btn_bg.png) no-repeat; overflow:hidden;
}

　　无序列表UL的样式，宽高设置，背景图片为btn_bg.png。

Example Source Code []

.woaicss_title li {
display:block;
float:left;
margin:0 2px 0 0;
display:inline;
text-align:center;
}

　　无序列表内列表项的样式，设置为块元素并应用向左的浮动，右侧外边距为2px。将列表项内联，文字对齐方式为居中。

Example Source Code []

.woaicss_title li a {
display:block;
width:90px;
heigth:30px;
line-height:34px;
color:#fff;
}

　　列表项链接的样式，设置为块元素并指定了宽高，行高为34px，颜色为白色color:#fff；

Example Source Code []

.woaicss_title li a:hover {
color:#f0f0f0;
text-decoration:underline;
}

　　列表项链接的悬停样式，颜色为#f0f0f0，加下划线作为装饰线。

Example Source Code []

.woaicss_title_bg1 {background-position:0 0;}
.woaicss_title_bg2 {background-position:0 -30px;}
.woaicss_title_bg3 {background-position:0 -60px;}
.woaicss_title_bg4 {background-position:0 -90px;}

　　此四个样式的定义请与步骤四javascript脚本进行联系。即在函数的值变化时，相应的对无序列表的样式进行重新定义，我们在此处对背景图定位进行了调整，实现了选项卡片的突出状态。

Example Source Code []

.woaicss_con {
display:block;
width:438px;
height:270px;
background:url(con_bg.png) no-repeat 0 0; overflow:hidden;
}

　　内容层的样式定义，指定宽高，并设置背景图片con_bg.png。请您非凡注重，这里的背景图片与无序列表UL的背景图片应该是无缝结合。即从外观上它们两者是一个整体。

六、内容充实：

　　我们为内容层填充一定的内容，并对其进行美化，例如：（仅说明其一，其它三个雷同。）

Example Source Code []

<ul>
<li><a href="#" title="">Web Developer插件教程 CSS网页布局辅助设计利器！具体图文讲解！</a></li>
<li><a href="#" title="">CSS Templates 频道4月5日更新 增加模板22套</a></li>
<li><a href="#" title="">XHTML与CSS入门经典 从零开始系列教程！</a></li>
<li><a href="#" title="">DIV CSS布局入门示例（目录）</a></li>
<li><a href="#" title="">CSS基础教程17篇 [翻译Htmldog]</a></li>
<li><a href="#" title="">DIV CSS布局实例：用css网站布局之十步实录！（目录） </a></li>
<li><a href="#" title="">WEB2.0标准教程 循序渐进十二天的基础学习！</a></li>
<li><a href="#" title="">Div CSS 网页布局 教程！</a></li>
</ul>

　　我们充实的内容层为一个UL无序列表，我们对其进行样式定义：

Example Source Code []