作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/142790765
HTML5实现古典音乐网站源码模板3，最全模板，大作业，毕业设计，古典音乐网站，音乐网站，网站源码，介绍古典音乐由来，分为网站首页，古典音乐，著名人物，古典乐器，历史起源，联系我们等页面，实现了轮播图、视频、音乐播放，表单、TAB、导航栏、底部栏、列表、图文组合、返回顶部等功能，让你代入古典音乐的体验感，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
1.设计来源
HTML5实现古典音乐网站系列源码模板，总共有三种风格，这是 第三种风格，打造最炫古典音乐网站，展现古典音乐的旋律之美，整体代码整洁，容易上手，内容丰富，三种风格的代码模板演示地址如下：
1.1 主界面
古典音乐网站系列源码第三版，每个版本风格都不一样，这一版本风格酷炫，内容充实，布局规范，看起来给人感觉很舒适，基本的功能点都有，可以在此模板上扩展自己的内容，代码注释完整，简单易懂。
演示效果分为两种，一种是页面截图，总共六个页面，六张图片；一种是视频演示，简单的把网站功能点及效果都能明确的看到，但是视频录制清晰度不是很完美，真实效果会比图片和视频效果好，如果整体风格满意，可以下载源码查看，快去体验吧！！！
1.2 古典音乐界面
1.3 著名人物界面
1.4 古典乐器界面
1.5 历史起源界面
1.6 联系我们界面
2.效果和源码
2.1 动态效果
这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的古典音乐网站。
HTML5实现古典音乐网站源码模板3
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。或者直接在这里 下载源码，如有其他技术问题，请私信博主，博主看到后第一时间回复。
<!--各行各业的模板源码，来自CSDN上的xcLeigh博客：https://blog.csdn.net/weixin_43151418/article/details/128349160-->
<!DOCTYPE HTML>
<html>
<head>
<title>古典音乐网站</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<script src="js/jquery-1.11.0.min.js"></script>
<link href="css/style.css" rel='stylesheet' type='text/css' />
<script src="js/highcharts.js"></script>
<script src="js/jquery.easydropdown.js"></script>
<script type='text/javascript' src='js/xcleigh.js'></script>
<link rel="stylesheet" href="js/swiper-bundle.min.css" />
<link href="css/myss.css" rel='stylesheet' type='text/css' />
</head>
<body>
<!-- Header Starts Here -->
<div class="container">
<div class="header">
<div class="logo">
<a href="index.html"><h1>♪ 山涧流水の古典音乐</h1></a>
</div>
<span class="menu"></span>
<div class="cleary"></div>
<div class="navigation">
<ul class="navig">
<li><a href="index.html" class="active">网站首页</a></li>
<li><a href="gdyy.html">古典音乐</a></li>
<li><a href="men.html">著名人物</a></li>
<li><a href="gdyq.html">古典乐器</a></li>
<li><a href="lsqy.html">历史起源</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
<div class="search-bar">
<input type="submit" value="" />
<div class="text">
<input type="text" placeholder="查找古典音乐.." required=" " />
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Header Ends Here -->
<!-- Banner Starts HEre -->
<div class="container">
<div class="banner">
<img onclick="window.open('https://blog.csdn.net/weixin_43151418/article/details/140635640','_blank')" src="images/logo.png" alt="xcLeigh">
<h2>高山流水</h2>
<p>
《高山流水》 ®，中国古琴曲，属于中国十大古曲之一。传说先秦的琴师伯牙一次在荒山野地弹琴，樵夫钟子期竟能领会这是描绘“峨峨兮若泰山”和“洋洋兮若江河”。伯牙惊道：“善哉，子之心而与吾心同。”钟子期死后，伯牙痛失知音，摔琴绝弦，终生不弹，故有高山流水之曲。
“高山流水”比喻知己或知音，也比喻乐曲高妙。后世分为《高山》、《流水》二曲；另有同名筝曲《高山流水》，与古琴曲无传承关系。
</p>
<p>
</p>
<a href="gdyy.html">▶ 聆听更多古典音乐</a>
</div>
</div>
<!-- Banner Ends HEre -->
<!-- Sales Starts Here -->
<div class="container">
<div class="sales-row">
<div class="sales-left-column">
<img src="images/rw1.jpg" alt="">
<div class="img-desc">
<h3>李隆基</h3>
<small>(唐玄宗李隆基 / 善骑射，通音律、历象之学)</small>
<p>演奏琵琶、羯鼓，擅长作曲 <a href="#">[更多信息] </a></p>
<div class="cart">
<p>♪《秋风高》</p>
<a href="gdyy.html">古典音乐著名人物</a>
</div>
</div>
</div>
<div class="sales-right-column">
<h3>古典乐器</h3>
<div>
<div id="recipes" style="width:100%; height:260px; margin: 0 auto">
<div style="padding: 0px 26px;">
<div style="display: flex; background-color: white; margin-bottom: 10px; border: 1px solid #82BC2A; border-radius: 10px;">
<div style="width: 120px;">
<img src="images/yq1.png" style="width: 120px; height: 119px; border-right: 1px solid #82BC2A; border-top-left-radius: 10px; border-bottom-left-radius: 10px;" />
</div>
<div style="margin: 14px; width: 100%;">
<a class="afont" href="https://baike.baidu.com/item/琵琶" target="_blank">
琵琶 [传统弹拨乐器]
</a>
<div style="text-indent: 20px;">
琵琶，弹拨乐器首座， 拨弦类弦鸣乐器。木制或竹等制成，音箱呈半梨形，上装四弦，原先是用丝线，现多用钢丝、钢绳、尼龙制成。颈与面板上设有以确定音位的“相”和“品”。
</div>
</div>
</div>
<div style="display: flex; background-color: white; margin-bottom: 10px; border: 1px solid #82BC2A; border-radius: 10px;">
<div style="width: 120px;">
<img src="images/yq2.png" style="width: 120px; height: 119px; border-right: 1px solid #82BC2A; border-top-left-radius: 10px; border-bottom-left-radius: 10px;" />
</div>
<div style="margin: 14px; width: 100%;">
<a class="afont" href="https://baike.baidu.com/item/琵琶" target="_blank">
二胡 [中国传统拉弦乐器]
</a>
<div style="text-indent: 20px;">
二胡（拼音：Erhu） ，是唐代由西域胡人传过来的弦乐器，来自北方的奚部落，因此又称“胡琴”。后来，胡琴发展出了二胡、中胡、京胡、坠胡、板胡等十几个品种，二胡就是其中比较重要的一种。
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sales-week">
<div class="sales-wek-col">
<p>14 + </p>
<h4>乐器种类</h4>
</div>
<div class="sales-wek-col">
<p>999 + </p>
<h4>古典名曲</h4>
</div>
<div class="sales-wek-col no-sale">
<p>999 + </p>
<h4>古典名人</h4>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- Sales Ends Here -->
<!-- Shopping Starts Here -->
<div class="container">
<div class="shopping">
<div class="shopping-col-left">
<h3>古典音乐</h3>
<div style="display: flex; align-items: center; border: 1px solid #BF5B3F; border-radius: 6px;">
<div>
<img src="images/gsls.png" style="width: 160px; border-radius: 6px;" />
</div>
<div style="padding:10px;">
<b>[ 高山流水 ] </b>
<span>中国古琴曲，属于中国十大古曲之一。传说先秦的琴师伯牙一次在荒山野地弹琴，樵夫钟子期竟能领会这是描绘“峨峨兮若泰山”和“洋洋兮若江河”。</span>
<div class="total" ><a href="gdyy.html">▶ 播放</a></div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div style="display: flex; margin-top: 16px; align-items: center; border: 1px solid #BF5B3F; border-radius: 6px;">
<div>
<img src="images/mhsn.png" style="width: 160px; border-radius: 6px;" />
</div>
<div style="padding:10px;">
<b>[ 梅花三弄 ] </b>
<span>，根据《太音补遗》和《蕉庵琴谱》所载，相传原本是晋朝桓伊所作的一首笛曲，后来改编为古琴曲。琴曲的乐谱最早见于公元1425年的《神奇秘谱》。</span>
<div class="total" ><a href="gdyy.html">▶ 播放</a></div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div style="display: flex; margin: 16px 0px; align-items: center; border: 1px solid #BF5B3F; border-radius: 6px;">
<div>
<img src="images/xyxg.png" style="width: 160px; border-radius: 6px;" />
</div>
<div style="padding:10px;">
<b>[ 夕阳箫鼓 ] </b>
<span>为古代中国琵琶曲文曲中代表作品之一，也是中国十大古曲之一。 此曲为琵琶曲中的大文套，由此曲改编的琵琶曲名为《春江花月夜》，此曲最迟在十八世纪就流传在江南一带。</span>
<div class="total" ><a href="gdyy.html">▶ 播放</a></div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="shopping-col-right">
<div style="padding: 32px;">
<h3>历史起源</h3>
<div>
<video width="100%" height="285px" controls style="border-radius: 20px; object-fit: fill;">
<source src="images/gd.mp4" type="video/mp4">
</video>
</div>
<div style="text-indent: 40px; line-height: 25px;">
古典音乐的起源可以追溯到欧洲文艺复兴时期，起初主要是教堂音乐。随着音乐家们对音乐形式、结构和和声的不断探索和发展，古典音乐逐渐形成了独特的风格和格局。在巴洛克音乐时期，古典音乐开始注重声音的层次感和复杂度。到了古典主义时期，古典音乐更加注重对称、平衡和清晰的结构。随后，在浪漫主义时期，古典音乐更加富于感情和表现力。
</div>
</div>
</div>
</div>
</div>
<!-- Shopping Ends Here -->
<div class="container">
<div style="width: 100%; height: 400px; margin-top: 32px;">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url('images/1.jpg');background-repeat:no-repeat;background-size:cover;"></div>
<div class="swiper-slide" style="background-image:url('images/2.jpg');background-repeat:no-repeat;background-size:cover;"></div>
<div class="swiper-slide" style="background-image:url('images/3.jpg');background-repeat:no-repeat;background-size:cover;"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- Footer Starts Here -->
<div class="container">
<div class="footer">
<div class="logo">
<a href="index.html"><h1>♪ 山涧流水の古典音乐</h1></a>
</div>
<p class="copyright">
Copyright © 2024.古典音乐 All rights reserved.
<a href="https://blog.csdn.net/weixin_43151418" target="_blank">xcLeigh</a> |
<a href="https://item.taobao.com/item.htm?id=805108173963" target="_blank">欣晨软件服务</a>
</p>
<ul class="social">
<li onclick="window.open('https://blog.csdn.net/weixin_43151418/article/details/140635640','_blank')"><i class="fa"></i></li>
<li onclick="window.open('https://blog.csdn.net/weixin_43151418/article/details/140635640','_blank')"><i class="fb"></i></li>
<li onclick="window.open('https://blog.csdn.net/weixin_43151418/article/details/140635640','_blank')"><i class="fc"></i></li>
<li onclick="window.open('https://blog.csdn.net/weixin_43151418/article/details/140635640','_blank')"><i class="fd"></i></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<!-- Footer Ends Here -->
<div id="shangxia2">
<span id="gotop1">
<img src="images/huojian.svg" style="background-color: none;box-shadow:none;" alt="返回顶部小火箭">
</span>
</div>
</body>
</html>
源码下载
# 万套模板，程序开发，在线开发，在线沟通
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署（有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
如🈶合作请联系我，期待您的联系。
注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请 留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/142790765（防止抄袭，原文地址不可删除）
扫一扫
1969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
