类似网易首页标签的滑动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标签示例</title>
<style type="text/css">
body { font-size:14px; font-family:"宋体"}
ol li { margin:8px}
#con { font-size:12px; 600px; margin:0 auto}
#tags { height:23px; 400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(http://www.happyshow.org/sample/20061108/images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(http://www.happyshow.org/sample/20061108/images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { 4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;100%;}
.tagContent { background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x; height:350px;  padding:10px; color:#474747; 576px; display:none}
#tagContent div.selectTag{ display:block}

.tagFrame{
 background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x;
}

</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function getTab(flag) { 
  var elList, i;
  elList = document.getElementsByTagName("li");
  for (i = 0; i < elList.length; i++){
  elList[i].className ="";
  }
  elList[flag].className ="selectTag";
  elList[flag].blur();

}

function goto(flag){
 if("0"==flag){
  document.all.tabIframe.src="http://www.google.com";
 }else if("1"==flag){
  document.all.tabIframe.src="http://www.baidu.com";
 }else if("2"==flag){
  document.all.tabIframe.src="http://www.sogou.com";
 }
 getTab(parseInt(flag));
}
//-->
</SCRIPT>
</head>
<body>
<h1>标签示例</h1>

<div id="con">
  <ul id="tags">
    <li><a href="javascript:void(0)" onclick="goto('0');">标签一</a></li>
 <li class="selectTag"><a href="javascript:void(0)" onclick="goto('1');">标签二</a></li>
 <li><a href="javascript:void(0)" onclick="goto('2');">自适应宽度的标签</a></li>
  </ul>
  <div id="tagContent">
   <!-- <div id="tagContent0" class="tagContent">第一个标签的内容</div>
 <div id="tagContent1" class="tagContent selectTag">第二个标签的内容</div>
 <div id="tagContent2" class="tagContent">第三个标签的内容</div> -->
 <iframe class="tagFrame" name="tabIframe" src="http://www.google.com" marginheight="8" marginwidth="8" frameborder="0"  width="100%" height="100%"></iframe>
  </div> 
</div>
<script type="text/javascript">
function selectTag(showContent,url,selfObj){
 // 操作标签
 var tag = document.getElementById("tags").getElementsByTagName("li");
 var taglength = tag.length;
 for(i=0; i<taglength; i++){
  tag[i].className = "";
 }
 selfObj.parentNode.className = "selectTag";
 
}
</script>
</body>
</html>




2.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0054)http://www.happyshow.org/sample/20060926/yahootag.html -->
<HTML><HEAD><TITLE>yahoo 标签</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script type="text/javascript">
var currentTag = 1;
function fivetag(obj,id){
 selectMenu(obj);
 for (var i =1,j; j=document.getElementById("tag_content_"+i); i++){
  j.style.display="none";
 }
 document.getElementById("tag_content_"+id).style.display="block";
 currentTag++;
 if (currentTag>5)
 currentTag=1;
}
function selectMenu(obj){
 var lia = document.getElementById("menulist").getElementsByTagName("li");
 var lialen = lia.length;
 for(i=0; i<lialen; i++){
  if(lia[i].getElementsByTagName("a")[0].className=="curMenu")
  lia[i].getElementsByTagName("a")[0].className = "";
 }
 obj.className = "curMenu";
}
function init(){
 var menulist = document.getElementById("menulist");
 setInterval('fivetag(menulist.getElementsByTagName("li")[currentTag-1].getElementsByTagName("a")[0],currentTag)',1000);
}
</script>
<STYLE type=text/css>.tag_box {
 BORDER-RIGHT: #b0bec7 1px solid; BORDER-TOP: #b0bec7 1px solid; MARGIN: 50px; FONT: 12px Arial, Helvetica, sans-serif; OVERFLOW: hidden; BORDER-LEFT: #b0bec7 1px solid; WIDTH: 400px; BORDER-BOTTOM: #b0bec7 1px solid; HEIGHT: 126px
}
.tag_box UL.menulist {
 MARGIN: 0px; OVERFLOW: hidden; WIDTH: 402px; HEIGHT: 20px
}
.tag_box UL.menulist LI {
 BACKGROUND: url(tag_bg1.gif) repeat-x; FLOAT: left; WIDTH: 80px; LINE-HEIGHT: 19px; LIST-STYLE-TYPE: none; POSITION: relative; HEIGHT: 19px; TEXT-ALIGN: center
}
.tag_box UL.menulist LI A {
 DISPLAY: block; BACKGROUND: url(tag_pipe.gif) no-repeat right 1px; WIDTH: 80px; COLOR: #18397c; BORDER-BOTTOM: #93a6b4 1px solid; TEXT-DECORATION: none
}
.tag_box UL.menulist LI A:hover {
 TEXT-DECORATION: underline
}
.tag_box UL.menulist LI A.curMenu {
 BORDER-RIGHT: #91a7b4 1px solid; BORDER-TOP: #91a7b4 1px solid; FONT-WEIGHT: bold; Z-INDEX: 100; BACKGROUND: url(tag_bg2.gif) repeat-x; LEFT: -1px; BORDER-LEFT: #91a7b4 1px solid; WIDTH: 81px; COLOR: #c63; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: -1px; HEIGHT: 21px
}
.tag_box A.nonebg {
 BACKGROUND: none transparent scroll repeat 0% 0%
}
.tag_content {
 CLEAR: both; PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 6px; PADDING-TOP: 6px
}
.tag_content IMG.bigConImg {
 BORDER-RIGHT: #788a98 1px solid; BORDER-TOP: #788a98 1px solid; DISPLAY: block; FLOAT: left; BORDER-LEFT: #788a98 1px solid; BORDER-BOTTOM: #788a98 1px solid
}
.tag_content H5 {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 2px; MARGIN: 3px 6px; WIDTH: 250px; PADDING-TOP: 2px; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: center
}
.tag_content A {
 COLOR: #16387c; TEXT-DECORATION: none
}
.tag_content A:hover {
 TEXT-DECORATION: underline
}
.tag_content P {
 PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FLOAT: left; PADDING-BOTTOM: 2px; MARGIN: 0px; LINE-HEIGHT: 18px; PADDING-TOP: 2px
}
.tag_content UL {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 3px; PADDING-TOP: 0px
}
.tag_content LI {
 MARGIN-BOTTOM: 3px; MARGIN-LEFT: 20px
}
</STYLE>


