<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--网站搜索关键字-->
<meta name="keywords" content="娱乐，音乐，视频" />
<!--网站简介-->
<meta name="description" content="这是一个娱乐网站，业余时间可供大家打发时间" />
<!--网站作者-->
<meta name="author" content="szk" />
<title>娱乐网站</title>
<link rel="stylesheet" type="text/css" href="css/site.css" />
<link rel="stylesheet" href="swiper/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="swiper/swiper.min.js" ></script>
<!--导入jqury类库，相当于java的类库，jqury对js进行封装，想实现一些功能，如果类库中
有相应方法，直接用对应的方法就可以，为我们开发提供了便捷
-->
<script type="text/javascript" src="jquery/jquery.js" ></script>
<script type="text/javascript" src="jquery/music.js" ></script>
<script type="text/javascript" src="jquery/video.js" ></script>
<script type="text/javascript" src="jquery/music_swiper.js" ></script>
</head>
<body>
<!--头部-->
<header>
<div class="main">
<div class="logo">
<a href="index.html"></a>
</div>
<!--导航-->
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="video_list.html">视频</a></li>
<li><a href="music_list.html">音乐</a></li>
<li><a href="JavaScript:;">客服中心</a></li>
<li><a href="JavaScript:;">招纳贤士</a></li>
</ul>
</nav>
<!--图标-->
<div class="share">
<ul>
<li><a href="JavaScript:;"></a></li>
<li><a href="JavaScript:;"></a></li>
</ul>
</div>
</div>
</header>
<!--大图-->
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="shine">
<div class="bg"></div>
</div>
</div>
<div class="swiper-slide">
<div class="shine">
<div class="bg1"></div>
</div>
</div>
<div class="swiper-slide">
<div class="shine">
<div class="bg2"></div>
</div>
</div>
</div>
</div>
<!--视频-->
<div class="about">
<div class="main"><!--引路公用的div-->
<hgroup>
<h1>Creative cross boundary</h1>
<h2>Getty Sounds</h2>
</hgroup>
<div class="btn_price">
<a href="video_list.html">Video List</a>
</div>
<!--视频播放-->
<div class="mac">
<img src="images/mov.jpg" width="1024" height="723" class="img"/><!--背景图无法定位，因此用img标签-->
<div class="btn_play" id="btn_play">
<span>Play</span>
<img src="images/play-icon.png" width="17" height="21" class="img1"/>
</div>
</div>
<!--视频框-->
<div class="dialog">
<div class="dialog_video">
<video src="video/十年.mp4" controls="true"></video>
</div>
<div class="close">×</div>
</div>
<!--视频分类-->
<div class="video_list">
<ul>
<li>
<span class="span1"><img src="images/music.jpg" width="90" height="90"/></span>
<h2>Music Video</h2>
<p>音乐视频，包含各类MV视频、演出视频、音乐访谈和演唱会现场视频。</p>
</li>
<li>
<span class="span1"><img src="images/kaifa.png" width="90" height="90"/></span>
<h2>software development</h2>
<p>软件开发视频，包含开发视频教程图片、开发视频教程介绍以及资料下载。</p>
</li>
<li>
<span class="span1"><img src="images/xijv.png" width="90" height="90" /></span>
<h2>Comedy video</h2>
<p>喜剧视频，包含各类喜剧片、小品及各种搞笑段子，让你开心每一天。</p>
</li>
<li>
<span class="span1"><img src="images/ertong.jpg" width="90" height="90" /></span>
<h2>Video for children</h2>
<p>儿童视频，覆盖各个年龄段的儿童节目，内容包含儿歌、益智、童话等。</p>
</li>
</ul>
</div>
</div>
</div>
<!--音乐播放-->
<div class="music">
<div class="main">
<div class="btn_music" id="btn_music">
<a href="javascript:;">播放</a>
</div>
<div class="music_play">
<img src="images/yuan.png" id="music-img"/>
<audio src="video/记忆之都.mp3" id="theplayer"></audio>
<div class="music_text">
<p>有一天，当音乐与摄影碰撞……</p>
<p>“本来摄影是我最无意探索的媒介， 音乐对我来说一直有巨大的吸引力。”</p>
<p>—— Wolfgang Tillmans</p>
<p>透纳奖得主、摄影师</p>
</div>
</div>
</div>
</div>
<!--音乐人介绍-->
<div class="how">
<div class="main">
<hgroup>
<h2>谢霆锋</h2>
<h3>谢谢你的爱1999、因为爱所以爱、黄种人</h3>
</hgroup>
<div class="detail">
<img src="images/timg.jpg"/>
<div class="detail_text">
<p>谢霆锋于1999年9月推出了第一张个人国语专辑《谢谢你的爱1999》，该专辑获得台湾唱片销量榜冠军，正版总销量超100万张。1999年，谢霆锋发行了三张专辑，获得了数十个音乐奖项，全年唱片（正版）总销量突破100万张。</p>
<p class="p1">2000年，谢霆锋相继推出三张专辑《零距离》、《了解》和《Viva》，其中由谢霆锋自己作曲的《因为爱所以爱》和《活着Viva》分别是2000年的年度十大金曲和十大劲歌金曲之一。</p>
</div>
</div>
</div>
</div>
<!--音乐列表-->
<div class="music_list">
<div class="main">
<div class="btn_list">
<a href="music_list.html">音乐列表</a>
</div>
<div class="music_desc">
<div class="music_text">
<p>音乐是比一切智能、一切哲学更高的启示，谁能渗透我音乐的意义，便能超脱寻常人无以自拔的苦难。</p>
<p class="p2">—— 路德维希·凡·贝多芬</p>
</div>
<div class="panda">
</div>
</div>
</div>
</div>
<!--图片轮翻-->
<div class="classify">
<div class="main">
<hgroup>
<h2>Music Category</h2>
<h3>How much do you know?</h3>
</hgroup>
<div class="swiper-container swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="picture">
<img src="images/rock.jpg" width="135" height="135"/>
<p>摇滚(Rock and Roll)是一种音乐类型，以其灵活大胆的表现形式和富有激情的音乐节奏表达情感</p>
<h3>Rock<span>摇滚</span></h3><!--span原因，摇滚有下划线-->
</div>
</div>
<div class="swiper-slide">
<div class="picture">
<img src="images/jazz.jpg" width="135" height="135"/>
<p>爵士乐(Jazz)，一种起源于非洲的音乐形式，由民歌发展而来，爵士乐以多种形式呈现出繁荣景象。</p>
<h3>Jazz<span>爵士</span></h3><!--span原因，摇滚有下划线-->
</div>
</div>
<div class="swiper-slide">
<div class="picture">
<img src="images/pop.jpg" width="135" height="135"/>
<p>流行音乐，根据英语Popular Music翻译过来的。指那些结构短小,并被广大群众所喜爱的歌曲。</p>
<h3>Pop<span>流行</span></h3><!--span原因，摇滚有下划线-->
</div>
</div>
<div class="swiper-slide">
<div class="picture">
<img src="images/hiphop.jpg" width="135" height="135"/>
<p>Hip Hop是起源于20世纪六十年�
静态音乐网站代码及效果 musicmanger.zip
需积分: 18 195 浏览量
2022-01-12
16:46:45
上传
评论
收藏 64.09MB ZIP 举报
musicmanger.zip （94个子文件） 
musicmanger css 
login.css 2KB music_play.css 3KB video_list.css 2KB index.css 13KB site.css 2KB video_play.css 5KB register.css 3KB music_list.css 2KB .project 973B
video_list.html 6KB video 记忆之都.mp3 10.61MB 艾热 - 小人物.mp3 3.4MB
十年.mp4 18.13MB 2.mp3 4.54MB 3.mp4 4.74MB dirty grandpa.mp4 10.75MB 1.mp3 8.91MB video_play.html 6KB swiper swiper.min.js 118KB swiper.min.css 19KB register.html 4KB images 
timg.jpg 24KB m1.jpg 12KB c7.jpg 15KB 新鲜感.jpg 35KB cont1.jpg 32KB v1.jpg 40KB c11.jpg 11KB rock.jpg 47KB 哆来咪.jpg 33KB 礼貌再见.jpg 20KB 抓紧时间爱.jpg 13KB pop.jpg 254KB Real Man.jpg 15KB c5.jpg 12KB 皮卡丘.jpg 17KB mov.jpg 233KB 当这个城市没有你.jpg 21KB 我会陪着你.jpg 38KB m7.jpg 10KB m3.jpg 8KB m2.jpg 8KB 有幸.jpg 22KB
logo.png 4KB kaifa.png 26KB share-f.png 15KB c12.jpg 12KB 星野.jpg 19KB banner-right-icon.png 1KB 不爱玫瑰的女人.jpg 38KB 永不言弃.jpg 30KB AIR·艾热.jpg 25KB map-back.jpg 160KB c2.jpg 9KB girl.jpg 256KB m5.jpg 12KB play-button.png 2KB c10.jpg 8KB cont3.jpg 81KB banner-back.png 1KB banner-left-icon.png 1KB ertong.jpg 97KB new.png 4KB cont2.jpg 13KB music.jpg 530KB c8.jpg 13KB jazz.jpg 85KB 意境2.jpg 618KB hiphop.jpg 250KB xijv.png 29KB 小哥哥王者吗.jpg 43KB 玩乐.jpg 16KB c4.jpg 11KB 我服了.jpg 24KB c9.jpg 14KB yuan.png 675KB share-t.png 16KB c3.jpg 14KB play-icon.png 1KB cont4.jpg 58KB m6.jpg 5KB m4.jpg 11KB cloud.jpg 11KB c6.jpg 13KB 意境1.jpg 391KB jquery music_play.js 546B music_swiper.js 710B video.js 1KB music.js 1KB jquery.js 85KB music_list.html 7KB music_play.html 5KB login.html 1KB index.html 10KB
weixin_44757259
- 粉丝: 3
- 资源: 1
最新资源
- 前端开发基础入门教程 JavaScript语言编程基础教程 第4章 DHTML 共30页.pptx
- 基于C8051F340控制AD7606进行高速采集，用于检测超声多普勒频移
- 前端开发基础入门教程 JavaScript语言编程基础教程 第2章 JavaScript核心 共40页.pptx
- 89dac65de3c6c91ed559c08072465230
- consul.tar镜像下载
- 24730_24740.pcd
- 留言板系统aspx程序
- 进程间同步-信号灯集-封装信号灯集的操作函数
- STM32F103C8T6最小系统板，基于自建库函数实现点亮LED
- 深海泰坦 X8Ti 1060 机械版 GK5CN6X-Z2 Series GK5CN6Z
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0