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,简单地说，须要注意如下几点：