WEB前端跨行变色导航栏的实现

学习前端必不可少的就是网页导航栏的制作，而跨行变色导航栏可谓是使得新手小白快速学会如何布局页面导航的入门实操之一，今天在此分析一份我在初学前端接触导航栏实现时的一个小作品。其最终实现样式如下图所示：

HTML代码如下：

 <div class="background">
      <div class="app">
          <div class="label">新闻APP</div>
          <div class="label">体育APP</div>
          <div class="label">企鹅号</div>
          <div class="label">快报</div>
          <div class="label">视频</div>
          <div class="label">浏览器</div>
          <div class="label">微视</div>
          <div class="photoone"></div>
      </div>
      <div class="social">
        <div class="label">微信</div>
        <div class="label">QQ</div>
        <div class="label">空间</div>
        <div class="label">企业微信</div>
        <div class="label">邮箱</div>
        <div class="label">腾讯云</div>
        <div class="label">电脑管家</div>
        <div class="label">会员</div>
        <div class="phototwo"></div>
      </div>
      <div class="play">
        <div class="label">LOL</div>
        <div class="label">DNF</div>
        <div class="label">CF</div>
        <div class="label">王者</div>
        <div class="label">点机游戏</div>
        <div class="label">火影OL</div>
        <div class="label">天刀</div>
        <div class="label">爱玩</div>
        <div class="label">逆战</div>
        <div class="phototree"></div>
      </div>
      <div class="life">
        <div class="label">软件</div>
        <div class="label">Q币</div>
        <div class="label">京东</div>
        <div class="label">腾讯地图</div>
        <div class="label">腾讯文档</div>
        <div class="label">理财通</div>
        <div class="label">全部</div>
        <div class="photofour"></div>
      </div>
    </div>

CSS代码如下：

 /* 背景设置 */
        .background{
        height: 163px;
        width: 580px;
        box-shadow: 0px 0px 10px 1px rgb(188, 218, 243);
        position: absolute;
        margin: auto;
        border-radius: 10px;
         }
        /* app应用栏 */
        .app{
        height: 40px;
        width: 580px;
        border: 1px solid rgb(194, 195, 196);
        box-sizing: border-box;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        }
        /* 社交工具栏 */
        .social{
        height: 40px;
        width: 100%;
        border: 1px solid rgb(149, 198, 241);
        box-sizing: border-box;
        background-color: rgb(224, 236, 247);
        }
        /* 游戏工具栏 */
        .play{
        height: 40px;
        width: 100%;
        border: 1px solid rgb(194, 195, 196);
        box-sizing: border-box;
        }
        /* 生活办公 */
        .life{
        height: 40px;
        width: 100%;
        border: 1px solid rgb(149, 198, 241);
        box-sizing: border-box;
        background-color: rgb(224, 236, 247);
       border-bottom-left-radius: 10px;
       border-bottom-right-radius: 10px;
        }
       /* 应用项目 */
        .label{
        padding: 7px 7px;
        font-size: 16px;
        margin-left: 5px;
        float: left;
        text-align: center;
        }
        /* 图标1 */
        .photoone{
        width: 36px;
        height: 36px;
        float: right;
        background-image: url('./images/icons.png');
        background-position: -10px -290px;
        }
        /* 图标2 */
        .phototwo{
        width: 36px;
        height: 36px;
        float: right;
        background-image: url('./images/icons.png');
        background-position: -10px -338px;
        }
        /* 图标3 */
        .phototree{
        width: 36px;
        height: 36px;
        float: right;
        background-image: url('./images/icons.png');
        background-position: -10px -386px;
        }
        /* 图标4 */
        .photofour{
            width: 36px;
        height: 36px;
        float: right;
        background-image: url('./images/icons.png');
        background-position: -10px -439px;
        }
        .label:hover{
            color: rgb(52, 150, 236);
        }

此处分享为本人初入前端时练习的代码，很多地方显得稚嫩，旨在保留当时个人对前端的学习历程。