web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站（带设计报告）

最新推荐文章于 2024-06-05 09:37:26 发布
最新推荐文章于 2024-06-05 09:37:26 发布
阅读量599 收藏 2
点赞数 1
文章标签： web前端大作业 web实训大作业 css 期末网页作业 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38517951/article/details/130418607
版权
本文介绍了一位技术博主的web前端期末大作业，内容包括音乐网页设计，采用HTML+CSS+JS技术，模拟网易云音乐等风格，包含多个页面，设计丰富，布局清晰。网站代码结构良好，兼容主流浏览器，使用了浮动布局，包含多媒体元素和JS特效，旨在提升用户体验。
摘要由CSDN通过智能技术生成

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目

🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。

二、✍️网站描述

🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成。
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转。
  5. 要有JS特效，如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
  7. 页面清爽、美观、大方，不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

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

📓网站程序方面：计划采用最新的网页编程语言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代码）。

四、💠网站演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、⚙️ 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>youngmusic</title>
		<style type="text/css">
			/* <!-- 公共css --> */
			::selection {
     
				color: #fff;
				background: #9B0909;
			}

			* {
     
				margin: 0px;
				padding: 0px;
				list-style: none;
			}

			a {
     
				text-decoration: none;
				color: #000000;
			}

			hr {
     
				height: 1.1px;
			}

			/* 隐藏 */
			.notShow {
     
				display: none;
			}

			/* 头部一级菜单被选中 */
			.topCheck:hover {
     
				background: #000;
			}

			/* 头部二级菜单被选中 */
			.topItemCheck:hover {
     
				background: #9B0909;
			}

			/* 头部css */
			#top {
     
				margin: 0 auto;
				width: 100%;
				height: 70px;
				background: #242424;
				margin-bottom: 5px;
			}

			/* 登录 */
			.m_login {
     
				right: 180px;
			}

			/* 退出登录 */
			.m_login2 {
     
				display: none;
				color: white;
				top: 50px;
				z-index: 100;
				right: 170px;
				width: 60px;
				line-height: 50px;
				height: 50px;
				background-color: red;
			}

			.m_login2 {
     
				color: white;
				background-color: black;
				z-index: 101;
			}

			.m_login:hover {
     
				color: #fff;
			}

			#spanTip {
     
				color: white;
				/* background-color: black; */
				z-index: 100;
				position: absolute;
				right: 10px;
			}


			/* 登录之后的图片 */
			.m_img {
     
				right: 60px;
			}

			.user {
     
				width: 40px;
				height: 40px;
				margin: auto;
				margin-left: -10px;
				border-radius: 40px;
				/* 设置图片平铺 */
				object-fit: initial;
			}

			/* logo */
			.logo {
     
				margin-left: 10%;
				margin-right: 5%;
				line-height: 70px;
				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
				font-size: 25pt;
				color: rgb(255, 255, 255);
				text-shadow: rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 50px, rgb(194, 12, 12) 0px 0px 10px, rgb(194, 12, 12) 0px 0px 20px, rgb(194, 12, 12) 0px 0px 30px, rgb(194, 12, 12) 0px 0px 30px, rgb(194, 12, 12) 0px 0px 50px;
				/* transition:all 0.8s;
				*/
				cursor: pointer;
			}

			/* 一级菜单 */
			.m_top {
     
				display: flex;
				line-height: 70px;
				position: relative;
			}

			.m_top>a {
     
				position: absolute;
				color: #ccc;
				right: 70px;
				width: 150px;
				text-align: center;
				/* border: 1px solid yellow; */
				overflow: hidden;
				font-size: 0.9em;
			}

			/* 创作者中心 */
			.m_content {
     
				right: 280px;
			}

			.m_content:hover {
     
				color: #FFFFFF;
			}

			/* 输入框背景 */
			.m_input {
     
				width: 210px;
				height: 33px;
				background: #FFFFFF;
				margin: auto;
				position: absolute;
				right: 240px;
				top: 20px;
				line-height: 30px;
				border-radius: 30px;
				/* display: none; */
			}

			/* .m_input input:-internal-autofill-selected {
			  background: transparent !important;
			} */

			/* 搜索图片 */
			.m_input img {
     
				width: 18px;
				position: absolute;
				margin-top: 8px;
				margin-left: 10px;
			}

			/* 输入框 */
			.m_input input {
     
				position: absolute;
				margin-top: 4px;
				margin-left: 33px;
				border: 0;
				outline: none;
				width: 150px;
				height: 25px;
			}

			.userPhoto {
     
				position: absolute;
				right: 65px;
			}

			.layui-nav-bar {
     
				background-color: transparent;
			}


			/* 第一个ul菜单 */
			.menu1 {
     
				height: 70px;
				width: 40%;
				text-align: center;
				margin-left: -50px;
			}

			.menu1>li {
     
				float: left;
				transition: all 0.5s;
				width: 25%;
				flex-grow: 1;
			}

			.menu1 a {
     
				color: #ccc;
				display: inline-block;
				width: 100%;
				height: 100%;
				transition: all 0.5s;

			}

			/* 鼠标移入事件 menu菜单li */
			.menu1>li:hover {
     
				background: #000000;
				transition: all 0.5s;
			}

			.menu1>li:hover a {
     
				color: #fff;
				transition: all 0.5s;
			}

			/* 头部红色横条 */
			.m_back {
     
				width: 100%;
				height: 5px;
				background: #C20C0C;
			}

			/* 发现音乐的二级菜单 首页被显示 其他页面被隐藏 */
			.menu2 {
     
				display: flex;
				height: 30px;
				background: #C20C0C;
				margin-bottom: 30px;
				padding-left: 30%;
				line-height: 23px;
				position: relative;
				width: 70%;
				z-index: 1;
			}

			.menu2 li {
     
				padding: 0 30px;
			}

			.menu2 li>a {
     
				padding: 3px 15px;
				border-radius: 10px;
				font-size: 0.85em;
				color: #FFFFFF;
				transition: all 0.5s;
			}

			.menu2 li>a:hover {
     
				background: #9B0909;
				transition: all 0.2s;
			}

			/* <!-- 底部版权 --> */
			#bottom {
     
				font-size: 0.9em;
				position: relative;
				bottom: 0;
				height: 200px;
				margin-top: 50px;
				color: #fff;
				background-color: #393D49;
			}

			#bottom .fl {
     
				float: left;
				margin: 60px 0 0 20%;
			}

			#bottom .fl p {
     
				line-height: 30px;
			}

			#bottom .fl p .comm {
     
				margin-left: 20px;
			}

			#bottom .fl a {
     
				color: #ddd;
			}

			#bottom .fl a:hover {
     
				color: #fff;
				text-decoration: underline #fff;
			}

			#bottom .fr {
     
				float: right;
				margin: 30px 22% 0 0;
			}

			#bottom .fr ul li {
     
				line-height: 30px;
				color: #ddd;
			}

			#bottom .fr ul li:hover {
     
				cursor: pointer;
				color: #fff;
				text-decoration: underline #fff;
			}

			/* 底部播放区 重点！！！！！ */
			#head {
     
				position: fixed;
				bottom: 0px;
				width: 100%;
				text-align: right;
			}

			#head>img {
     
				height: 20px;
				margin-right: 50px;
			}

			/* 播放区域 */
			#wrap {
     
				/* opacity:0.9; */
				/* position: fixed; */
				bottom: -55px;
				height: 55px;
				width: 100%;
				background: rgb(36, 36, 36, 0.9);
				box-shadow: 0px -3px 5px rgb(36, 36, 36, 0.9);
				/* 文字不被选中 */
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			/* 按钮的样式 暂停 播放 进度条 头像 下一曲啥的 */
			/* 按钮的大致布局 */
			.play_left {
     
				position: absolute;
				left: 150px;
			}

			.play_left img {
     
				opacity: 0.7;
			}

			.play_right {
     
				position: absolute;
				right: 50px;
			}

			.play_right img {
     
				opacity: 0.7;
			}

			.t_10 {
     
				position: relative;
				top: 18px;
				width: 20px;
				margin: 0 10px;
			}

			.t_20 {
     
				position: relative;
				width: 35px;
			}

			.t_30 {
     
				position: relative;
				top: 2px;
				width: 50px;
			}

			/* 进度条啥的 小细节 */
			#SongList {
     
				height: 280px;
				width: 350px;
				background: #000;
				z-index: 9;
				position: fixed;
				bottom: 55px;
				right: 60px;
				overflow-y: auto;
				display: none;
				text-align: left;
				color: #C2C2C2;
				font-size: 0.9em;
			}

			#SongList ul {
     
				/* background:#9B0909;
				*/
				margin-left: 10px;
			}

			#SongList ul li {
     
				margin: 2px;
				cursor: pointer;
			}

			#SongList ul li:hover {
     
				color: #fff;
			}

			#p2 {
     
				display: none;
			}

			#p1,
			#p2 {
     
				opacity: 1;
			}

			#wrap img:hover {
     
				opacity: 1;
			}

			.SongInfo {
     
				position: absolute;
				left: 350px;
			}

			.SongInfo a {
     
				color: #FFFFFF;
				font-size: 0.8em;
			}

			.song {
     
				position: relative;
				top: -20px;

				margin-left: 20px;
				left: 20px;

			}

			.singer {
     
				position: relative;
				top: -20px;
				margin-left: 20px;
			}

			.singer a {
     
				color: #CCCCCC;
			}

			.jinDuTiao {
     
				position: absolute;
				top: 30px;
				left: 60px;
				width: 600px;
				height: 20px;
				/* background:#fff;
				*/
			}

			.jinDuTiao .JinDu {
     
				width: 100%;
				height: 10px;
				background: #000000;
				border-radius: 55px;
				box-shadow: inset 0px -1px 1px #717171;
			}

			.JinDu .progress {
     
				width: 0%;
				height: 100%;
				border-radius: 5px;
				background-color: #9B0909;
				box-shadow: inset 0px -1px 1px #000;
			}

			.jinDuTiao .YuanDian {
     
				position: absolute;
				width: 15px;
				height: 15px;
				border-radius: 15px;
				background: #F5F5F5;
				top: -2px;
				background-image: radial-gradient(circle, #f00, #fff, #fff);
			}

			.songTime {
     
				position: absolute;
				left: 685px;
				top: 25px;
				color: #CCCCCC;
				font-family: "bodoni mt";
				width: 100px;
			}

			.songTime span:nth-of-type(2) {
     
				color: #717171;
			}

			.songImg {
     
				position: relative;
				top: 6px;
				border-radius: 5px;
				/* border:1px solid #000000;
				*/
				box-shadow: 2px #000000;
				border-radius: 5px;
				width: 40px;
				height: 40px;
			}

			/* 音量的位置 */
			#volume {
     
				position: absolute;
				bottom: 20px;
				/* margin-left: 38px; */
				display: none;
				width: 20px;
				background-color: rgb(46, 44, 46, 0.8);
				padding: 10px;
				padding-top: 15px;
			}

			.layui-slider-vertical {
     
				margin: auto;
			}

			/* 滚动条样式 */
			#SongList::-webkit-scrollbar {
     
				width: 5px;
				/* height: 10px; */
				border-radius: 10px;
			}

			#SongList::-webkit-scrollbar-button,
			#Song
