zoukankan      html  css  js  c++  java

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

    <!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>
  • 相关阅读:
    POJ 3630 Phone List/POJ 1056 【字典树】
    HDU 1074 Doing Homework【状态压缩DP】
    POJ 1077 Eight【八数码问题】
    状态压缩 POJ 1185 炮兵阵地【状态压缩DP】
    POJ 1806 Manhattan 2025
    POJ 3667 Hotel【经典的线段树】
    状态压缩 POJ 3254 Corn Fields【dp 状态压缩】
    ZOJ 3468 Dice War【PD求概率】
    POJ 2479 Maximum sum【求两个不重叠的连续子串的最大和】
    POJ 3735 Training little cats【矩阵的快速求幂】
  • 原文地址：https://www.cnblogs.com/MaxIE/p/645022.html
Copyright © 2011-2022 走看看