CSS_新闻版块_常用新闻版块1

描述:

门户网站常见的那种新闻版块,根据不同的标题显示不同的信息内容

效果图:

 

HTML:

<div class="box2 greenborder"><div class="hd"><ul><li><a href="#" mce_href="#" title="" class="cur" id="one1" οnmοuseοver="setTab('one',1,2)">常见问题</a></li><li><a href="#" mce_href="#" title="" id="one2" οnmοuseοver="setTab('one',2,2)">业界动态</a></li></ul></div><div class="bd"><div class="switchbox" id="con_one_1"><div class="picbox"><img src="images/img1.jpg" mce_src="images/img1.jpg" alt="" /></div><ul class="m1"><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li></ul></div><div class="switchbox" id="con_one_2" style=" display:none" mce_style=" display:none"><div class="picbox"><img src="images/img2.jpg" mce_src="images/img2.jpg" alt="" /></div><ul class="m1"><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li></ul></div></div></div><div class="box2 greenborder"><div class="hd"><ul><li><a href="#" mce_href="#" title="" class="cur" id="two1" οnmοuseοver="setTab('two',1,2)">常见问题</a></li><li><a href="#" mce_href="#" title="" id="two2" οnmοuseοver="setTab('two',2,2)">业界动态</a></li></ul></div><div class="bd"><div class="switchbox" id="con_two_1"><div class="picbox"><img src="images/img1.jpg" mce_src="images/img1.jpg" alt="" /></div><ul class="m1"><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li></ul></div><div class="switchbox" id="con_two_2" style=" display:none" mce_style=" display:none"><div class="picbox"><img src="images/img2.jpg" mce_src="images/img2.jpg" alt="" /></div><ul class="m1"><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li><li><a href="#" mce_href="#" title="">新闻新闻新闻新闻新闻新闻新闻</a></li></ul></div></div></div><br />

CSS:

/*simple reset*/<br /> * { margin:0 ; padding:0;}<br /> ul , ul li { list-style:none;}<br /> a { text-decoration:none;}<br /> /*版块内新闻列表的样式*/<br /> ul.m1 li {padding-left:35px;height:30px; line-height:30px;background:url(images/arr.png) no-repeat 10px center;}<br /> ul.m1 li a { color:#333333; font-size:12px;}<br /> ul.m1 li a:hover { text-decoration:underline;}/* 绿色边框的公共样式 */<br /> .greenborder { border:1px solid #6FDA32;}/*定义版块的大小*/<br /> .box2 { margin-bottom:10px; width:345px; height:198px;}<br /> /*版块的标题部分(!!因为已经设置了边框色,则背景图片只取包含下边绿色线)*/<br /> .box2 .hd {width:345px; height:28px;background:url(images/bg3.png) repeat-x;}<br /> .box2 .hd ul , .box2 .hd ul li { float:left;}<br /> /*两个标题浮动,定宽*/<br /> .box2 .hd ul li a{float:left;width:97px; height:28px; line-height:28px; overflow:hidden;border-right:1px solid #70DA32;color:#0F7217; font-size:14px; text-align:center;}<br /> .box2 .hd ul li a.cur { background:url(images/bg4.png) repeat-x; font-weight:bold;}<br /> /*版块的内容部分*/<br /> .box2 .bd {padding:20px 10px 10px 10px;width:325px; height:138px; overflow:hidden;}<br /> /*不同标题显示的不同信息的设置*/<br /> .box2 .switchbox img { float:left;}<br /> .box2 .switchbox .picbox { float:left; width:116px; height:132px; overflow:hidden;}<br /> .box2 .switchbox ul { float:left; margin-top:-13px; height:147px; overflow:hidden;}<br /> .box2 .switchbox ul li { padding-left:25px; height:30px; line-height:30px;}

JS: 很简单,不写注释了吧

function setTab(name,cursel,n){<br /> for(i=1;i<=n;i++){<br /> var menu=document.getElementById(name+i);<br /> var con=document.getElementById("con_"+name+"_"+i);<br /> menu.className=i==cursel?"cur":"";<br /> con.style.display=i==cursel?"block":"none";<br /> }<br /> }<br />