导航-角

<!DOCTYPE html>
<html lang="en-US"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>农合联盟</title>
<link href="css/style.css" rel="stylesheet"/>
<link href="css/common.css" rel="stylesheet"/>
<script src="js/nhlm.js" type="text/javascript"/></script>
</head>
<body>

<div class="part_news">

    <div class="tab_title1">

            <ul id="tab_title" class="tabstyle1">

                    <li><a class="on" style="color: rgb(255, 255, 255);" href="javascript:void(0)" title="" class="">农产品流通</a></li>
                    <li><a style="color: rgb(101, 156, 10);" href="javascript:void(0)" title="">农村金融</a></li>
                    <li><a class="" style="color: rgb(101, 156, 10);" href="javascript:void(0)" title="">乡村社区</a></li>
                    <li><a class="" style="color: rgb(101, 156, 10);" href="javascript:void(0)" title="">农技推广</a></li>

            </ul>

    </div>

</div>

</body></html>

*{padding:0; margin:0; }
a{text-decoration:none;}
img{border:0;}
ul,li{list-style:none;}
input,select{outline:none;}
html{background:url(../images/html_bg.png) repeat-x top center #f8f6dd;}
body{font-size:12px; background:url(../images/headBg.jpg) no-repeat top center;}
.clear:after{content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clear{display: inline-block;}

/*农产品流通样式*/
.part_news{
overflow:hidden; 577px;

height:281px;
margin:0 auto;
}
.newsContent{ 577px; }
.tab_title1{background: #fff; overflow: hidden; zoom:1; clear: both; }
.part_news .tab_title1 ul{overflow:hidden;
background-image:url(../images/second_nav.png);
float:left; height: 29px;}
.tabstyle1{background-position: 0 0;}
.tabstyle2{background-position: 0 -30px;}
.tabstyle3{background-position: 0 -60px;}
.tabstyle4{background-position: 0 -92px;}
#tab_title li a.on{color:#fff;}
.tab_title1 ul li{float:left; text-align:center; 109px; height:29px;}
.tab_title1 ul li a{color:#659c0a; font:bold 14px/29px '宋体';}

.news{border:1px solid #ccc; background:#F99; 575px; height:247px; margin-top:2px; overflow: hidden; }
.newsList{9999px; height:247px; overflow: hidden;}
.newsList .lists{float:left; 577px; overflow: hidden;}

function $$(id){
return document.getElementById(id);
}

// tab切换键
function tabChange(tabId,contentId,label,width){
var a = $$(tabId);
var b = a.getElementsByTagName(label);
var len = b.length;
a.onmouseover = function(e){
  var e = e || window.event;
  var target = e.target || e.srcElement;
  if(target.tagName != "A") return;
  for(var i = 0;i < len;i ++){
   if(target == b[i]){
    a.className = 'tabstyle' + (i + 1);
    target.style.color = "#fff";
    b[i].className = "on";
    $$(contentId).style.marginLeft = - width * i +"px";
    continue;
   }
   b[i].style.color = "#659c0a";
   b[i].className = "";
  }
}
}