HTML+CSS期末大作业：在线音乐网站设计——简洁大气的KK音乐官网模板html源码(1页) HTML+CSS+JavaScript

最新推荐文章于 2024-06-02 12:45:42 发布

@秋天的笔记

最新推荐文章于 2024-06-02 12:45:42 发布

阅读量9.5k

点赞数 9

分类专栏： HTML5期末大作业 web课程设计网页规划与设计计算机毕设网页设计源码文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_46166683/article/details/121010637

版权

HTML+CSS期末大作业：在线音乐网站设计——简洁大气的KK音乐官网模板html源码(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码

常见网页设计作业题材有 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

🧡作者主页

🧡HTML期末大作业文章专栏

作品介绍

1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

HTML+CSS期末大作业：在线音乐网站设计——简洁大气的KK音乐官网模板html源码(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
作品介绍
一、作品展示
二、文件目录
三、代码实现
四、学习资料
五、完整源码
六、更多源码

一、作品展示

在这里插入图片描述

二、文件目录

三、代码实现


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <link rel="icon" href="favicons/1.png">

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

  <header class="header">
    <div class="header-container">
      <div class="header-top">
        <a href="#" class="logo"></a>
        <nav class="header-nav">
          <ul>
            <li><a href="#" class="header-nav__cur">音乐馆</a></li>
            <li><a href="#">我的音乐</a></li>
            <li><a href="#">下载客户端</a></li>
            <li><a href="#">VIP</a></li>
          </ul>
        </nav>
        <div class="header-search">
          <input type="text" class="text" placeholder="here...">
          <div class="btn"><i class="icon-sprite"></i></div>
          <div class="result">
            <a href="#" class="result-item">
              <span class="rank">1</span>
              <span class="title">默</span>
              <span class="num">3.4万</span>
            </a>
            <a href="#" class="result-item">
              <span class="rank">2</span>
              <span class="title">侧田</span>
              <span class="num">3.4万</span>
            </a>
            <a href="#" class="result-item">
              <span class="rank">3</span>
              <span class="title">让我留在你身边</span>
              <span class="num">3.4万</span>
            </a>
            <a href="#" class="result-item">
              <span class="rank">4</span>
              <span class="title">皮皮虾我们走</span>
              <span class="num">3.4万</span>
            </a>
            <a href="#" class="result-item">
              <span class="rank">5</span>
              <span class="title">欢乐好声音</span>
              <span class="num">3.4万</span>
            </a>
            <div class="history">
              <span>搜索历史</span>
              <i class="icon-sprite"></i>
            </div>
          </div>
        </div>
        <div class="header-login">
          <a href="#" class="login">Login</a>
          <a href="#" class="open-green">开通绿钻豪华版</a>
          <a href="#" class="open-vip">开通付费包</a>
        </div>
      </div>
      <ul class="header-subNav">
        <li><a href="#" class="subNav-cur">首页</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="#">MV</a></li>
      </ul>
    </div>
  </header>

  <!-- 新歌首发 -->
  <div class="main" id="newSong">
    <div class="main-inner">
      <div class="main-title">
        <h2 class="title"><i></i></h2>
        <span class="line line-left"></span>
        <span class="line line-right"></span>
      </div>
      <a href="#" class="readAll">全部<i class="icon-sprite"></i></a>
      <div class="main-tab tab-title">
        <a href="javascript:;" class="item item-cur">全部</a>
        <a href="javascript:;" class="item">华语</a>
        <a href="javascript:;" class="item">欧美</a>
        <a href="javascript:;" class="item">韩国</a>
        <a href="javascript:;" class="item">日本</a>
      </div>
      <div class="main-slider tab-cont">
        <ul class="slider-wrapper">
          <li>
            <a href="#" class="img">
              <img src="images/cont/slider_img1.jpg" alt="#">
              <span class="mask"></span>
              <i class="icon-play"></i>
            </a>
            <div class="info">
              <div class="title">
                <a href="#">那个静默的阳光午后</a>
                <i class="icon-sprite"></i>
              </div>
              <a href="#" class="author">范玮琪</a>
            </div>
          </li>
          <li>
            <a href="#" class="img">
              <img src="images/cont/slider_img2.jpg" alt="#">
              <span class="mask"></span>
              <i class="icon-play"></i>
            </a>
            <div class="info">
              <div class="title">
                <a href="#">那个静默的阳光午后</a>
                <i class="icon-sprite"></i>
              </div>
              <a href="#" class="author">范玮琪</a>
            </div>
          </li>
          <li>
            <a href="#" class="img">
              <img src="images/cont/slider_img3.jpg" alt="#">
              <span class="mask"></span>
              <i class="icon-play"></i>
            </a>
            <div class="info">
              <div class="title">
                <a href="#">那个静默的阳光午后</a>
                <i class="icon-sprite"></i>
              </div>
              <a href="#" class="author">范玮琪</a>
            </div>
          </li>
          <li>
            <a href="#" class="img">
              <img src="images/cont/slider_img4.jpg" alt="#">
              <span class="mask"></span>
              <i class="icon-play"></i>
            </a>
            <div class="info">
              <div class="title">
                <a href="#">那个静默的阳光午后</a>
                <i class="icon-sprite"></i>
              </div>
              <a href="#" class="author">范玮琪</a>
            </div>
          </li>
          <li>
            <a href="#" class="img">
              <img src="images/cont/slider_img1.jpg" alt="#">
              <span class="mask"></span>
              <i class="icon-play"></i>
            </a>
            <div class="info">
              <div class="title">
                <a href="#">那个静默的阳光午后</a>
                <i class="icon-sprite

最低0.47元/天解锁文章

@秋天的笔记

关注

9
点赞
踩
89

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS期末大作业：在线音乐网站设计——简洁大气的KK音乐官网模板html源码(1页) HTML+CSS+JavaScript

HTML+CSS期末大作业：在线音乐网站设计——简洁大气的KK音乐官网模板html源码(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他
复制链接

扫一扫