列表、排行专用的灰、红滑动门菜单

2024-09-05 12:19:55

字体：大中小

来源：转载

供稿：网友

专用于列表、排行的红灰色调的网页滑动门，灰色、红色的颜色搭配，视觉舒服。直接复制到你的网页中就可以用，非常方便。

<!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>滑动门</title><script type="text/javascript"></script><style type="text/css">* { margin:0; padding:0; word-break:break-all; }body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }h1, h2, h3, h4, h5, h6 { font-size:1em; }a { color:#333; text-decoration:none; } a:hover { text-decoration:underline; }ul, li { list-style:none; }fieldset, img { border:none; }#hotnews { width:300px; margin:100px; } #hotnews_caption { width:300px; overflow:hidden; border-bottom:3px solid #C2130E; }   #hotnews_caption ul { float:right; }    #hotnews_caption ul li { float:left; border-left:1px solid #FFF; width:50px; line-height:25px; text-align:center; cursor:pointer; }    #hotnews_caption .normal { background:#CCC; }    #hotnews_caption .current{ background:#C2130E; color:#FFF; }  #hotnews_content {}   #hotnews_content .normal { display:none; }    #hotnews_content .current { display:block; }    #hotnews_content ul { padding:8px 0 0 5px; }    #hotnews_content ul li a { font-size:14px; }</style><script type="text/javascript">function secBoard(elementID,listName,n) { var elem = document.getElementById(elementID); var elemlist = elem.getElementsByTagName("li"); for (var i=0; i<elemlist.length; i++) {  elemlist[i].className = "normal";  var m = i+1;  document.getElementById(listName+"_"+m).className = "normal"; }  elemlist[n-1].className = "current";  document.getElementById(listName+"_"+n).className = "current";}</script></head><body><div id="hotnews">  <div id="hotnews_caption">    <ul>      <li class="current" onmousemove="secBoard('hotnews_caption','list',1);">首页</li>      <li class="normal" onmousemove="secBoard('hotnews_caption','list',2);">排行</li>      <li class="normal" onmousemove="secBoard('hotnews_caption','list',3);">最新</li>      <li class="normal" onmousemove="secBoard('hotnews_caption','list',4);">热点</li>    </ul>  </div>  <div id="hotnews_content">    <div class="current" id="list_1">     <ul>       <li>淘特 AspCms v5.5 SP1</li><li>C9 ASP静态文章系统 v2.0.1</li><li>TacodEmp ASP企业网站系统 v1.3</li>      </ul>       </div>    <div class="normal" id="list_2">     <ul>       <li>良精公司企业网站系统ASP开源版 v1.0</li><li>露珠ASP个人站程序 v3.21</li><li>最新ACCESS版纯真IP数据库附ASP查询程序</li></li>      </ul>    </div>    <div class="normal" id="list_3">     <ul>       <li>愚人笔记ASP文章动态版 V4.0</li><li>QvodCMS视频点播专家 ASP v2.2</li><li>雷风HTML影视系统ASP版带采集 v1.1</li>      </ul>    </div>    <div class="normal" id="list_4">     <ul>       <li>网趣ASP购物系统时尚版 v9.2</li><li>QJblog ASP版多用户博客 v1.0</li><li>Pcook CMS 泡客静态文章系统（带采集） v3.0</li>      </ul>    </div>  </div></div></body></html>

上一篇：非常大气漂亮的CSS导航栏

下一篇：很棒的自定义CSS下拉菜单