day13—CSS之导航栏

转行学开发，代码100天——2018-03-29

 

见过这么多网页，没有导航栏的几乎没见过。因此，对导航栏的练习非常之必要。

导航栏的实现，基本上都是通过链接列表实现，即ul->li->a标签的使用，通过CSS样式控制垂直导航或者水平导航。

 <ul>
      <li><a href="#1">导航1</a></li>
      <li><a href="#1">导航1</a></li>
      <li><a href="#1">导航1</a></li>
  </ul>

改导航栏保留基本样式，一般为了美观需要重写设置其样式。

基本步骤：

1.去除a标签的下划线，ul,li标签的圆点标签，去除页面边距等

       *{
            margin: 0px;
            padding: 0px;
        }
        li
        {
            list-style:none;
        }
        a{
            text-decoration: none;
        }

2.增加a标签内容样式，字体，背景颜色，边距，行高，居中等；ul，li标签的背景颜色，边距等

a: font-size；background-color；margin；line-height；text-align

li: width,height,background-color;margin;display

因为本例中同时创建了垂直导航和水平导航，所以在li中需要区别对待，水平导航需要设置inline,float

 

3.标签操作美化，主要针对边框，鼠标移动样式

案例中边框可设置圆角，a标签可增加:hover样式以增加用户体验。

4.CSS内容优化-OOCSS

如果仅是普通的样式要求，至此可以说基本上完成了导航栏标签的样式设置。

但是实际应用中，往往网站的内容很多，样式设置远比这些复杂，因此样式中会产生大量重复样式，造成文件占用资源较多。

鉴于今天学习了OOCSS，也就是面向对象的CSS样式，特对文中样式进行了优化。避免大量重复样式的编写。

<style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        ul{
            list-style: none;
            background-color: #f1f1f1;
        }

        li,a
        {
            display: block;
            color: #000;
            text-decoration: none;
            width: 100px;
            height: 50px;
            font-size: 16px;
            line-height: 50px;
            text-align: center;
        }
        li
        {
            margin-right: 10px;
        }
        
        li,a:hover
        {
            background-color: #555;
            border-radius: 8px;
        }

        #Vnav li
        {
            display: block;
            margin-top: 10px;
            margin-left: 10px;
            background-color: #f1f1f1;
        }
    
        #Hnav li
        {
            display: inline;
            background-color: #ccc;
            float: left;
        }
        
    </style>

优化之后较之前的CSS内容，减少了很多，看起来也更加清爽。最后呈现的效果如下：

对于OOCSS,简单地说，需要注意以下几点：