最低0.47元/天 解锁文章
DW网页设计与制作
关注
11个精美网页——Web前端开发技术课程大作业，期末考试，Dreamweaver简单网页制作
QQ_____365392777的博客
08-08 4337
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
【网页设计】期末大作业html+css（体育网站)--杜丹特篮球介绍8页 带报告
而风不止
11-21 7485
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
web前端期末大作业实例 (1500套) 集合 (1)
最新发布
HTML网页设计
06-05 1140
文章目录📚web前端期末大作业 (1500套) 集合一、网页介绍二、网页集合💌表白网页 125套 (集合)💙Echarts大屏数据展示 150套 (集合)一、基于HTML+Echarts技术制作二、基于VUE+Echarts技术制作🎁更多源码 📚web前端期末大作业 (1500套) 集合 临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的
Web音乐网站设计，一个音乐的静态网站，包含多个页面。
04-23
http://wx2.sinaimg.cn/mw690/a6720b83ly1g2ciagfvsbj20m30p8gnt.jpg 文件项目 http://wx2.sinaimg.cn/mw690/a6720b83ly1g2cia89m6bj21hc0u04f5.jpg 总览1 http://wx4.sinaimg.cn/mw690/a6720b83ly1g2ciaekma5j21hc0u0u0y.jpg 总览2 http://wx3.sinaimg.cn/mw690/a6720b83ly1g2ciaallxnj21hc0u0wtd.jpg 这里可以看到部分网页的图片。 里面含有读书报告。
用HTML+CSS做一个学生抗疫感动专题网页设计作业网页
html精品源码
08-11 176
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站（带设计.md
08-10
根据标题“web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站”，我们可以看出这是一项结合了HTML、CSS以及JavaScript技术的综合性实践任务。其目的是让学生通过实际操作掌握网页设计的基本技能，包括...
web前端期末大作业：基于HTML+CSS+JavaScript制作鲜花礼品在线购物网站设计(19页)
08-10
该项目为一次典型的Web前端期末大作业，旨在通过实际项目让学生掌握并应用HTML、CSS以及JavaScript基础知识，实现一个具有基本交互功能的鲜花礼品在线购物网站设计。该网站设计不仅适用于学生的学习实践，同时也能够...
web前端期末大作业：基于HTML+CSS+JavaScript学校教育主题-卡通风格在线职业教育网页设计 (14页)
08-10
该项目主要针对的是高校学生在学习HTML、CSS以及JavaScript等前端技术时需要完成的一项期末大作业。该作业的目标是设计并实现一个具有卡通风格的在线职业教育网页，旨在通过实际操作加深学生对前端开发技术的理解和...
基于Java-web的音乐网站设计与实现
06-12
这是一个音乐网站的课程设计，是基于Java-web的，啦啦啦
WEB设计基础期末大作业（含实验报告）.rar
04-14
大二上学期的web选修课期末大作业，仅供参考，如果有错的希望更正，有问题可以私信，emmm，也想不到说啥了
web网页制作期末大作业
11-17
分享思维,改变世界. web网页制作,期末大作业. 所用技术:html css javascript 分享所学所得
web大作业网页设计
06-16
网页设计，应用dremweave8.0，可应用到visualstuadio
基于html5的音乐网站,基于C#和HTML5的在线音乐网站设计
weixin_42499530的博客
06-04 697
毕业设计是基于c#和html5的在线音乐网站设计，下载了visual studio 2017准备开发。这个软件可以写页面也可以开发后台，很方便了。项目的创建：asp.net web，visual studio中有两个选项，其中一个有framework，在往上查了一下，选择了有framework的，毕竟只想做一个简单的毕业设计。the .net framework这个是我们现在经常用的，用这个可以创...
web结课大作业结业报告(附源码及展示效果)
热门推荐
qq_46061082的博客
05-21 2万+
文章目录前言一、遇到的问题？二、问题的解决1.引入库2.读入数据总结附录 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、遇到的问题？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、问题的解决 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings wa
WEB设计基础期末大作业(含实验报告)
科大云炬
06-11 4156
学　　号姓名设计日期2012.12.15设计名称个人网站设计设计目的：　　掌握小型网站设计的常用方法与技术。设计内容：　　设计一个小型网站，主题为……，主页的名称为myIndex.html，主页内容要包括网站logo，导航栏，页脚等内容；页面总数量不少于9个，不多于12个，网站设计中要综合运用文字、图片、动画等媒体；设计技术要包括CSS、JavaScript、AP DIV、表单、框架、行为与事件等网站结构图：网站总体实现一个基本的个人博客功能，展示有日志，相册，音乐，个人资料等。网站上面部分结构图： 网站下
app下载页面html模板_大学生校园班级网页设计成品 学校网站作业模板下载 静态HTML校园班级网页制作 dreamweaver网页作业下载...
weixin_39522103的博客
11-29 897
本期为大家展示STU网页设计原创校园班级类网页作品，作品可使用任意HTML软件编辑修改网页中的文字信息，图片可直接覆盖替换。原创校园班级网页作品专区链接：www.lilixing.com/html/xiaoyuan/原创作品记录去向，不重复！此作品采用div css布局制作，作品主题为西京学院-传媒学院网站(作品下载后可自己更改学校)作品共6页：学院首页、学院简介、校徽介绍、学院风采、师...
HTML5旅游网站设计作业：21页HTML+CSS+JavaScript源码
"该资源是一个面向大学生的网页设计作业，主要是一个旅游门户网站的HTML静态页面设计，使用了HTML5、CSS3和JavaScript技术。页面布局采用DIV+CSS，设计风格丰富且色彩鲜明，包含了多种页面元素，如导航、背景色、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值