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>
  • 相关阅读:
    Windows2003 Webshell默认权限
    Windows安装Centos7双系统后Windows启动项消失
    GCC编译流程及常用编辑命令
    swoole的websockte例子
    PhpStorm 增加Swoole智能提示
    Centos7/RHEL 7 配置静态路由
    webpack介绍和使用
    Webpack中的sourcemap以及如何在生产和开发环境中合理的设置
    什么是 PWA
    php实现excel单元格合并，字体加粗居中等操作
  • 原文地址：https://www.cnblogs.com/MaxIE/p/645022.html
Copyright © 2011-2022 走看看