CSS 垂直导航和水平导航的设计

CSS设置导航栏

HTML文档的导航栏，是网页的重要组件之一，比如当前网页的顶部的那个，可以使用HTML的无序列表来进行定义设计，当然，要设置成那样的样式，还需要使用到前端的框架。除此之外，网页的导航一般包含在nav元素（语义标签）之内。这一节介绍的导航栏包括垂直导航和水平导航，并通过CSS进行设置。

---

垂直导航栏

如下示例：

• Python
• CSS
• HTML
• JavaScript
• golang

实现如上垂直导航栏的实例的CSS代码如下：

<ul id='u2'>
  <li>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>

试一试

水平导航栏

如下示例：

• 首页
• 新闻
• 体育
• 娱乐
• 电影

上方水平导航栏实例的CSS代码：

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

试一试