当前位置： 首页 > article >正文

12.[前端开发]Day12-HTML+CSS阶段练习(网易云音乐一)

article 2025/2/5 12:36:00

网易云音乐 (163.com)

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云的top</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .top {
      height: 70px;
      background-color: #242424;
      box-sizing: border-box;
      border-bottom: 1px solid #000;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      height: 69px;
      line-height: 69px;
    }

    .topbar .bar-left {
      display: flex;
    }

    .topbar .bar-left .logo {
      background-image: url(./images/topbar_sprite.png);
    }

    .topbar .bar-left .logo a {
      display: block;
      width: 157px;
      padding-right: 20px;
      text-indent: -9999px;
    }

    .topbar .bar-left .list {
      display: flex;
    }

    .topbar .bar-left .list .item {
      position: relative;
      display: block;
      padding: 0 20px;
      font-size: 14px;
      color: #ccc;
    }

    .topbar .bar-left .list .item:hover,
    .topbar .bar-left .list .item.active {
      color: #fff;
      background-color: #000;
    }

    .topbar .bar-left .list .item.active::after {
      content: "";
      position: absolute;
      width: 12px;
      height: 7px;
      bottom: -2px;
      left: 0;
      right: 0;
      margin: 0 auto;
      background: url(./images/topbar_sprite.png) -226px 0;
    }

    .topbar .bar-left .list .item .icon-hot {
      position: absolute;
      top: 14px;
      right: -18px;
      /* width: 28px;
      height: 19px; */
      /* background: url(./images/topbar_sprite.png) -190px 0; */
    }

    /* 布局右侧 */
    .topbar .bar-right {
      display: flex;
      align-items: center;
      padding-right: 20px;
    }

    .topbar .bar-right .login a {
      color: #787878;
    }

    .topbar .bar-right .login:hover a {
      color: #ccc;
    }

    .topbar .bar-right .login a:hover {
      color: #787878;
      text-decoration: underline;
    }

    .topbar .bar-right .anthor a {
      display: inline-block;
      width: 90px;
      height: 32px;
      margin: 0 20px;
      line-height: 32px;
      color: #ccc;
      text-align: center;
      box-sizing: border-box;
      border: 1px solid #4F4F4F;
      border-radius: 20px;
    }

    .topbar .bar-right .anthor a:hover {
      color: #fff;
      border-color: #fff;
    }

    .topbar .bar-right .search {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 158px;
      height: 32px;
      box-sizing: border-box;
      padding-right: 10px;
      border-radius: 30px;
      background: #fff url(./images/topbar_sprite.png) 0 -99px;
    }

    .topbar .bar-right .search input {
      font-size: 12px;
      width: 118px;
    }

    /* .topbar .bar-right .search input::-webkit-input-placeholder {
      color: #f00;
    } */

    /* topnav */
    .nav {
      height: 35px;
      line-height: 35px;
      background-color: #C20C0C;
      box-sizing: border-box;
      border-bottom: 1px solid #a40011;
    }

    .navbar {
      box-sizing: border-box;
      padding-left: 180px;
    }

    .navbar .list {
      display: flex;
    }

    .navbar .list .item {
      display: inline-block;
    }

    .navbar .list .item span {
      display: inline-block;
      padding: 0 13px;
      margin: 7px 17px;
      height: 20px;
      line-height: 21px;
      color: #fff;
      border-radius: 20px;
    }

    .navbar .list .item:hover span,
    .navbar .list .item.active span {
      background-color: #9B0909;
    }
  </style>
