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);
        }

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

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值