css 垂直導(dǎo)航和水平導(dǎo)航的設(shè)計(jì)

CSS設(shè)置導(dǎo)航欄

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

垂直導(dǎo)航欄

示例和在線編輯器：CSS 垂直導(dǎo)航和水平導(dǎo)航的設(shè)計(jì) - CSS教程

實(shí)例代碼如下：

<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>

水平導(dǎo)航欄

相關(guān)的水平導(dǎo)航欄示例和在線編輯器同樣可參考上方的內(nèi)容，其實(shí)例代碼如下：

<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>