CSS 垂直导航和水平导航的设计实例代码

CSS设置导航栏

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

垂直导航栏

示例和在线编辑器：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>

水平导航栏

相关的水平导航栏示例和在线编辑器同样可参考上方的内容，其实例代码如下：

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

笨鸟工具