首先用css定义一个框架；
然后用div调用出来css定义的这个框架；
js是用来实现tab切换效果的。
可以百度搜索一下tab素材或者选项卡素材。
有很多相关素材的，
js和css可以写在当前页面，也可以分开调用；
一般分开来会比较好管理一些。
例：
<html>
<head>
<style>.tab{width:300px0height:100px}</style>
</head>
<body>
<div class="tab">内容</div>
<script>function{}</script>
</body>
</html>
<!--html--><div class="c2leftt1">
<div class="nTab4">
<!-- 标题开始 -->
<div class="TabTitle4">
<ul id="myTab44">
<li class="active" onclick="nTabs(this,0)">陈志明</li>
<li class="normal" onclick="nTabs(this,1)">陈二明</li>
<li class="normal" onclick="nTabs(this,2)">志明</li></ul>
</div>
<!-- 内容开始 -->
<div class="TabContent4">
<!--1 -->
<div id="myTab44_Content0">
aaaaaaa
aaaaaaaaaaaaaa
</div>
<!--1ned -->
<div id="myTab44_Content1" class="none">111 </div>
<div id="myTab44_Content2" class="none">222 </div>
</div>
</div>
</div>
<!--html-->
html 结束
/*JS*/
// JavaScript Document
function nTabs(thisObj,Num){
if(thisObj.className == "active")return
var tabObj = thisObj.parentNode.id
var tabList = document.getElementById(tabObj).getElementsByTagName("li")
for(i=0i <tabList.lengthi++)
{
if (i == Num)
{
thisObj.className = "active"
document.getElementById(tabObj+"_Content"+i).style.display = "block"
}else{
tabList[i].className = "normal"
document.getElementById(tabObj+"_Content"+i).style.display = "none"
}
}
}
/*JS结束*/
/*css*/
.nTab4{
float: left
width: 266px
height:200px
margin: 0 auto
background-position:left
background-repeat:repeat-y
text-align:left
}
.nTab4 .TabTitle4{
clear: both
height: 22px
overflow: hidden
background-image:url(../images/home.jpg)background-position:-296px -256px
text-align:left
padding-left:24px !importantpadding-left:20px
}
.nTab4 .TabTitle4 ul{
border:0
padding:0
margin:0
}
.nTab4 .TabTitle4 li{
float: left
width: 54px
cursor: pointer
padding-top: 4px
padding-right: 0px
padding-left: 0px
padding-bottom: 2px
list-style-type: none
font-size: 12px
text-align: center
height:14px
}
.nTab4 .TabTitle4 .active{background:#fffborder-left:1px #A2BBD9 solidborder-top:1px #A2BBD9 solidborder-right:1px #AACCEE solidborder-bottom:1px #fff solid}
.nTab4 .TabTitle4 .normal{border:1px #A2BBD9 solidbackground-image:url(../images/hm22bj.gif)background-repeat:repeat-x}
.nTab4 .TabContent4{
width:autobackground:#fff
margin: 0px auto
padding:5px 0 0 0
height:170px
}
.none {display:none}
.niuren{ width:264pxheight:100px}
.niurenpic{ width:80pxheight:100pxfloat:left}
.niurenasp{ width:170pxheight:90pxfloat:rightpadding-top:10px}
.niurenasp b{ border:0margin:0padding:0}
.niurenasp p{ border:0margin:0color:#666666padding-top:5pxline-height:20px}
.niurend{ width:264pxheight:60pxmargin-top:5px}
.niurend ul{ margin:0padding:0}
.niurend li{ height:20pxmargin:0padding:0}
/*css结束*/
css有点费码如果你要添加选项卡的话自己找找规律， 不知道是不是这东西
