CSS——网易云音乐首页导航栏的制作

前言

       本文主要介绍了网易云导航栏的制作过程，这个案例中将会运用到CSS中的浮动、绝对定位等相关知识点（这些在以往的文章里有所介绍）

一、结构的布局

示例图

布局分析——

1. 首先，黑色导航栏的宽度应该是100%的，这样以防止在网页缩放时元素的位置会发生错位的现象。
2. 其次，导航栏的内部内容可以用一个大的结构包裹，给一个固定宽度的同时，使其在外部容器（黑色导航栏）中可以居中。
3. 再者就是内容方面的布局，（logo是采用了雪碧图的形式进行设置），将内容进行左右浮动以便确定具体位置，例如右侧搜索音乐区域，就可以利用右浮动固定其位置。

二、实现过程

1.HTML结构

代码如下（示例）：

<header>
        <!-- 头部导航条 -->
        <nav class="header-nav">
            <!-- 导航条内容器-->
            <div class="nav-outer">
                <!-- logo区域 -->
                <div id="logo"><a href="#"></a></div>
                <!-- 导航条详细信息 -->
                <ul class="user-list">
                    <li><a href="#">发现音乐</a></li>
                    <li><a href="#">我的音乐</a></li>
                    <li><a href="#">关注</a></li>
                    <li><a href="#">商城</a></li>
                    <li><a href="#">音乐人</a></li>
                    <li><a href="#">下载客户端</a></li>
                    <li class="hot"></li>
                </ul>
                <!-- 右侧搜索框以及用户登录区域 -->
                <ul class="right-list">
                    <li class="search-wrap">
                        <input type="search" placeholder="音乐/视频/电台/用户" οnfοcus="this.placeholder=''"
                            οnblur="this.placeholder='音乐/视频/电台/用户'">
                    </li>
                    <li>
                        <a href="#" id="maker">创作者中心</a>
                    </li>
                    <li class="login">
                        <a href="#">登录</a>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- 快速导航栏 -->
        <nav class="red-nav">
            <div class="inner">
                <ul>
                    <li>
                        <a href="#">推荐</a>
                    </li>
                    <li><a href="#">排行榜</a></li>
                    <li><a href="#">歌单</a><img src="./img/white-r-icon@3x.png" alt="" class="top-icon"></li>
                    <li><a href="#">主播电台</a></li>
                    <li><a href="#">歌手</a></li>
                    <li><a href="#">新碟上歌</a></li>
                </ul>
            </div>
        </nav>
    </header>

2.CSS样式

代码如下（示例）：

 <style>
        /* 导航条外部容器 */
        .header-nav {
            width: 100%;
            height: 70px;
            background-color: #242424;
        }

        .nav-outer {
            width: 1100px;
            height: 70px;
            line-height: 70px;
            margin: 0 auto;
        }

        /* logo区域 */
        #logo {
            float: left;
        }

        #logo>a {
            display: block;
            width: 157px;
            height: 69px;
            text-align: center;
            background-image: url(./img/topbar.png);
            background-position: 0px 0px;
            padding-right: 20px;
            color: #fff;
        }

        /* 导航条中部区域 */
        .user-list li {
            float: left;
        }

        .user-list li>a {
            display: inline-block;
            padding: 0 19px;
            color: #ccc;
            font: 14px Arial, Helvetica, sans-serif;
        }

        .user-list li:first-child,
        .user-list li:first-child>a {
            background-color: #000000;
            color: #fff;
        }

        .user-list li:hover {
            background-color: #000000;
        }

        .hot {
            margin-top: 22px;
            margin-left: -12px;
            width: 28px;
            height: 19px;
            background-image: url(./img/topbar.png);
            background-position: -190px 0;
        }

        /* 右侧搜索框区域 */
        .right-list {
            float: right;
        }

        .right-list li {
            float: left;
        }

        .search-wrap {
            width: 158px;
            height: 32px;
            line-height: 32px;
            background-image: url(./img/topbar.png);
            background-position: 0 -99px;
            background-color: #fff;
            border-radius: 32px;
            margin-top: 19px;
        }

        input {
            position: relative;
            width: 128px;
            height: 16px;
            outline: none;
            margin-left: 27px;
            top: -2px;
            border: none;
        }

        input::-webkit-input-placeholder {
            color: #9b9b9b;
            font: 12px Arial, Helvetica, sans-serif;
        }

        input:focus::-webkit-input-placeholder {
            content: ''
        }

        #maker {
            display: block;
            width: 90px;
            height: 32px;
            font-size: 12px;
            font: 12px Arial, Helvetica, sans-serif;
            margin: 19px 0 0 12px;
            box-sizing: border-box;
            padding-left: 16px;
            padding-top: 6px;
            border: 1px solid #4F4F4F;
            background-position: 0 -140px;
            color: #ccc;
            border-radius: 20px
        }

        #maker:hover {
            border-color: #ffffff;
            color: #ffffff;
        }

        .login {
            position: relative;
            top: -22px;
            width: 50px;
            height: 70px;
            margin: 19px 0 0 20px;
            padding: 0 22px 0 0;
        }

        .login>a {
            color: #787878;
            font: 12px Arial, Helvetica, sans-serif;
        }

        .login:hover a {
            text-decoration: underline;
            color: #999999;
        }

        /* 红色导航栏区域 */
        .red-nav {
            width: 100%;
            height: 35px;
            background-color: #c20c0c;
        }

        .inner {
            width: 920px;
            height: 34px;
            margin: 0 auto;
            padding-left: 180px;
        }

        .inner li {
            float: left;
            height: 34px;
        }

        .inner li>a {
            display: block;
            height: 16px;
            line-height: 17px;
            font: 12px Arial, Helvetica, sans-serif;
            color: #ffffff;
            margin: 5px 17px 0px;
            padding: 3px 13px 3px 13px;
        }

        .inner li:first-of-type a {
            background-color: #9b0909;
            border-radius: 20px;
        }

        .inner li:hover a {
            background-color: #9b0909;
            border-radius: 20px;
        }

        .top-icon {
            width: 8px;
            height: 8px;
            position: relative;
            left: 54px;
            top: -23px;
        }

        /* 轮播图区域样式 */
        .outer {
            position: relative;
            width: 100%;
            height: 285px;
        }

        .swiper-inner {
            position: relative;
            width: 984px;
            height: 285px;
            margin: 0 auto;
        }

        .swiper {
            width: 100%;
            height: 285px;
            overflow: hidden;
        }

        .swiper-wrapper>div>img {
            width: 730px;
            height: 285px;
        }

        .download-app {
            position: absolute;
            top: 0;
            left: 730px;
            width: 254px;
            height: 285px;
            background-image: url(./img/download.png);
            z-index: 20;
        }

        .download-app p {
            margin-top: 255px;
            color: #8d8d8d;
            text-align: center;
            font: 12px Arial, Helvetica, sans-serif;
        }
    </style>

总结

       以上就是今日的分享，希望可以帮助到你吧，另外，祝福看到这篇文章的人今天会有一个好心情（祝好运哦~）