HTML5期末⼤作业：在线⾳乐⽹站设计——简洁bootstrap响应式社交⾳乐⽹站
模板ht。。。
HTML5期末⼤作业：在线⾳乐⽹站设计——简洁bootstrap响应式社交⾳乐⽹站模板html整站(38页) HTML+CSS+JavaScript 学⽣DW⽹页设计作业成品 web课程设计⽹页规划与设计计算机毕设⽹页设计源码
常见⽹页设计作业题材有 个⼈、美⾷、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节⽇、戒烟、电影、摄影、⽂化、家乡、鲜花、礼品、汽车、其他 等⽹页设计题⽬, A+⽔平作业, 可满⾜⼤学⽣⽹页⼤作业⽹页设计需求, 喜欢的可以下载!
作品介绍
1.⽹页作品简介 ：HTML期末⼤学⽣⽹页设计作业 A+⽔平 ，喜欢的可以下载，⽂章页⽀持⼿机PC响应式布局。
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="stylesheet"href="js/jPlayer/jplayer.flat.css"type="text/css"/>
<link rel="stylesheet"href="css/bootstrap.css"type="text/css"/>
<link rel="stylesheet"href="css/animate.css"type="text/css"/>
<link rel="stylesheet"href="css/font-awesome.min.css"type="text/css"/>
<link rel="stylesheet"href="css/simple-line-icons.css"type="text/css"/>
<link rel="stylesheet"href="css/font.css"type="text/css"/>
<link rel="stylesheet"href="css/app.css"type="text/css"/>
<!--[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>
</head>
<body class="">
<section class="vbox">
<header class="bg-white-only header header-md navbar navbar-fixed-top-xs">
<div class="navbar-header aside bg-info dk">
<a class="btn btn-link visible-xs"data-toggle="class:nav-off-screen,open"data-target="#nav,html">
<i class="icon-list"></i>
</a>
<a href="index.html"class="navbar-brand text-lt">
<i class="icon-earphones"></i>
<img src="images/logo.png"alt="."class="hide">
<span class="hidden-nav-xs m-l-sm">Musik</span>
</a>
<a class="btn btn-link visible-xs"data-toggle="dropdown"data-target=".user">
<i class="icon-settings"></i>
</a>
</div><ul class="nav navbar-nav hidden-xs">
<li>
<a href="#nav,.navbar-header"data-toggle="class:nav-xs,nav-xs"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, "> </div>
</div>
</form>
<div class="navbar-right ">
<ul class="nav navbar-nav m-n hidden-xs nav-user user">
<li class="hidden-xs">
<a href="#"class="dropdown-toggle lt"data-toggle="dropdown">
<i class="icon-bell"></i>
<span class="badge badge-sm up bg-danger count">2</span>
</a>
<section class="dropdown-menu aside-xl animated fadeInUp">
<section class="panel bg-white">
<div class="panel-heading b-light bg-light">
<strong>You have <span class="count">2</span> notifications</strong>
</div>
<div class="list-group list-group-alt">
<a href="#"class="media list-group-item">
<span class="pull-left thumb-sm">
<img src="images/a0.png"alt="..."class="img-circle">
</span>
<span class="media-body block m-b-none">
Use awesome animate.css<br>
<small class="text-muted">10 minutes ago</small>
</span>
</a>
<a href="#"class="media list-group-item">
<span class="media-body block m-b-none">
1.0 initial released<br>
<small class="text-muted">1 hour ago</small>
</span>
</a>
</div>
<div class="panel-footer text-sm">
<a href="#"class="pull-right"><i class="fa fa-cog"></i></a>
<a href="#notes"data-toggle="class:show animated fadeInRight">See all the notifications</a>
<a href="#notes"data-toggle="class:show animated fadeInRight">See all the notifications</a>
</div>
</section>
</section>
</li>
<li class="dropdown">
<a href="#"class="dropdown-toggle bg clear"data-toggle="dropdown">
<span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
<img src="images/a0.png"alt="...">
</span>
John.Smith <b class="caret"></b>
</a>
<ul class="dropdown-menu animated fadeInRight">
<li>
<span class="arrow top"></span>
<a href="#">Settings</a>
</li>
<li>
<a href="profile.html">Profile</a>
</li>
<li>
<a href="#">
<span class="badge bg-danger pull-right">3</span>
Notifications
</a>
</li>
<li>
<a href="docs.html">Help</a>
</li>
<li class="divider"></li>
<li>
<a href="modal.lockme.html"data-toggle="ajaxModal">Logout</a>
</li>
</ul>
</li>
</ul>
</div>
</header>
<section>
<section class="hbox stretch">
<!-- .aside -->
<aside class="bg-black dk aside hidden-print"id="nav">
<section class="vbox">
<section class="w-f-md scrollable">
<div class="slim-scroll"data-height="auto"data-disable-fade-out="true"data-distance="0"data-size="10px"data-railOpacity="0.2">
<!-- nav -->
<nav class="nav-primary hidden-xs">
<ul class="nav bg clearfix">
<li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
Discover
</li>
<li>
<a href="index.html">
<i class="icon-disc icon text-success"></i>
<span class="font-bold">What's new</span>
</a>
</li>
<li>
<a href="genres.html">
<i class="icon-music-tone-alt icon text-info"></i>
<span class="font-bold">Genres</span>
</a>
</li>
</li>
<li>
<a href="events.html">
<i class="icon-drawer icon text-primary-lter"></i>
<b class="badge bg-primary pull-right">6</b>
<span class="font-bold">Events</span>
</a>
</li>
<li>
<a href="listen.html">
<i class="icon-list icon  text-info-dker"></i>
<span class="font-bold">Listen</span>
</a>
</li>
<li>
<a href="video.html"data-target="#content"data-el="#bjax-el"data-replace="true">
<i class="icon-social-youtube icon  text-primary"></i>
<span class="font-bold">Video</span>
</a>
</li>
<li class="m-b hidden-nav-xs"></li>
</ul>
<ul class="nav"data-ride="collapse">
<li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted">
Interface
</li>
<li >
<a href="#"class="auto">
<span class="pull-right text-muted">
<i class="fa fa-angle-left text"></i>
<i class="fa fa-angle-down text-active"></i>
</span>
<i class="icon-screen-desktop icon">
</i>
<span>Layouts</span>
</a>
<ul class="nav dk text-sm">
<li >
<a href="layout-color.html"class="auto">
<i class="fa fa-angle-right text-xs"></i>
<span>Color option</span>
</a>
</li>
<li >
<a href="layout-boxed.html"class="auto">
<i class="fa fa-angle-right text-xs"></i>
<span>Boxed layout</span>
</a>
</li>
<li >
<a href="layout-fluid.html"class="auto">
<i class="fa fa-angle-right text-xs"></i>
<span>Fluid layout</span>
</a>
</li>
</ul>
</li>
<li >
<a href="#"class="auto">
<span class="pull-right text-muted">
<i class="fa fa-angle-left text"></i>
餐饮美食食谱网站html模板<i class="fa fa-angle-down text-active"></i>
</span>