</head>
<body>

  <div class="top">
    <div class="topbar wrapper_01">
      <div class="bar-left">
        <h1 class="logo">
          <a href="#">网易云音乐</a>
        </h1>
        <ul class="list">
          <li><a href="#" class="item active">发现音乐</a></li>
          <li><a href="#" class="item">我的音乐</a></li>
          <li><a href="#" class="item">关注</a></li>
          <li><a href="#" class="item">商城</a></li>
          <li><a href="#" class="item">音乐人</a></li>
          <li>
            <a href="#" class="item">
              下载客户端
              <i class="topbar_sprite topbar_icon_hot icon-hot"></i>
            </a>
          </li>
        </ul>
      </div>
      <div class="bar-right">
        <div class="search">
          <input type="text" placeholder="音乐/视频/电台/用户">
        </div>
        <div class="anthor">
          <a href="#">创作者中心</a>
        </div>
        <div class="login">
          <a href="#">登录</a>
        </div>
      </div>
    </div>
  </div>

  <div class="nav">
    <div class="navbar wrapper_01">
      <!-- 如果block元素中是没有内容, 那么line-height继承过来也是不生效 -->
      <!-- ul>(li>a[href=#].item)*6 -->
      <ul class="list">
        <li><a href="#" class="item active"><span>推荐</span></a></li>
        <li><a href="#" class="item"><span>排行榜</span></a></li>
        <li><a href="#" class="item"><span>歌单</span></a></li>
        <li><a href="#" class="item"><span>主播电台</span></a></li>
        <li><a href="#" class="item"><span>歌手</span></a></li>
        <li><a href="#" class="item"><span>新碟上架</span></a></li>
      </ul>
    </div>
  </div>

</body>
</html>

body {
  font: 12px Arial, Helvetica, sans-serif;
}

.wrapper_01 {
  width: 1100px;
  margin: 0 auto;
}

.wrapper_02 {
  width: 980px;
  margin: 0 auto;
}

.wrapper_03 {
  width: 982px;
  margin: 0 auto;
}

.topbar_sprite {
  display: inline-block;
  background-image: url(../images/topbar_sprite.png);
}

.topbar_icon_hot {
  width: 28px;
  height: 19px;
  background-position: -190px 0;
}


body, h1, h2, h3, ul, li, p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000;
  outline: none;
}

ul, li {
  list-style: none;
}

input {
  outline: none;
  border: none;
}

img {
  vertical-align: top;
}


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云-轮播图</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .banner {
      background: url(./images/banner_bg_02.jpeg) center center / 6000px;
    }

    .banner .area {
      position: relative;
      height: 285px;
      background-color: orange;
    }

    .banner .area .area-left {
      position: relative;
      width: 730px;
    }

    /* 图片列表 */
    .banner .area-left .img-list {
      display: flex;
      overflow: hidden;
    }

    .banner .area-left .img-list li {
      flex-shrink: 0;
      width: 100%;
    }

    .banner .area-left .img-list .item {
      display: block;
    }

    .banner .area-left .img-list .item img {
      width: 100%;
      height: 285px;
    }

    /* 点的列表 */
    .banner .area-left .dots-list {
      position: absolute;
      bottom: 5px;
      left: 0;
      right: 0;
      margin: 0 auto;
      display: flex;
      justify-content: center;
    }

    .banner .area-left .dots-list li {
      margin: 0 2px;
    }

    .banner .area-left .dots-list .item {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url(./images/banner_sprite.png) 3px -343px;
    }

    .banner .area-left .dots-list .item.active,
    .banner .area-left .dots-list .item:hover {
      background-position: -16px -343px;
    }

    /* 右侧的内容 */
    .banner .area-right {
      position: absolute;
      right: -1px;
      top: 0;
      bottom: 0;
      width: 254px;
      background: url(./images/download_sprite.png);
    }

    .banner .area-right .download {
      display: block;
      width: 215px;
      height: 56px;
      margin: 186px 0 0 19px;
      text-indent: -9999px;
    }

    .banner .area-right .download:hover {
      background: url(./images/download_sprite.png) 0 -290px;
    }

    .banner .area-right .desc {
      margin-top: 10px;
      text-align: center;
      font-size: 12px;
      color: #8d8d8d;
    }

    /* 两个控制按钮 */
    .banner .area .control {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 37px;
      height: 63px;
      margin: auto 0;
      background-image: url(./images/banner_sprite.png);
    }

    .banner .area .control.left {
      left: -70px;
      background-position: 0 -360px;
    }
    .banner .area .control.left:hover {
      background-position: 0 -430px;
    }

    .banner .area .control.right {
      right: -70px;
      background-position: 0 -508px;
    }
    .banner .area .control.right:hover {
      background-position: 0 -578px;
    }
  </style>
</head>
<body>
  
  <div class="banner">
    <div class="area wrapper_03">
      <div class="area-left">
        <ul class="img-list">
          <li>
            <a class="item" href="#">
              <img src="./images/banner_02.jpeg" alt="">
            </a>
          </li>
          <li>
            <a class="item" href="#">
              <img src="./images/banner_02.jpeg" alt="">
            </a>
          </li>
          <li>
            <a class="item" href="#">
              <img src="./images/banner_02.jpeg" alt="">
            </a>
          </li>
          <li>
            <a class="item" href="#">
              <img src="./images/banner_02.jpeg" alt="">
            </a>
          </li>
        </ul>
        
        <ul class="dots-list">
          <li><a class="item active" href=""></a></li>
          <li><a class="item" href=""></a></li>
          <li><a class="item" href=""></a></li>
          <li><a class="item" href=""></a></li>
          <li><a class="item" href=""></a></li>
          <li><a class="item" href=""></a></li>
          <li><a class="item" href=""></a></li>
          <li><a class="item" href=""></a></li>
          <li><a class="item" href=""></a></li>
          <li><a class="item" href=""></a></li>
        </ul>
      </div>
      <div class="area-right">
        <a class="download" href="#">下载客户端</a>
        <p class="desc">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
      </div>
      <a class="control  left" href="#"></a>
      <a class="control right" href="#"></a>
    </div>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云的主要区域</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main .area {
      display: flex;
      justify-content: space-between;
      height: 500px;
      border: 1px solid #d3d3d3;
      border-width: 0 1px;
      background-image: url(./images/main_bg.png);
    }

    /* 左侧区域 */
    .main .area-left {
      width: 729px;
    }

    /* 右侧区域 */
    .main .area-right {
      width: 250px;
    }

    .main .area-right .user-login {
      width: 250px;
      height: 126px;
      background: url(./images/main_sprite.png) 0 0;
    }

    .main .area-right .user-login .desc {
      width: 205px;
      margin: 0 auto;
      padding-top: 16px;
      color: #666;
      font-size: 12px;
      line-height: 22px;
    }

    .main .area-right .user-login .btn {
      display: block;
      width: 100px;
      height: 31px;
      margin: 15px auto 0;
      line-height: 31px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      background: url(./images/main_sprite.png) 0 -195px;
      text-shadow: 0 1px 0 #8a060b;
    }
  </style>
</head>
<body>
  
  <div class="main">
    <div class="area wrapper_02">
      <div class="area-left">
      </div>
      <div class="area-right">
        <div class="user-login">
          <p class="desc">
            登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
          </p>
          <a class="btn" href="#">用户登录</a>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

1.网易云开发思路分析

HTML+CSS：静态页面

JS：动态页面

目前只做静态页面

2.top-整体布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云的top</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .top{
      height: 70px;
      background-color: #242424;
      box-sizing: border-box;
      border-bottom: 1px solid #000;
    }
  
  </style>
</head>
<body>

  <div class="top">
    <div class="topbar"></div>
    <div class="topnav"></div>

    </div>
  </div>

</body>
</html>

目前的效果

3.top-logo的设置

给的精灵图，我们用background-img

注意： text-indent: -9999px;对行内非替换元素，如a和span是无效的，需要改成display:block;或者inline-block

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云的top</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .top{
      height: 70px;
      background-color: #242424;
      box-sizing: border-box;
      border-bottom: 1px solid #000;
    }
    .topbar{
      display: flex;
      justify-content: space-between;
      height: 69px;
      line-height: 69px;
  
    }
    .topbar .bar-left .logo{
      background-image: url(./images/topbar_sprite.png);
    }
    .topbar .bar-left .logo a{
      display: block;
      width: 157px;
      padding-right: 20px;
      text-indent: -9999px;
    }
  
  </style>
</head>
<body>

  <div class="top">
    <div class="topbar wrapper_01">
      <div class="bar-left">
        <h1 class="logo">
          <a href="#">网易云音乐</a>
        </h1>
      </div>
      <div class="bar-right">
        bar

      </div>
    </div>
    <div class="topnav"></div>

    </div>
  </div>

</body>
</html>

4.行高对行内非替换元素的作用（额外补充）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-color: #f00;
      color: #fff;

      line-height: 50px;
    }
  </style>
