怎么样这个页面效果才能出来？？

Question

<style>
.navbar-text {
    BORDER-RIGHT: #999999 1px; BORDER-TOP: #999999 1px; PADDING-LEFT: 10px; FONT-SIZE: 26px; BACKGROUND-IMAGE: url(../images/title_bg_left.gif); BORDER-LEFT: #999999 1px; COLOR: #ffffff; BORDER-BOTTOM: #999999 1px; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: "黑体"
}
BODY,TD {
     FONT-SIZE: 12px;
}
.tab-on {
    BORDER-RIGHT: #cccccc 1px; PADDING-RIGHT: 2px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 120px; CURSOR: pointer; COLOR: #000000; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px; BACKGROUND-COLOR: #ffffff
}
.tab-off {
    BORDER-RIGHT: #cccccc 1px; PADDING-RIGHT: 2px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 120px; CURSOR: pointer; COLOR: #666666; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #f6f6f6
}
.tab-none {
    BORDER-RIGHT: #cccccc 1px; PADDING-RIGHT: 2px; BORDER-TOP: #cccccc 1px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cccccc 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px solid
}
.tab-content {
    BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; VERTICAL-ALIGN: top; BORDER-LEFT: #cccccc 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #ffffff
}
.hide-table {
    DISPLAY: none
}
.show-table {
    DISPLAY: block
}
</style>
<script language="javascript">
    <!--
    //Change Cell Content - By SiC/CYAN
function switchCell(n, hash) {
    nc=document.getElementsByName("navcell");
    if(nc){
        t=document.getElementsByName("tb")
        for(i=0;i<nc.length;i++){
            nc.item(i).className="tab-off";
            t.item(i).className="hide-table";
        }
        nc.item(n-1).className="tab-on";
        t.item(n-1).className="tab-content show-table";
    }else if(navcell){
        for(i=0;i<navcell.length;i++){
            navcell[i].className="tab-off";
            tb[i].className="hide-table";
        }
        navcell[n-1].className="tab-on";
        tb[n-1].className="tab-content show-table";
    }
    if(hash){
        document.location="#"+hash;
    }
}    // -->
</script><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
  <TBODY>
  <TR>
    <TD class=tab-on id=navcell onclick=switchCell(1) 
      name="navcell">简介 </TD>
    <TD class=tab-off id=navcell onclick=switchCell(2) 
    name="navcell"> 最近更新</TD>
    <TD class=tab-off id=navcell onclick=switchCell(3) 
    name="navcell"> 商务合作</TD>
    <TD class=tab-off id=navcell onclick=switchCell(4) 
    name="navcell">奖项 和 链接</TD>
    <TD class=tab-none> </TD>
  </TR>
 </TBODY>
</TABLE>
<TABLE class=tab-content id=tb cellSpacing=5 cellPadding=0 
width="100%" border=0 name="tb">
  <TBODY>
  <TR>
    <TD class=td_heading vAlign=top><form style="margin:0">我们的冲浪之选<input type=button></form></TD></TR>
  </TBODY>
</TABLE>
<TABLE class=hide-table id=tb cellSpacing=5 cellPadding=0 
width="100%" border=0 name="tb">
  <TBODY>
  <TR>
    <TD class=td_heading vAlign=top>站点最后更新:</TD></TR>
  </TBODY>
</TABLE>
<TABLE class=hide-table id=tb cellSpacing=5 cellPadding=0 
width="100%" border=0 name="tb">
  <TBODY>
  <TR>
    <TD class=td_heading vAlign=top>商务</TD></TR>
  </TBODY>
</TABLE>
<TABLE class=hide-table id=tb cellSpacing=5 cellPadding=0 
width="100%" border=0 name="tb">
  <TBODY>
  <TR>
    <TD class=td_heading vAlign=top>奖项和链接</TD></TR>
  </TBODY>
</TABLE>