网页设计与制作 HTML+CSS+JS 音乐网站设计

• ▶️1.视频演示
• 2.图片演示
• HTML结构代码
• CSS样式代码

---

二、网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1）html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

---

三、网站效果

▶️1.视频演示

https://live.csdn.net/v/embed/240775
(W05JP- 音乐9页 html+css+js)

2.图片演示

06.png

05.png

04.png

03.png

02.png

01.png

---

四、 网站代码

HTML结构代码

         
 
音乐阁
 
 
 
首页
 
乐器
 
明星
 
歌曲
 
留言
 
 
 
 
 
金典歌曲
 
 
 
 
 
  
 
海阔天空
 在线试听 
 
 
  
 
千里之外
 在线试听 
 
 
  
 
手心的蔷薇
 在线试听 
 
 
  
 
暧昧
 在线试听 
 
 
 
 
网页底部
 
   

CSS样式代码

 `p {
 margin: 0;
 padding: 0;
 }
 
 
body {
 background-color: #f4f4f4;
 font-family: "Microsoft YaHei";
 font-size: 12px;
 }
 
 
ul,
 ol {
 list-style: outside none none;
 }
 
 
a {
 text-decoration: none;
 }
 
 
toubu {
 
 
width: 1000px;
 height: 60px;
 overflow: hidden;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 }
 
 
toubu .div_01 {
 
 
line-height: 60px;
 font-size: 20px;
 font-weight: bold;
 }
 
 
toubu .div_02 ul li {
 
 
display: inline-block;
 line-height: 60px;
 }
 
 
toubu .div_02 ul li a {
 
 
display: block;
 width: 80px;
 line-height: 60px;
 color: #000;
 font-size: 16px;
 text-align: center;
 }
 
 
toubu .div_02 ul li a:hover {
 
 
background: #cfcfcf;
 }
 
 
toubu .div_03 {
 
 
line-height: 60px;
 }
 
 
toubu .div_03 a {
 
 
display: inline-block;
 font-size: 16px;
 width: 50px;
 line-height: 60px;
 text-align: center;
 color: #000;
 }
 
 
tupian {
 
 
width: 1000px;
 height: 500px;
 overflow: hidden;
 margin: 0 auto 40px;
 }
 
 
tupian img {
 
 
width: 100%;
 height: 500px;
 }
 
 
section {
 
 
width: 1000px;
 height: auto;
 overflow: hidden;
 margin: 0 auto;
 }
 
 
section .div_left {
 
 
width: 100%;
 height: auto;
 float: left;
 }
 
 
section .div_left h2 {
 
 
width: 100%;
 height: 40px;
 border-bottom: 1px solid #ccc;
 margin-bottom: 30px;
 color: rgba(0, 0, 0, .8);
 }
 
 
section .div_left .item {
 
 
border-radius: 12px;
 float:left;
 width:31.3%;
 margin:1%;
 background: #fff;
 margin-bottom: 25px;
 overflow: hidden;
 }
 
 
section .div_left .item div.pic {
 
 
width: 100%;
 height: 385px;
 overflow: hidden;
 }
 
 
section .div_left .item div.pic img {
 
 
width: 100%;
 height: 385px;
 transition: all 0.4s linear;
 }` 

---

五、更多源码

1.如果我的博客对你有帮助 请 “点赞” “✍️评论” “收藏” 一键三连哦！

2.【关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

以上内容技术相关问题欢迎一起交流学习

源码获取 https://gitee.com/zhanyuqiu2022/my-app