</head>
<body>
  
  <span class="box">哈哈哈哈</span>

</body>
</html>

span是行内非替换元素

行高line-height 没有把span的高度撑起来

5.top-list展示效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云的top</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .top{
      height: 70px;
      background-color: #242424;
      box-sizing: border-box;
      border-bottom: 1px solid #000;
    }
    .topbar{
      display: flex;
      justify-content: space-between;
      height: 69px;
      line-height: 69px;
  
    }
    .topbar .bar-left{
      display: flex;
    }
    .topbar .bar-left .logo{
      background-image: url(./images/topbar_sprite.png);
    }
    .topbar .bar-left .logo a{
      display: block;
      width: 157px;
      padding-right: 20px;
      text-indent: -9999px;
    }
    .topbar .bar-left .list{
      display: flex;
      
    }
    .topbar .bar-left .list .item{
      position: relative;
      display: block;
      padding: 0 20px;
      color: #ccc;
      font-size: 14px;
    }
    .topbar .bar-left .list .item:hover,
    .topbar .bar-left .list .item.active{
      color:#fff;
      background-color: #000;
    }
    .topbar .bar-left .list .item.active::after{
      content: '';
      position:absolute;
      width: 12px;
      height: 7px;
      bottom: -1px;
      left: 0;
      right: 0;
      margin: 0 auto;
      background: url(./images/topbar_sprite.png) -226px 0;
    }
    .topbar .bar-left .list .item .icon-hot{
      position: absolute;
      width: 28px;
      height: 19px;
      top:10px;
      right: -15px;
      background: url(./images/topbar_sprite.png) -190px 0;

    }
  
  </style>
</head>
<body>

  <div class="top">
    <div class="topbar wrapper_01">
      <div class="bar-left">
        <h1 class="logo">
          <a href="#">网易云音乐</a>
        </h1>
        <ul class="list">
          <li><a href="#" class="item active">发现音乐</a></li>
          <li><a href="#" class="item">我的音乐</a></li>
          <li><a href="#" class="item">关注</a></li>
          <li><a href="#" class="item">商城</a></li>
          <li><a href="#" class="item">音乐人</a></li>
          <li>
            <a href="#" class="item">
              下载客户端
              <i class="icon-hot"></i>
            </a>
          </li>
        </ul>
      </div>
      <div class="bar-right">
        bar

      </div>
    </div>
    <div class="topnav"></div>

    </div>
  </div>

</body>
</html>

做一个抽取

common.css

.topbar_sprite {
  display: inline-block;
  background-image: url(../images/topbar_sprite.png);
}

.topbar_icon_hot {
  width: 28px;
  height: 19px;
  background-position: -190px 0;
}

header.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云的top</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .top{
      height: 70px;
      background-color: #242424;
      box-sizing: border-box;
      border-bottom: 1px solid #000;
    }
    .topbar{
      display: flex;
      justify-content: space-between;
      height: 69px;
      line-height: 69px;
  
    }
    .topbar .bar-left{
      display: flex;
    }
    .topbar .bar-left .logo{
      background-image: url(./images/topbar_sprite.png);
    }
    .topbar .bar-left .logo a{
      display: block;
      width: 157px;
      padding-right: 20px;
      text-indent: -9999px;
    }
    .topbar .bar-left .list{
      display: flex;
      
    }
    .topbar .bar-left .list .item{
      position: relative;
      display: block;
      padding: 0 20px;
      color: #ccc;
      font-size: 14px;
    }
    .topbar .bar-left .list .item:hover,
    .topbar .bar-left .list .item.active{
      color:#fff;
      background-color: #000;
    }
    .topbar .bar-left .list .item.active::after{
      content: '';
      position:absolute;
      width: 12px;
      height: 7px;
      bottom: -1px;
      left: 0;
      right: 0;
      margin: 0 auto;
      background: url(./images/topbar_sprite.png) -226px 0;
    }
    .topbar .bar-left .list .item .icon-hot{
      position: absolute;
      /* width: 28px;
      height: 19px; */
      top:10px;
      right: -15px;
      /* background: url(./images/topbar_sprite.png) -190px 0; */

    }
  
  </style>
</head>
<body>

  <div class="top">
    <div class="topbar wrapper_01">
      <div class="bar-left">
        <h1 class="logo">
          <a href="#">网易云音乐</a>
        </h1>
        <ul class="list">
          <li><a href="#" class="item active">发现音乐</a></li>
          <li><a href="#" class="item">我的音乐</a></li>
          <li><a href="#" class="item">关注</a></li>
          <li><a href="#" class="item">商城</a></li>
          <li><a href="#" class="item">音乐人</a></li>
          <li>
            <a href="#" class="item">
              下载客户端
              <i class="topbar_sprite topbar_icon_hot icon-hot"></i>
            </a>
          </li>
        </ul>
      </div>
      <div class="bar-right">
        bar

      </div>
    </div>
    <div class="topnav"></div>

    </div>
  </div>

</body>
</html>

6.top-右侧内容布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云的top</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .top{
      height: 70px;
      background-color: #242424;
      box-sizing: border-box;
      border-bottom: 1px solid #000;
    }
    .topbar{
      display: flex;
      justify-content: space-between;
      height: 69px;
      line-height: 69px;
  
    }
    .topbar .bar-left{
      display: flex;
    }
    .topbar .bar-left .logo{
      background-image: url(./images/topbar_sprite.png);
    }
    .topbar .bar-left .logo a{
      display: block;
      width: 157px;
      padding-right: 20px;
      text-indent: -9999px;
    }
    .topbar .bar-left .list{
      display: flex;
      
    }
    .topbar .bar-left .list .item{
      position: relative;
      display: block;
      padding: 0 20px;
      color: #ccc;
      font-size: 14px;
    }
    .topbar .bar-left .list .item:hover,
    .topbar .bar-left .list .item.active{
      color:#fff;
      background-color: #000;
    }
    .topbar .bar-left .list .item.active::after{
      content: '';
      position:absolute;
      width: 12px;
      height: 7px;
      bottom: -1px;
      left: 0;
      right: 0;
      margin: 0 auto;
      background: url(./images/topbar_sprite.png) -226px 0;
    }
    .topbar .bar-left .list .item .icon-hot{
      position: absolute;
      /* width: 28px;
      height: 19px; */
      top:10px;
      right: -15px;
      /* background: url(./images/topbar_sprite.png) -190px 0; */

    }
    .topbar .bar-right {
      display:flex;
      align-items: center;
      padding-right: 20px;
    }
    .topbar .bar-right .login a{
      color:#787878;
    }
    .topbar .bar-right .login:hover a{
      color: #ccc;
    }
    .topbar .bar-right .login a:hover{
      color:#787878;
      text-decoration: underline;
    }
    .topbar .bar-right .author a{
      display: inline-block; 
      width: 90px;
      height: 32px;
      margin: 0 20px;
      line-height: 32px;
      text-align: center;
      color: #ccc;
      box-sizing: border-box;
      border: 1px solid #4F4F4F;
      border-radius: 20px;
    }
    .topbar .bar-right .author a:hover{
      color: #fff;
      border-color: #fff;

    }
    .topbar .bar-right .search{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 158px;
      height: 32px;
      box-sizing: border-box;
      padding-right: 10px;
      border-radius: 30px;
      background:#fff url(./images/topbar_sprite.png) 0 -99px;

    }
    .topbar .bar-right .search input{
      width: 118px;
      font-size: 12px;

    }
  </style>
</head>
<body>

  <div class="top">
    <div class="topbar wrapper_01">
      <div class="bar-left">
        <h1 class="logo">
          <a href="#">网易云音乐</a>
        </h1>
        <ul class="list">
          <li><a href="#" class="item active">发现音乐</a></li>
          <li><a href="#" class="item">我的音乐</a></li>
          <li><a href="#" class="item">关注</a></li>
          <li><a href="#" class="item">商城</a></li>
          <li><a href="#" class="item">音乐人</a></li>
          <li>
            <a href="#" class="item">
              下载客户端
              <i class="topbar_sprite topbar_icon_hot icon-hot"></i>
            </a>
          </li>
        </ul>
      </div>
      <div class="bar-right">
        <div class="search">
          <input type="text" placeholder="音乐/视频/电台/用户">
        </div>
        <div class="author">
          <a href="#">创作者中心</a>
        </div>
        <div class="login">
          <a href="#">登录</a>
        </div>

      </div>
    </div>
    <div class="topnav"></div>

    </div>
  </div>

</body>
</html>

7.top导航的实现

接下来要做下面红色导航

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云的top</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .top{
      height: 70px;
      background-color: #242424;
      box-sizing: border-box;
      border-bottom: 1px solid #000;
    }
    .topbar{
      display: flex;
      justify-content: space-between;
      height: 69px;
      line-height: 69px;
  
    }
    .topbar .bar-left{
      display: flex;
    }
    .topbar .bar-left .logo{
      background-image: url(./images/topbar_sprite.png);
    }
    .topbar .bar-left .logo a{
      display: block;
      width: 157px;
      padding-right: 20px;
      text-indent: -9999px;
    }
    .topbar .bar-left .list{
      display: flex;
      
    }
    .topbar .bar-left .list .item{
      position: relative;
      display: block;
      padding: 0 20px;
      color: #ccc;
      font-size: 14px;
    }
    .topbar .bar-left .list .item:hover,
    .topbar .bar-left .list .item.active{
      color:#fff;
      background-color: #000;
    }
    .topbar .bar-left .list .item.active::after{
      content: '';
      position:absolute;
      width: 12px;
      height: 7px;
      bottom: -2px;
      left: 0;
      right: 0;
      margin: 0 auto;
      background: url(./images/topbar_sprite.png) -226px 0;
    }
    .topbar .bar-left .list .item .icon-hot{
      position: absolute;
      /* width: 28px;
      height: 19px; */
      top:10px;
      right: -15px;
      /* background: url(./images/topbar_sprite.png) -190px 0; */

    }
    .topbar .bar-right {
      display:flex;
      align-items: center;
      padding-right: 20px;
    }
    .topbar .bar-right .login a{
      color:#787878;
    }
    .topbar .bar-right .login:hover a{
      color: #ccc;
    }
    .topbar .bar-right .login a:hover{
      color:#787878;
      text-decoration: underline;
    }
    .topbar .bar-right .author a{
      display: inline-block; 
      width: 90px;
      height: 32px;
      margin: 0 20px;
      line-height: 32px;
      text-align: center;
      color: #ccc;
      box-sizing: border-box;
      border: 1px solid #4F4F4F;
      border-radius: 20px;
    }
    .topbar .bar-right .author a:hover{
      color: #fff;
      border-color: #fff;

    }
    .topbar .bar-right .search{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 158px;
      height: 32px;
      box-sizing: border-box;
      padding-right: 10px;
      border-radius: 30px;
      background:#fff url(./images/topbar_sprite.png) 0 -99px;

    }
    .topbar .bar-right .search input{
      width: 118px;
      font-size: 12px;
    }
    .nav{
      height: 35px;
      line-height: 35px;
      background-color: #c20c0c;
      box-sizing: border-box;
      border-bottom: 1px solid #a40011;
      
    }
    .navbar{
      box-sizing: border-box;
      padding-left:180px ;
    }
    .navbar .list{
      display: flex;
    }
    .navbar .list .item{
      display: inline-block;
    }
    .navbar .list .item span{
      display: inline-block;
      padding: 0 13px;
      margin: 7px 17px;
      height: 20px;
      line-height: 20px;
      color: #fff;
      border-radius: 21px;
      
    }
    .navbar .list .item:hover span,
    .navbar .list .item.acitve span{
      background-color:#9B0909;
    }
  </style>
</head>
<body>
<div class="header">
  <div class="top">
    <div class="topbar wrapper_01">
      <div class="bar-left">
        <h1 class="logo">
          <a href="#">网易云音乐</a>
        </h1>
        <ul class="list">
          <li><a href="#" class="item active">发现音乐</a></li>
          <li><a href="#" class="item">我的音乐</a></li>
          <li><a href="#" class="item">关注</a></li>
          <li><a href="#" class="item">商城</a></li>
          <li><a href="#" class="item">音乐人</a></li>
          <li>
            <a href="#" class="item">
              下载客户端
              <i class="topbar_sprite topbar_icon_hot icon-hot"></i>
            </a>
          </li>
        </ul>
      </div>
      <div class="bar-right">
        <div class="search">
          <input type="text" placeholder="音乐/视频/电台/用户">
        </div>
        <div class="author">
          <a href="#">创作者中心</a>
        </div>
        <div class="login">
          <a href="#">登录</a>
        </div>

      </div>
    </div>
    

  </div>
  <div class="nav">
    <div class="navbar wrapper_01">
      <ul class="list">
        <li><a href="#" class="item acitve"><span>推荐</span></a></li>
        <li><a href="#" class="item"><span>排行榜</span></a></li>
        <li><a href="#" class="item"><span>歌单</span></a></li>
        <li><a href="#" class="item"><span>主播电台</span></a></li>
        <li><a href="#" class="item"><span>歌手</span></a></li>
        <li><a href="#" class="item"><span>新碟上架</span></a></li>
      </ul>
    </div>

  </div>
</div>



</body>
</html>

最终的实现效果


http://www.kler.cn/a/532426.html

相关文章：

  • python：求解爱因斯坦场方程
  • Kafka流式计算架构
  • 当WebGIS遇到智慧文旅-以长沙市不绕路旅游攻略为例
  • 大模型领域的Scaling Law的含义及作用
  • 注解（Annotation）
  • 【hot100】刷题记录(12)-回文链表
  • c++ 冒泡排序
  • 2502,索界面3
  • 第十八章 视图
  • wordpress安装
  • 【Git】一、初识Git Git基本操作详解
  • 阿里云 ROS 与 Terraform：它们的差异与如何选择适合的自动化工具？
  • llama.cpp的C语言API使用
  • Linux环境下的Java项目部署技巧：安装 Nginx
  • 复现论文“去模糊算法”
  • Python分享10个Excel自动化脚本
  • ubuntu ip设置
  • 电路研究9.2.2.1——合宙Air780EP中分组域相关命令分析
  • 仿真设计|基于51单片机的分贝检测与远程传输系统仿真
  • 回溯法-排列，组合
  • llama.cpp GGML Quantization Type
  • 5.角色基础移动
  • 云夹：重新定义你的书签管理体验
  • [mmdetection]fast-rcnn模型训练自己的数据集的详细教程
  • concurrentHasMap为什么不允许kv为null
  • 使用线性回归模型逼近目标模型 | PyTorch 深度学习实战