<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY onload=init()>
<DIV class=tag_box id=tag_menu>
<UL class=menulist id=menulist>
  <LI><A class=curMenu onfocus=this.blur() onclick=fivetag(this,1)
  href="http://www.happyshow.org/sample/20060926/yahootag.html#">Home</A> </LI>
  <LI><A onfocus=this.blur() onclick=fivetag(this,2)
  href="http://www.happyshow.org/sample/20060926/yahootag.html#">Software</A>
  </LI>
  <LI><A onfocus=this.blur() onclick=fivetag(this,3)
  href="http://www.happyshow.org/sample/20060926/yahootag.html#">Product</A>
  </LI>
  <LI><A onfocus=this.blur() onclick=fivetag(this,4)
  href="http://www.happyshow.org/sample/20060926/yahootag.html#">AboutUs</A>
  </LI>
  <LI><A onfocus=this.blur() onclick=fivetag(this,5)
  href="http://www.happyshow.org/sample/20060926/yahootag.html#">ContactUs</A>
  </LI></UL><!--
-->
<DIV class=tag_content id=tag_content_1><IMG class=bigConImg
src="yahoo 标签.files/tag_1_img.jpg">
<H5><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">Supercars
for the super-richHome</A></H5>
<P>For those who can drop six figures on a car, there's a fresh crop of shiny
new 2007 models. &raquo; <A
href=" http://www.happyshow.org/sample/20060926/yahootag.html#">More</A></P></DIV>
<DIV class=tag_content id=tag_content_2><IMG class=bigConImg
src="yahoo 标签.files/tag_2_img.jpg">
<H5><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">Time and
again Software</A></H5>
<UL>
  <LI><A
  href="http://www.happyshow.org/sample/20060926/yahootag.html#">Negroponte says
  U.S. not at higher risk</A>
  <LI><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">U.S. to
  relax ban of liquids on planes</A>
  <LI><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">U.S.
  pursues closer ties with Kazakhstan</A> </LI></UL></DIV>
