背景自适应的圆角滑动门菜单

2024-09-05 12:19:43

字体：大中小

来源：转载

供稿：网友

一个使用圆角背景图片实现的JavaScript+css的圆角滑动门，优点是视觉感很好，缺点是使用了过多的背景图片，且固定了宽度，修改不是很方便，有需要的认真修改一下。

<!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=utf-8" /><title>背景自适应的圆角Tab</title><script language="javascript" type="text/javascript"></script><style type="text/css"></style></head><body><div id="details"><table cellspacing="0" cellpadding="0"><tr><td style="width:690px; height:65px; background:url(/jscss/demoimg/200905/bg_detailstop.gif) no-repeat center;"><h1>CSS+Js Tabs:</h1></td></tr><tr><td style="width:600px; height:auto; background:url(/jscss/demoimg/200905/bg_detailsmiddle.gif) repeat-y;"><div id="setTab"><ul class="menuBox">   <li id="one1" class="hover" onmouseover="setTab('one',1,4)" >这是什么？</li>   <li id="one2" onmouseover="setTab('one',2,4)" >CSS教程大全</li>   <li id="one3" onmouseover="setTab('one',3,4)">联系我们</li>   </ul><div class="detailBox">     <div id="con_one_1" >   <p>您现在访问的是武林网，有大量学习资料等着您，希望经常来转转。</p>   </div>   <div id="con_one_2" style="display:none">    <p>同时我们还为大家奉献精彩的CSS教程。   </div>   <div id="con_one_3" style="display:none">   <p>如果对我们有什么意见和建议，欢迎访问这里留言!</p>   </div></div></div></td></tr><tr><td style="width:690px; height:38px; background:url(/jscss/demoimg/200905//bg_detailsbottom.gif) no-repeat center;"></td></tr></table></div></body></html>

上一篇：CSS tab 选项卡(兼容好)

下一篇：CSS之漂亮区域链接构成的菜单