HTML5期末大作业:在线音乐播放器网站设计——html5全屏的音乐列表播放器页面源码 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他
等网页设计题目,A+水平作业
, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
🧡作者主页
作品介绍
1.网页作品简介
:html5全屏音乐列表播放器页面模板,这是一款音乐播放器插件,制作点击音乐列表播放,配有音乐棒。响应式布局,适用于手机端演示。
2.网页作品编辑
:作品下载后可使用任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++
等任意HTML软件编辑修改网页)。
3.网页作品技术
:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。
文章目录
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<title>Musik | Web Application</title>
<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="shortcut icon" href="images/logo/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/freshline/jquery.freshline.beforeafter.js"></script>
<script type="text/javascript" src="js/freshline/animadrag.js"></script>
<!--[if lt IE 9]>
<script src="js/ie/html5shiv.js"></script>
<script src="js/ie/respond.min.js"></script>
<script src="js/ie/excanvas.js"></script>
<![endif]-->
</head>
<body>
<section class="vbox">
<header class="bg-black lter header header-md navbar navbar-fixed-top-xs">
<ul class="nav navbar-nav hidden-xs">
<li>
<a href="#" class="text-muted">
<i class="fa fa-indent text"></i>
<i class="fa fa-dedent text-active"></i>
</a>
</li>
</ul>
<form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
</span>
<input type="text" class="form-control input-sm no-border rounded" placeholder="Search songs, albums...">
</div>
</div>
</form>
</header>
<section>
<section class="hbox stretch">
<section id="content">
<section class="vbox">
<section class="w-f-md">
<section class="hbox stretch bg-black dker">
<!-- side content -->
<aside class="col-sm-5 no-padder" id="sidebar">
<section class="vbox animated fadeInUp">
<section class="scrollable">
<div class="m-t-n-xxs item pos-rlt">
<div class="top text-right">
<span class="musicbar bg-success bg-empty inline m-r-lg m-t" style="width:25px;height:30px">
<span class="bar1 a3 lter">