<DIV class=tag_content id=tag_content_3><IMG class=bigConImg
src="yahoo 标签.files/tag_3_img.jpg">
<H5><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">Saints'
storybook return Product</A></H5>
<P>In front of a sellout Superdome crowd, New Orleans rides the emotional wave
to victory over Atlanta. &raquo; <A
href=" http://www.happyshow.org/sample/20060926/yahootag.html#">More</A></P></DIV>
<DIV class=tag_content id=tag_content_4><IMG class=bigConImg
src="yahoo 标签.files/tag_4_img.jpg">
<H5><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">Fall
foliage alternatives AboutUs</A></H5>
<P>Dieting with a partner can be motivating, but presents unexpected challenges
as well. &raquo; <A
href=" http://www.happyshow.org/sample/20060926/yahootag.html#">More</A></P></DIV>
<DIV class=tag_content id=tag_content_5><IMG class=bigConImg
src="yahoo 标签.files/tag_5_img.jpg">
<H5><A href="http://www.happyshow.org/sample/20060926/yahootag.html#">10 ways to
earn more pay ContactUs</A></H5>
<P>Why settle for your current salary and benefits when you can negotiate for
more? &raquo; <A
href=" http://www.happyshow.org/sample/20060926/yahootag.html#">More</A></P></DIV></DIV>修改:

<UL style="FONT: 11px Tahoma">
  <LI>每隔一段时间自动循环切换Tag (修改于 2006-10-10) </LI></UL>
<DIV style="MARGIN-TOP: 50px; FONT: 12px '宋体'">Writen By <A
href="http://www.happyshow.org/" target=_blank>快乐笛子</A></DIV></BODY></HTML>


3.

