首页 开源 资讯 活动 开源许可证
软件工程云服务
软件代码质量检测云服务 持续集成与部署云服务 社区个性化内容推荐服务 贡献审阅人推荐服务 群体化学习服务 重睛鸟代码扫描工具
Watch 1 Star 0 Fork 0

竹苓/js-music

代码 Issues 0 Pull Requests 0 Wiki 0 统计
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）
免费加入
文件
克隆/下载
home.html 7.89 KB
一键复制 编辑 原始数据 按行查看 历史
竹苓 提交于 2022-03-12 17:02 . 第一次提交
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
<!-- home.html -->

<!DOCTYPE html>

<html lang="zh-CN">



<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>

  <link rel="stylesheet" href="./css/reset.css" />

  <link rel="stylesheet" href="./css/common.css" />

  <link rel="stylesheet" href="./css/home.css" />

  <script src="./assets/iconfont.js"></script>

</head>



<body>

  <!-- home.html -->

  <div class="wrapper d-flex flex-column">

    <header class="header" id="header-title">推荐页</header>

    <section id="app" class="content">

      <!-- 中间页面html结构 -->

      <div class="w">

        <div class="carousel-wrapper">

          <!-- 轮播图结构 -->

          <div class="carousel-container ">

            <!-- 切换箭头 -->

            <button class="carousel-control carousel-control-left carousel-control-hover">

              <svg class="icon" aria-hidden="true">

                <use xlink:href="#icon-arrow-left"></use>

              </svg>

            </button>

            <button class="carousel-control carousel-control-right carousel-control-hover">

              <svg class="icon" aria-hidden="true">

                <use xlink:href="#icon-arrow-right"></use>

              </svg>

            </button>

            <!-- 轮播图图片需要动态生成 -->

            <div class="carousel-item">

              <img src="https://tse2-mm.cn.bing.net/th/id/OIP.tXLPDc_5P-E7ca-KtD_UVAHaEK?pid=ImgDet&rs=1" alt="" />

            </div>

          </div>

          <!-- 指示器 -->

          <ul class="carousel-indicators d-flex">

            <li data-slide-to="0" class="active"></li>

            <li data-slide-to="1"></li>

            <li data-slide-to="2"></li>

          </ul>

        </div>

        <div class="recommend-playlist">

          <!-- 推荐歌单结构 -->

          <h3 class="recommend-playlist-header">

            推荐歌单<svg class="icon" aria-hidden="true">

              <use xlink:href="#icon-arrow-right"></use>

            </svg>

          </h3>

          <div class="recommend-playlist-container d-flex justify-content-between">

            <!-- 推荐歌单需要动态生成，静态页面先手动复制4份 -->

            <div class="recommend-playlist-item d-flex flex-column hover">

              <div class="recommend-playlist-cover">

                <img src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1" alt="" />

                <svg class="recommend-playlist-icon icon" aria-hidden="true">

                  <use xlink:href="#icon-zanting"></use>

                </svg>

              </div>

              <div class="recommend-playlist-title multi-text-omitted">

                图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图

              </div>

            </div>

            <div class="recommend-playlist-item d-flex flex-column hover">

              <div class="recommend-playlist-cover">

                <img src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1" alt="" />

                <svg class="recommend-playlist-icon icon" aria-hidden="true">

                  <use xlink:href="#icon-zanting"></use>

                </svg>

              </div>

              <div class="recommend-playlist-title multi-text-omitted">

                图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图

              </div>

            </div>

            <div class="recommend-playlist-item d-flex flex-column hover">

              <div class="recommend-playlist-cover">

                <img src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1" alt="" />

                <svg class="recommend-playlist-icon icon" aria-hidden="true">

                  <use xlink:href="#icon-zanting"></use>

                </svg>

              </div>

              <div class="recommend-playlist-title multi-text-omitted">

                图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图

              </div>

            </div>

            <div class="recommend-playlist-item d-flex flex-column hover">

              <div class="recommend-playlist-cover">

                <img src="https://tse2-mm.cn.bing.net/th/id/OIP.ZTmNathhKflijArYDaQEDAHaEo?pid=ImgDet&rs=1" alt="" />

                <svg class="recommend-playlist-icon icon" aria-hidden="true">

                  <use xlink:href="#icon-zanting"></use>

                </svg>

              </div>

              <div class="recommend-playlist-title multi-text-omitted">

                图片使用世界前沿的人工智能技术，为用户甄选海量的高清美图

              </div>

            </div>

          </div>

        </div>

      </div>

    </section>

    <section class="player-control d-flex justify-content-start ">

      <!-- 页面底部html结构 -->

      <div class="player-control-songinfo d-flex justify-content-start">

        <!-- 歌曲信息 -->

        <div class="img">

          <img

            src="https://th.bing.com/th/id/R7466240255fa48164e1d741fb8b29893?rik=qd9WWhLotZqIAg&riu=http%3a%2f%2fpicture.ik123.com%2fuploads%2fallimg%2f160906%2f3-160Z6154A8.jpg&ehk=T2cuZ%2fECZd2tvUCSXRgW2e2axgZ8c4rM2GQpotzo3Ec%3d&risl=&pid=ImgRaw"

            alt="" />

        </div>

        <div class="songinfo d-flex flex-column align-items-start">

          <span class="songname multi-text-omitted">歌曲一</span>

          <span class="single-text-omitted singer">歌手2323232323232</span>

        </div>

      </div>

      <div class="player-control-unit d-flex justify-content-between">

        <div class="control">

          <!-- 播放控制 -->

          <svg class="icon" aria-hidden="true">

            <use xlink:href="#icon-shangyiqu"></use>

          </svg>

          <svg class="icon" aria-hidden="true">

            <use xlink:href="#icon-zanting"></use>

          </svg>

          <svg class="icon" aria-hidden="true">

            <use xlink:href="#icon-xiayiqu"></use>

          </svg>

        </div>



        <div class="list">

          <!-- 歌曲循环和列表 -->

          <svg class="icon" aria-hidden="true">

            <use xlink:href="#icon-liebiaoxunhuan"></use>

          </svg>

          <svg class="icon" aria-hidden="true">

            <use xlink:href="#icon-bofangliebiao"></use>

          </svg>

        </div>

        <div class="d-flex justify-content-between">

          <!-- 播放进度和音量 -->

          <div class="song-progress d-flex justify-content-between">

            <span class="current-time">00:00</span>

            <div class="progress" id="progress-bar">

              <div class="progress-bar"></div>

              <div class="progress-dot"></div>

            </div>

            <span class="total-time">00:00</span>

          </div>

          <div class="volume d-flex">

            <svg class="icon volume-icon" aria-hidden="true">

              <use xlink:href="#icon-yinliang"></use>

            </svg>

            <div class="progress" id="volume-bar">

              <div class="progress-bar"></div>

              <div class="progress-dot"></div>

            </div>

          </div>

        </div>

        <section class="player-list">

          <!-- <section class="player-list display-none"> -->

          <h3 class="player-list-title">播放列表</h3>

          <ul class="player-list-ul">

            <li class="player-list-li d-flex justify-content-start pointer">

              <div class="song-name">sd</div>

              <div class="singer">da</div>

              <div class="song-time">ad</div>

            </li>

            <li class="player-list-li d-flex justify-content-start pointer">

              <div class="song-name">sd</div>

              <div class="singer">da</div>

              <div class="song-time">ad</div>

            </li>

          </ul>

        </section>

      </div>

    </section>

  </div>

  <script>

  </script>

</body>



</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化