今天完成的事情：

   今天学习了css导航栏
明天计划的事情：

   接着往下边做任务
遇到的问题：

   一开始不知道思路，不知道要做什么，什么都不想做，通过查资料了解了之后才有了做下去的兴趣 
收获：

CSS 导航栏

导航栏

熟练使用导航栏，对于任何网站都非常重要。

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。

导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的

。在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：

<ul>

  <li><a href="#home">主页</a></li>

  <li><a href="#news">新闻</a></li>

  <li><a href="#contact">联系</a></li>

  <li><a href="#about">关于</a></li>

</ul>

list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记

移除浏览器的默认设置将边距和填充设置为0

上面的例子中的代码是垂直和水平导航栏使用的标准代码。

垂直导航栏

上面的代码，我们只需要 <a>元素的样式，建立一个垂直的导航栏：

实例

a

{

    display:block;

    width:60px;

}

display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度

width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

创建链接并添加边框

可以在 <li> or <a> 上添加text-align:center 样式来让链接居中。

可以在 border <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom :

实例

ul {

    border: 1px solid #555;

}

li {

    text-align: center;

    border-bottom: 1px solid #555;

}

li:last-child {

    border-bottom: none;

}

链接右对齐

将导航条最右边的选项设置右对齐 (float:right;)：

实例

<ul>

  <li><a href="#home">主页</a></li>

  <li><a href="#news">新闻</a></li>

  <li><a href="#contact">联系</a></li>

  <li style="float:right"><a href="#about">关于</a></li>

</ul>

添加分割线

<li> 通过 border-right 样式来添加分割线:

实例

/* 除了最后一个选项(last-child) 其他的都添加分割线 */

li {

    border-right: 1px solid #bbb;

}

li:last-child {

    border-right: none;

}