Heim > Web-Frontend > HTML-Tutorial > 简单树形菜单_html/css_WEB-ITnose

简单树形菜单_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:34:28
Original
1508 Leute haben es durchsucht

<!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=gb2312" /><title>制作简单的树形菜单</title><style type="text/css">body{font-size:13px;     line-height:20px;     }a{font-size: 13px;  color: #000000;  text-decoration: none;  }a:hover{font-size:13px;       color: #ff0000;       }img {    vertical-align: middle;    border:0;    list-style-type: none;}.no_circle{list-style-type:none;  /*设置列表项标志的类型为无*/   display:none;    }</style><script  type="text/javascript">function show(){if(document.getElementById("art").style.display=='block'){    document.getElementById("art").style.display='none';      //触动的ul如果处于显示状态,即隐藏 }else{    document.getElementById("art").style.display='block';      //触动的ul如果处于隐藏状态,即显示   }}function show2(){if(document.getElementById("tietu").style.display=='block'){    document.getElementById("tietu").style.display='none';      //触动的ul如果处于显示状态,即隐藏 }else{    document.getElementById("tietu").style.display='block';      //触动的ul如果处于隐藏状态,即显示   }}function show3(){if(document.getElementById("fangchan").style.display=='block'){    document.getElementById("fangchan").style.display='none';      //触动的ul如果处于显示状态,即隐藏 }else{    document.getElementById("fangchan").style.display='block';      //触动的ul如果处于隐藏状态,即显示   }}function show4(){if(document.getElementById("yule").style.display=='block'){    document.getElementById("yule").style.display='none';      //触动的ul如果处于显示状态,即隐藏 }else{    document.getElementById("yule").style.display='block';      //触动的ul如果处于隐藏状态,即显示   }}</script></head><body><b><img  src="images/fold.gif" alt="简单树形菜单_html/css_WEB-ITnose" ><font color="#009900">树形菜单:</font></b>  <a href="javascript:onclick=show() "><img  src="images/fclose.gif" alt="简单树形菜单_html/css_WEB-ITnose" >文学艺术</a>        <ul id="art" class="no_circle">            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >先锋写作</li>           <li> <img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >小说散文</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >诗风词韵</li>         </ul>        <a href="javascript:onclick=show2() ">          <img  src="images/fclose.gif" alt="简单树形菜单_html/css_WEB-ITnose" >贴图专区</a>        <ul id="tietu" class="no_circle">            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >真我风采</li>           <li> <img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >视屏贴图</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >行行摄摄</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >Flash贴图</li>         </ul>             <a href="javascript:onclick=show3() ">          <img  src="images/fclose.gif" alt="简单树形菜单_html/css_WEB-ITnose" >房产论坛</a>        <ul id="fangchan" class="no_circle">            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >我要买房</li>           <li> <img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >楼市话题</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >我要卖房</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >租房心语</li>            <img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >二手市场</li>         </ul>                    <a href="javascript:onclick=show4() ">          <img  src="images/fclose.gif" alt="简单树形菜单_html/css_WEB-ITnose" >娱乐八卦</a>        <ul id="yule" class="no_circle">            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >红楼一梦</li>           <li> <img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >楼市话题</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >笑话论坛</li>            <li><img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >休闲生活</li>            <img  src="images/doc.gif"  alt="简单树形菜单_html/css_WEB-ITnose" >大话春秋</li>         </ul>              </body></html>
Nach dem Login kopieren

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage