用HTML+CSS做了一个网易云音乐客户端首页

五一放假前两天公司不太忙，想找点事情打发时间，于是这次准备模仿网易云音乐客户端

先布局

再这样

完善右侧内容页和底部播放控制条

大功告成，哈哈，图标和细节就不做了，太麻烦

左侧菜单是a标签，a标签的链接会在右侧内容区域打开，后期可添加不同的功能页面，默认打开推荐页

唱盘可以自动旋转，播放进度条也会自动移动

目前只用到CSS和HTML

总结：Flex和Grid布局真好用

下面是代码

目录结构

index.html

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易云音乐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
          height: 100vh;
        }
    </style>
    <link rel="stylesheet" href="css/cloud-music.css">
</head>
<body>
  <div class="cloud-music">
    <div class="top">
      <div class="left">
        <div class="header">
          <img src="img/logo.png" class="logo">
          <span class="name">网易云音乐</span>
        </div>
        <div class="content">
          <ul class="menu-ul">
            <li class="active">
              <a href="page/recommend.html" target="content">
                <div class="icon"></div>
                <span class="menu-name">推荐</span>
              </a>
            </li>
            <li>
              <a href="page/page1.html" target="content">
                <div class="icon"></div>
                <span>精选</span>
              </a>
            </li>
            <li>
              <a href="page/page2.html" target="content">
                 <div class="icon"></div>
                 <span>播客</span>
              </a>
            </li>
            <li>
              <a href="page/page1.html" target="content">
                <div class="icon"></div>
                <span>漫游</span>
              </a>
            </li>
            <li>
              <a href="page/page2.html" target="content">
                <div class="icon"></div>
                <span>关注</span>
              </a>
            </li>
          </ul>
          <hr class="menu-hr">
          <h5 class="ul-title">我的</h5>
          <ul class="menu-ul">
            <li>
              <a href="page/page1.html" target="content">
                <div class="icon"></div>
                <span>我喜欢的音乐</span>
              </a>
            </li>
            <li>
              <a href="page/page2.html" target="content">
                <div class="icon"></div>
                <span>
                  最近播放
                </span>
              </a>
            </li>
            <li>
              <a href="page/page1.html" target="content">
                <div class="icon"></div>
                <span>
                  我的播客
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="right">
        <div class="header">
          <div class="left">
            <div class="back"></div>
            <div class="search">
              <div class="search-icon"></div>
              <input type="text" placeholder="燃情岁月原声">
              <div class=""></div>
            </div>
            <div class="voice"></div>
          </div>
          <div class="right">
            <div class="icon"></div>
            <div class="icon"></div>
            <div class="icon"></div>
            <div class="icon"></div>
            <div class="icon"></div>
          </div>
        </div>
        <div class="content">
          <iframe name="content" src="page/recommend.html"></iframe>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="turntable">
          <img src="img/logo.png">
        </div>
        <div class="music-info">
          <div class="top">
            <span class="music-name">新长征路上的摇滚</span>
            <span class="singer">-崔健</span>
          </div>
          <div class="bottom">
            <div class="icon"></div>
            <div class="icon"></div>
            <div class="icon"></div>
            <div class="icon"></div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="top">
          <div class="pre"></div>
          <div class="play"></div>
          <div class="pre pre-symmetry"></div>
        </div>
        <div class="bottom">
          <span class="time time-current">00:49</span>
          <div class="progress">
            <div class="progress-bar"></div>
          </div>
          <span class="time time-total">04:41</span>
        </div>
      </div>
      <div class="right">
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
        <div class="icon"></div>
      </div>
    </div>
  </div>
</body>
</html>

recommend.html

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>推荐</title>
    <link rel="stylesheet" href="../css/recommend.css">
</head>
<body>
    <div class="recommend">
        <div class="top grid">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <h3 class="title">精选推荐</h3>
        <div class="cards-7 grid">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <h3 class="title">推荐歌单</h3>
        <div class="cards-7 grid">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <h3 class="title">榜单精选</h3>
        <div class="cards-2 grid">
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

cloud-music.css

css 复制代码

.cloud-music {
    font-family: Arial;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(to bottom, #ffd8d8 0%, #ffffff 50%, #ffffff 100%);
}
.cloud-music > .top {
    display: flex;
    flex: 1;
}
.cloud-music > .top > .left {
    display: flex;
    flex-direction: column;
    width: 200px;
    min-width: 200px;
    background: rgba(152, 152, 152, 0.1);
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
.cloud-music > .top > .left > .header {
    height: 70px;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cloud-music > .top > .left > .header > .logo {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    cursor: pointer;
}
.cloud-music > .top > .left > .header > .name {
    font-size: 20px;
    cursor: pointer;
    user-select: none;
}
.cloud-music > .top > .left > .content {
    flex: 1;
    width: auto;
    padding-top: 20px;
}
.cloud-music > .top > .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0px 0px 0px 40px;
}
.cloud-music > .top > .right > .header {
    display: flex;
    width: auto;
    height: 70px;
}
.cloud-music > .top > .right > .header > .left {
    flex: 1;
}
.cloud-music > .top > .right > .header > .right {
    width: 450px;
}
.cloud-music > .top > .right > .content {
    width: 100%;
    flex: 1;
}
.menu-ul {
    width: auto;
    list-style: none;
}
.menu-ul > li {
    padding: 0;
    margin: 0;
    width: auto;
    line-height: 39px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
}
.menu-ul > li > a {
    display: flex;
    align-items: center;
    color: #4e5366;
    text-decoration: none;
}
.menu-ul > .active > a {
    color: white !important;
}
.menu-ul > li > a:visited {
    color: #4e5366;
}
.menu-ul > .active {
    background: #fc3d4a !important;
    color: white !important;
}
.menu-ul > li:hover {
    background: rgba(136, 136, 136, 0.1);
}
.icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #cccccc;
    margin-right: 10px;
    margin-left: 10px;
}
.menu-hr {
    border-top: 1px solid #e4dfe2;
    width: auto;
    margin: 15px 10px;
}
.ul-title {
    color: #a0a6b1;
    padding-bottom: 10px;
}
.cloud-music > .top > .right > .header > .left {
    display: flex;
    align-items: center;
}
.cloud-music > .top > .right > .header > .left > .back {
    width: 28px;
    height: 36px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(41, 41, 41, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cloud-music > .top > .right > .header > .left > .back:hover {
    background: rgba(64, 64, 64, 0.1);
}
.cloud-music > .top > .right > .header > .left > .back::before {
    content: '';
    width: 6px;
    height: 6px;
    border-left: 2px solid #515f76;
    border-bottom: 2px solid #515f76;
    transform-origin: center center;
    transform: translateX(2px) rotate(45deg);
    position: relative;
}
.cloud-music > .top > .right > .header > .left > .voice {
    height: 36px;
    width: 36px;
    border-radius: 5px;
    border: 1px solid rgba(41, 41, 41, 0.1);
    box-sizing: border-box;
}
.search {
    height: 36px;
    width: 255px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(41, 41, 41, 0.1);
    display: flex;
    margin-left: 10px;
    margin-right: 10px;
}
.search > input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    padding-top: 1px;
    width: 100%;
    flex: 1;
    color: #283248;
}
.search > .search-icon {
    height: 36px;
    width: 40px;
    position: relative;
}
.search > .search-icon::before {
    content: '';
    display: block;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid #8497af;
    position: absolute;
    left: 15px;
    top: 8px;
}
.search > .search-icon::after {
    content: '';
    display: block;
    height: 5px;
    width: 1px;
    background: #8497af;
    position: absolute;
    transform: rotate(-45deg);
    position: absolute;
    left: 30px;
    top: 20px;
}
.search > .search-icon:hover::before {
    border-color: #536077;
}
.search > .search-icon:hover::after {
    background: #536077;
}
.content > iframe {
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    overflow-y: hidden;
}
.content > iframe {
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
}
.cloud-music > .bottom {
    bottom: 0px;
    height: 80px;
    width: auto;
    display: flex;
    justify-content: center;
    padding-left: 25px;
    padding-right: 25px;
    background: #fafafa;
    border-top: 1px solid #e5e6e8;
}
.cloud-music > .bottom > .left {
    flex: 1;
    display: flex;
    align-items: center;
}
.cloud-music > .bottom > .center {
    width: 400px;
}
.cloud-music > .bottom > .right {
    flex: 1;
}
.turntable {
    height: 75%;
    aspect-ratio: 1;
    border-radius: 50%;
    line-height: 100%;
    background: #070707;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotate 20s linear infinite;
}
.turntable > img {
    width: 70%;
    aspect-ratio: 1;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.music-info {
    display: flex;
    flex-direction: column;
    height: 70%;
}
.music-info .top {
    padding-left: 10px;
    height: 50%;
    display: flex;
    align-items: center;
}
.music-info .bottom {
    display: flex;
    align-items: center;
    height: 40%;
    width: auto;
}
.singer {
    color: #7c828f;
    font-size: 14px;
}
.cloud-music > .bottom > .center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.cloud-music > .bottom > .center > .bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.progress  {
    flex: 1;
    height: 4px;
    background: #dadcdf;
    border-radius: 2px;
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
}
.progress > .progress-bar {
    height: 100%;
    background-color: #f26d78;
    border-radius: inherit;
    animation: play 281s linear;
}
@keyframes play {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}
.time {
    font-size: 14px;
    color: #a6aab3;
}
.cloud-music > .bottom > .center > .top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
    padding-bottom: 3px;
}
.cloud-music > .bottom > .center > .top > .play {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fc3b56;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 15px;
    margin-right: 15px;
}

.cloud-music > .bottom > .center > .top > .play::before {
    content: '';
    height: 40%;
    width: 4px;
    background: white;
    border-radius: 2px;
    margin: 2px;
}
.cloud-music > .bottom > .center > .top > .play::after {
    content: '';
    height: 40%;
    width: 4px;
    background: white;
    border-radius: 2px;
    margin: 2px;
}
.cloud-music > .bottom > .center > .top > .play:hover {
    background-color: #e3354d;
    transform: scale(1.05);
}
.cloud-music > .bottom > .center > .top > .play:hover::after{
    background: #e5e5e5;
}
.cloud-music > .bottom > .center > .top > .play:hover::before {
    background: #e5e5e5;
}
.pre {
    width: 28px;
    height: 36px;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pre:hover::before {
    background: #242d41;
}
.pre:hover::after {
    border-right: 15px solid #242d41;
}
.pre::before {
    content: '';
    height: 12px;
    width: 3px;
    background: #525a6c;
    border-radius: 1px;
    transform: translateX(2px);
}
.pre::after {
    content: '';
    height: 16px;
    width: 15px;
    box-sizing: border-box;
    border-left: 0px solid transparent;
    border-right: 15px solid #525a6c;
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
}
.pre-symmetry {
    rotate: 180deg;
}
.cloud-music > .bottom > .right {
    display: flex;
    justify-content: right;
    align-items: center;
    flex: 1;
}
.cloud-music > .top > .right > .header > .right {
    display: flex;
    justify-content: right;
    align-items: center;
    padding-right: 20px;
}

recommend.css

css 复制代码

* {
    margin: 0;
    padding: 0;
}
.recommend {
    padding-right: 10px;
}
.title {
    color: #283248;
    padding-bottom: 8px;
}
.grid {
    display: grid;
    height: 165px;
    grid-gap: 30px;
    width: 100%;
    margin-bottom: 20px;
}
.grid > div {
    border-radius: 10px;
}
.top {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
}
.top div:nth-child(1) {
    background: #220a16;
}
.top div:nth-child(2) {
    background: #ffffff;
}
.top div:nth-child(3) {
    background: #be7667;
}
.cards-7 {
    grid-template-columns: repeat(7, 1fr);
}
.cards-7 > div {
    aspect-ratio: 1;
}
.cards-7 > div:nth-child(1) {
    background: #b9b9b9;
}
.cards-7 > div:nth-child(2) {
    background: #cb4b6f;
}
.cards-7 > div:nth-child(3) {
    background: #b7a682;
}
.cards-7 > div:nth-child(4) {
    background: #332329;
}
.cards-7 > div:nth-child(5) {
    background: #ce6a35;
}
.cards-7 > div:nth-child(6) {
    background: #8d8177;
}
.cards-7 > div:nth-child(7) {
    background: #d1a691;
}
.cards-7 > div {
    min-width: 0px;
}
.cards-2 {
    grid-template-columns: 1fr 1fr;
}
.cards-2 > div {
    height: 100%;
    background: #ffffff;
    border: 1px solid #ffb4b4;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #e2e5e9;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #ccc;
}

祝大家五一快乐！