<style>
BODY {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: "宋体", arial; TEXT-ALIGN: center
}
UL {
 BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
OL {
 BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
LI {
 BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}

H5 {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.clear {
 CLEAR: both; FONT-SIZE: 1px; VISIBILITY: hidden; WIDTH: 1px
}

.lineH {
 FONT-SIZE: 1px; BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/lineH.gif); MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 750px; HEIGHT: 1px
}
.area {
 BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg.gif); MARGIN: 0px auto; WIDTH: 750px
}
.area .col1 {
 FLOAT: left; WIDTH: 436px
}
.area .col2 {
 FLOAT: right; WIDTH: 300px
}
.scrollWeather {
 PADDING-RIGHT: 0px; PADDING-LEFT: 8px; PADDING-BOTTOM: 0px; COLOR: #1f3a87; PADDING-TOP: 4px; TEXT-ALIGN: left
}
.scrollWeather UL {
 
}
.scrollWeather LI {
 FLOAT: left; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.scrollWeather .s1 {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
.scrollWeather .s2 {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; COLOR: #1f3a87; PADDING-TOP: 4px
}
.leftContent {
 CLEAR: both
}
.leftContent .menu {
 CLEAR: both; HEIGHT: 22px
}
.leftContent .menu UL {
 
}
.leftContent .menu LI {
 FLOAT: left; CURSOR: pointer; LIST-STYLE-TYPE: none; HEIGHT: 22px
}
.leftContent .menu LI H6 {
 PADDING-RIGHT: 0px; PADDING-LEFT: 11px; FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 2px; PADDING-TOP: 6px
}
.leftContent .menu LI SPAN {
 PADDING-RIGHT: 8px; PADDING-LEFT: 8px; BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg7.gif) no-repeat 0px 9px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP: 6px
}
.leftContent .menu .activeW1 {
 BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_1.gif); WIDTH: 218px
}
.leftContent .menu .normalW1 {
 BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_1_1.gif); WIDTH: 218px
}
.leftContent .menu .activeW2 {
 BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_1_2.gif); WIDTH: 218px
}
.leftContent .menu .normalW2 {
 BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_1_3.gif); WIDTH: 218px
}
.leftContent .menuA {
 CLEAR: both; OVERFLOW: hidden; HEIGHT: 22px
}
.leftContent .menuA UL {
 
}
.leftContent .menuA LI {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 2px; WIDTH: 109px; CURSOR: pointer; PADDING-TOP: 6px; LIST-STYLE-TYPE: none
}
.leftContent .menuA .active {
 BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_2.gif)
}
.leftContent .menuA .normal {
 BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_2_1.gif)
}
.leftContent .menuA .over {
 BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_2_2.gif)
}
.leftContent .menuB {
 CLEAR: both; OVERFLOW: hidden; HEIGHT: 22px
}
.leftContent .menuB UL {
 
}
.leftContent .menuB LI {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2px; CURSOR: pointer; PADDING-TOP: 6px; LIST-STYLE-TYPE: none
}
.leftContent .menuB .active {
 BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_3.gif); FLOAT: left; WIDTH: 88px
}
.leftContent .menuB .normal {
 BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_3_1.gif); FLOAT: left; WIDTH: 87px
}
.leftContent .menuB .over {
 BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_3_2.gif); FLOAT: left; WIDTH: 87px
}
.leftContent .menu A {
 COLOR: #1f3a87
}
.leftContent .menuA LI A {
 COLOR: #1f3a87
}
.leftContent .menuB LI A {
 COLOR: #1f3a87
}
.leftContent .menu A:visited {
 COLOR: #1f3a87
}
.leftContent .menuA LI A:visited {
 COLOR: #1f3a87
}
.leftContent .menuB LI A:visited {
 COLOR: #1f3a87
}
.leftContent .menu A:hover {
 COLOR: #bc2931
}
.leftContent .menuA LI A:hover {
 COLOR: #bc2931
}
.leftContent .menuB LI A:hover {
 COLOR: #bc2931
}
.leftContent .menuA .over A {
 COLOR: #fff
}
.leftContent .menuB .over A {
 COLOR: #fff
}
.leftContent .menuA .over A:visited {
 COLOR: #fff
}
.leftContent .menuB .over A:visited {
 COLOR: #fff
}
.leftContent .menuA .over A:hover {
 COLOR: #ff0
}
.leftContent .menuB .over A:hover {
 COLOR: #ff0
}
.leftContent .content {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 416px; PADDING-TOP: 12px
}
.leftContent .content .col {
 FLOAT: left
}
.leftContent .content .w1 {
 WIDTH: 162px
}
.leftContent .content .w2 {
 PADDING-RIGHT: 0px; PADDING-LEFT: 14px; PADDING-BOTTOM: 0px; WIDTH: 240px; PADDING-TOP: 0px
}
.leftContent .content .w3 {
 WIDTH: 122px
}
.leftContent .content .w4 {
 PADDING-RIGHT: 0px; PADDING-LEFT: 14px; PADDING-BOTTOM: 0px; WIDTH: 280px; PADDING-TOP: 0px
}
.leftContent .content .pic {
 CLEAR: both
}
.leftContent .content .pic IMG {
 BORDER-RIGHT: #cbcbcb 1px solid; BORDER-TOP: #cbcbcb 1px solid; BORDER-LEFT: #cbcbcb 1px solid; BORDER-BOTTOM: #cbcbcb 1px solid
}
.leftContent .content .pic H6 {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 12px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; TEXT-ALIGN: left
}
.leftContent .content .listText {
 CLEAR: both; BORDER-RIGHT: #cbcbcb 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cbcbcb 1px solid; PADDING-LEFT: 5px; BACKGROUND: #f2f6fb; PADDING-BOTTOM: 3px; BORDER-LEFT: #cbcbcb 1px solid; COLOR: #cbcbcb; LINE-HEIGHT: 160%; PADDING-TOP: 8px; BORDER-BOTTOM: #cbcbcb 1px solid; TEXT-ALIGN: left
}
.leftContent .content .listText .s1 {
 BORDER-RIGHT: #baceeb 1px solid; BORDER-TOP: #baceeb 1px solid; FONT-SIZE: 12px; BACKGROUND: #fff; MARGIN: 5px 0px; BORDER-LEFT: #baceeb 1px solid; WIDTH: 100px; BORDER-BOTTOM: #baceeb 1px solid; HEIGHT: 16px
}
.leftContent .content .listText .s2 {
 BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/input_bg2.gif); BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px; WIDTH: 34px; PADDING-TOP: 2px; HEIGHT: 20px; BORDER-RIGHT-WIDTH: 0px
}
.leftContent .content .listText1 {
 CLEAR: both; BORDER-RIGHT: #cbcbcb 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cbcbcb 1px solid; PADDING-LEFT: 5px; BACKGROUND: #f2f6fb; PADDING-BOTTOM: 5px; BORDER-LEFT: #cbcbcb 1px solid; COLOR: #cbcbcb; LINE-HEIGHT: 180%; PADDING-TOP: 10px; BORDER-BOTTOM: #cbcbcb 1px solid; TEXT-ALIGN: left
}
.leftContent .content .bbsPoint {
 CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 7px; BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg7.gif) no-repeat 0px 14px; PADDING-BOTTOM: 0px; PADDING-TOP: 11px; TEXT-ALIGN: left
}
.leftContent .content .bbsPoint A {
 COLOR: #1f3a87
}
.leftContent .content .bbsPoint A:visited {
 COLOR: #1f3a87
}
.leftContent .content .bbsPoint A:hover {
 COLOR: #bc2931
}
.leftContent .content .listText A {
 COLOR: #000
}
.leftContent .content .listText A:visited {
 COLOR: #000
}
.leftContent .content .listText A:hover {
 COLOR: #bc2931
}
.leftContent .content .keyword {
 CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; COLOR: #1f3a87; LINE-HEIGHT: 160%; PADDING-TOP: 10px; TEXT-ALIGN: left
}
.leftContent .content H4 {
 CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 100; FONT-SIZE: 18px; PADDING-BOTTOM: 0px; PADDING-TOP: 11px; FONT-FAMILY: "黑体" ,Arial Black,sans-serif; TEXT-ALIGN: left
}
.leftContent .content P {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #1f3a87; TEXT-INDENT: 2em; LINE-HEIGHT: 160%; PADDING-TOP: 10px; TEXT-ALIGN: left
}
.leftContent .content .list {
 CLEAR: both
}
.leftContent .content .list UL {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 10px
}
.leftContent .content .list LI {
 CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 10px; BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/i1_1.gif) no-repeat 2px 7px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.leftContent .content .list LI SPAN {
 PADDING-RIGHT: 3px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; COLOR: #1f3a87; PADDING-TOP: 0px
}
.leftContent .content .list LI SPAN A {
 COLOR: #1f3a87
}
.leftContent .content .list LI SPAN A:visited {
 COLOR: #1f3a87
}
.leftContent .content .list LI SPAN A:hover {
 COLOR: #bc2931
}
.leftContent .content .list1 {
 CLEAR: both
}
.leftContent .content .list1 UL {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 9px
}
.leftContent .content .list1 LI {
 PADDING-RIGHT: 0px; PADDING-LEFT: 2px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.leftContent .content .list1 LI H6 {
 FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; MARGIN: 0px 2px 0px 0px; COLOR: #1f3a87
}
.leftContent .content .list1 LI H6 A {
 COLOR: #1f3a87
}
.leftContent .content .list1 LI H6 A:visited {
 COLOR: #1f3a87
}
.leftContent .content .list1 LI H6 A:hover {
 COLOR: #bc2931
}
.leftContent .content .more {
 CLEAR: both; HEIGHT: 18px
}
.leftContent .content .more SPAN {
 PADDING-RIGHT: 0px; PADDING-LEFT: 10px; BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg7.gif) #fff no-repeat 3px 7px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP: 4px
}
.leftContent .content .more A {
 COLOR: #1f3a87
}
.leftContent .content .more A:visited {
 COLOR: #1f3a87
}
.leftContent .content .more A:hover {
 COLOR: #bc2931
}
.leftContent .placeList {
 BORDER-RIGHT: #cbcbcb 1px solid; BORDER-TOP: #cbcbcb 1px solid; DISPLAY: none; BACKGROUND: #f2f6fb; LEFT: -128px; BORDER-LEFT: #cbcbcb 1px solid; WIDTH: 213px; BORDER-BOTTOM: #cbcbcb 1px solid; POSITION: absolute; TOP: 22px; HEIGHT: 190px
}
.leftContent .placeList .titleT {
 CLEAR: both; BACKGROUND: #a0aac8; BORDER-BOTTOM: #cbcbcb 1px solid; HEIGHT: 19px
}
.leftContent .placeList .titleT H5 {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: #fff; PADDING-TOP: 4px
}
.leftContent .placeList .contentT {
 CLEAR: both; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid
}
.leftContent .placeList .contentT UL {
 
}
.leftContent .placeList .contentT LI {
 BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 2px; WIDTH: 52px; PADDING-TOP: 4px; BORDER-BOTTOM: #fff 1px solid; LIST-STYLE-TYPE: none; HEIGHT: 14px
}
.leftLine {
 BORDER-BOTTOM: #cbcbcb 1px solid
}
.leftLine1 {
 CLEAR: both; FONT-SIZE: 1px; BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg6.gif); OVERFLOW: hidden; HEIGHT: 1px
}
.leftHeight1 {
 OVERFLOW: hidden; HEIGHT: 260px
}
.leftHeight2 {
 OVERFLOW: hidden; HEIGHT: 285px
}
.leftHeight3 {
 OVERFLOW: hidden; HEIGHT: 310px
}
.leftHeight4 {
 OVERFLOW: hidden; HEIGHT: 305px
}
.leftContent A {
 COLOR: #000
}
.leftContent A:hover {
 COLOR: #bc2931
}
.rightLine {
 BORDER-TOP: #cbcbcb 1px solid
}
.rightLine1 {
 BORDER-BOTTOM: #cbcbcb 1px solid
}
.rightLine2 {
 BORDER-TOP: #cbcbcb 1px solid
}
.rightTitle {
 CLEAR: both; BACKGROUND: #fff; MARGIN: 0px auto; WIDTH: 298px; BORDER-BOTTOM: #cbcbcb 1px solid; HEIGHT: 24px
}
.rightTitle H5 {
 PADDING-RIGHT: 0px; PADDING-LEFT: 8px; FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #1f3a87; PADDING-TOP: 7px
}
.rightTitle H6 {
 PADDING-RIGHT: 6px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP: 7px
}
.rightTitle A {
 COLOR: #1f3a87
}
.rightTitle A:visited {
 COLOR: #1f3a87
}
.rightTitle A:hover {
 COLOR: #bc2931
}
.rightTitle SPAN {
 PADDING-RIGHT: 8px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP: 7px
}
.rightTitle SPAN A {
 COLOR: #000
}
.rightTitle SPAN A:visited {
 COLOR: #000
}
.rightTitle SPAN A:hover {
 COLOR: #bc2931
}
.rightTitle .s {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
.rightContent {
 CLEAR: both
}
.rightContent .list {
 FLOAT: left; WIDTH: 150px
}
.rightContent .list UL {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 6px
}
.rightContent .list LI {
 CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 20px; BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/i1.gif) no-repeat 11px 7px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.rightContent .theText {
 CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 9px
}
.rightContent .list1 {
 CLEAR: both
}
.rightContent .list1 UL {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 6px
}
.rightContent .list1 LI {
 CLEAR: both; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.rightContent .list1 LI H6 {
 PADDING-RIGHT: 0px; PADDING-LEFT: 20px; FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/i1.gif) no-repeat 11px 7px; FLOAT: left; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
.rightContent .list1 LI SPAN {
 PADDING-RIGHT: 8px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP: 3px
}
.rightContent .picText {
 CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 9px; PADDING-BOTTOM: 0px; PADDING-TOP: 9px; TEXT-ALIGN: left
}
.rightContent .picText IMG {
 BORDER-RIGHT: #cbcbcb 1px solid; BORDER-TOP: #cbcbcb 1px solid; BORDER-LEFT: #cbcbcb 1px solid; BORDER-BOTTOM: #cbcbcb 1px solid
}
.rightContent .picText .pic {
 PADDING-RIGHT: 8px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 137px; PADDING-TOP: 0px
}
.rightContent .picText .textList {
 WIDTH: 280px
}
.rightContent .picText .textList UL {
 
}
.rightContent .picText .textList LI {
 CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 10px; BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/i1.gif) no-repeat 2px 7px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.rightContent .search {
 CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 11px; PADDING-BOTTOM: 0px; PADDING-TOP: 3px
}
.rightContent .search UL {
 
}
.rightContent .search LI {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.rightContent .search LI SELECT {
 FONT-SIZE: 12px
}
.rightContent .search .s1 {
 BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #999 1px solid; WIDTH: 80px; BORDER-BOTTOM: #999 1px solid; HEIGHT: 17px
}
.rightContent .search .s2 {
 BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/input_bg1.gif); BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; WIDTH: 54px; PADDING-TOP: 2px; HEIGHT: 20px; BORDER-RIGHT-WIDTH: 0px
}
</style>

<SCRIPT language=VBScript type=text/VBScript>
<!--
function menuover0(id1)
 dim ii
 for ii=0 to 1
 document.all("menu"&ii)(0).className="normalW2"
 document.all("menu"&ii)(1).style.display="none"
 next

document.all(id1)(0).className="activeW1"
 document.all(id1)(1).style.display=""
end function

function menuover1(id1)
 dim ii
 for ii=0 to 3
 document.all("menua"&ii)(0).className="normal"
 document.all("menua"&ii)(1).style.display="none"
 next

document.all(id1)(0).className="active"
 document.all(id1)(1).style.display=""
end function

function menuover2(id1)
 dim ii
 for ii=0 to 4
 document.all("menub"&ii)(0).className="normal"
 document.all("menub"&ii)(1).style.display="none"
 next

document.all(id1)(0).className="active"
 document.all(id1)(1).style.display=""
end function 

function menuover3(id1)
 dim ii
 for ii=0 to 4
 document.all("menuc"&ii)(0).className="normal"
 document.all("menuc"&ii)(1).style.display="none"
 next

document.all(id1)(0).className="active"
 document.all(id1)(1).style.display=""
end function
-->
</SCRIPT>
</HEAD>
<BODY>

<DIV class=area><!-- left -->
<DIV class=col1><!-- 娱乐 -->
<DIV class="leftContent leftHeight2">
<DIV class=menuA id=tabone>
<UL>
  <LI language=vbscript class=active id=menua0
  onmouseover='menuover1 "menua0"'><A href="http://16z.com/">巴洲</A> </LI>
  <LI language=vbscript class=normal id=menua1
  onmouseover='menuover1 "menua1"'><A href="http://16z.com/#">南江</A> </LI>
  <LI language=vbscript class=normal id=menua2
  onmouseover='menuover1 "menua2"'><A href="http://16z.com/#">通江</A> </LI>
  <LI language=vbscript class=normal id=menua3
  onmouseover='menuover1 "menua3"'><A href="http://16z.com/#">平昌</A>
</LI></UL></DIV>
<DIV class=content>
<DIV id=menua0><!--这里放入信息-->
000
</DIV>
<DIV id=menua1><!--这里放入信息-->
222
</DIV>
<DIV id=menua2><!--这里放入信息-->
333
</DIV>
<DIV id=menua3><!--这里放入信息-->
444
</DIV></DIV>
<DIV class=clear></DIV></DIV></DIV><!-- right -->
<DIV class=col2><!-- 分类信息 -->
<DIV class="rightTitle rightLine">
<H5><A href="http://classad.163.com/">test</A></H5><SPAN>888</SPAN>
</DIV>
<DIV class=rightContent>
<DIV class=theText>111</DIV>
</DIV></DIV>
<DIV class=clear></DIV></DIV>
<DIV class=lineH></DIV>
<DIV class=blank9></DIV><!-- 内容 -->
</BODY></HTML>

原文地址:https://www.cnblogs.com/MaxIE/p/645022.html