css 垂直導航和水平導航的設計

CSS設置導航欄

html文檔的導航欄，是網頁的重要組件之一，比如當前網頁的頂部的那個，可以使用HTML的無序列表來進行定義設計，當然，要設置成那樣的樣式，還需要使用到前端的框架。除此之外，網頁的導航一般包含在nav元素（語義標簽）之內。這一節介紹的導航欄包括垂直導航和水平導航，并通過CSS進行設置。

垂直導航欄

示例和在線編輯器：CSS 垂直導航和水平導航的設計 - CSS教程

實例代碼如下：

<ul id='u2'>
  <li>Python/ target=_blank class=infotextkey>Python</li>
  <li>CSS</li>
  <li>HTML</li>
  <li>JAVAScript</li>
  <li>golang</li>
</ul>
<style>
  #u2{list-style:none;padding-left:0px;background-color:rgb(239,239,239);width:20%;}
  #u2 li{padding-top:10px;padding-bottom:10px;text-align:center;}
  #u2 li:hover{background-color:skyblue;}
</style>

水平導航欄

相關的水平導航欄示例和在線編輯器同樣可參考上方的內容，其實例代碼如下：

<ul id='u3'>
  <li>首頁</li>
  <li>新聞</li>
  <li>體育</li>
  <li>娛樂</li>
  <li>電影</li>
  
</ul>
<style>
  #u3{list-style:none;padding-left:0px;border:1px solid skyblue;width:100%;height:50px;}
  #u3 li{display:inline-block;line-height:50px;text-align:center;width:10%;}
  #u3 li:hover{background-color:skyblue;}
</style>