首頁 > 開發者 > CSS

幾種css橫向和縱嚮導航

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

橫向：

 

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#nav { height:26px; border-bottom:2px solid #2788da; list-style:none;}
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
</head>
<body>
  <ul id="nav">
    <li><a id="current" href="/index.asp">首頁</a></li>
    <li><a href="/Sort/List_4.html">DIV+CSS教程</a></li>
    <li><a href="/Sort/List_5.html">常用代碼</a></li>
    <li><a href="/Sort/List_6.html">水晶表徵圖</a></li>
    <li><a href="/Sort/List_7.html">幻燈圖片</a></li>
    <li><a href="/Sort/List_10.html">軟體下載</a></li>
    <li><a href="/css2/">CSS2.0實用手冊</a></li>
  </ul>
</body>
</html>

 

 

 

 

縱向：<!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>
#nav { width:100px; border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;}
#nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;}
#nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;}
#nav h2 a { color:#666666; text-decoration:none;}
#nav h2 a:hover { color:#999999; text-decoration:underline;}

</style>
</head>

<body>
<div id="nav">
 <h1>CSS</h1>
  <h2><a href="#">css入門</a></h2>
  <h2><a href="#">css進階</a></h2>
  <h2><a href="#">css進階</a></h2>
 <h1>webUI</h1>
  <h2><a href="#">理論知識</a></h2>
  <h2><a href="#">實戰應用</a></h2>
  <h2><a href="#">進階技巧</a></h2>
 <h1>DOM</h1>
  <h2><a href="#">DOM入門</a></h2>
  <h2><a href="#">DOM應用</a></h2>
  <h2><a href="#">DOM與瀏覽器</a></h2>
 <h1>XHTML</h1>
  <h2><a href="#">參考手冊</a></h2>
  <h2><a href="#">交流論壇</a></h2>
</div>
</body>
</html>

 

 

下拉：

<!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>下拉及多級彈出式菜單www.aa25.cn</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
 if (document.all&&document.getElementById) {
  navRoot = document.getElementById("nav");
  for (i=0; i<navRoot.childNodes.length; i++) {
   node = navRoot.childNodes[i];
   if (node.nodeName=="LI") {
    node.onmouseover=function() {
     this.className+=" over";
    }
    node.onmouseout=function() {
     this.className=this.className.replace(" over", "");
    }
   }
  }
 }
}
window.onload=startList;

//--><!]]></script>
<style>
ul { padding:0; margin:0; list-style:none;}
li { float:left; width:100px;}
ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;}
ul li a:hover { background-color:#ddd;}
li ul { display:none; top:20px;}
li:hover ul,li.over ul { display:block;}
</style>
</head>

<body>
<ul id="nav">
 <li><a href="">文章</a>
  <ul>
   <li><a href="">CSS教程</a></li>
   <li><a href="">DOM教程</a></li>
   <li><a href="">XML教程</a></li>
   <li><a href="">FLASH教程</a></li>
  </ul>
 </li>
 <li><a href="">參考</a>
  <ul>
   <li><a href="">XHTML</a></li>
   <li><a href="">XML</a></li>
   <li><a href="">CSS</a></li>
  </ul>
 </li>
 <li><a href="">BLOG</a>
  <ul>
   <li><a href="">全部</a></li>
   <li><a href="">網頁技術</a></li>
   <li><a href="">UI技術</a></li>
   <li><a href="">FLASH技術</a></li>
  </ul>
 </li>
</ul>
<ul>
 <li><a href="">搖滾</a></li>
 <li><a href="">純音樂</a></li>
 <li><a href="">古典金曲</a></li>
 <li><a href="">電影原聲</a></li>
</ul>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More