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

最新推荐文章于 2024-10-01 15:40:26 发布

原创最新推荐文章于 2024-10-01 15:40:26 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #class #div #float #url #border

code box 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种基于HTML、CSS和JavaScript实现的门户网站新闻版块切换效果，通过鼠标悬停来展示不同的新闻内容和图片。该效果适用于常见问题和业界动态等不同类型的新闻板块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述:

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

效果图:

HTML:

<div class="box2 greenborder"> <div class="hd"> <ul> <li><a href="#" mce_href="#" title="" class="cur" id="one1" onmouseover="setTab('one',1,2)">常见问题</a></li> <li><a href="#" mce_href="#" title="" id="one2" onmouseover="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" onmouseover="setTab('two',1,2)">常见问题</a></li> <li><a href="#" mce_href="#" title="" id="two2" onmouseover="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>

CSS:

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

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

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