登录 注册
开源 企业版 高校版 私有云 Gitee AI NEW
扫描微信二维码支付
取消
支付完成
Watch
不关注 关注所有动态 仅关注版本发行动态 关注但不提醒动态
1 Star 0 Fork 0

关中刀客在青岛 / pro_dingFuHuangZhuangHome

代码 Issues 0 Pull Requests 0 Wiki 统计 流水线
服务
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）
免费加入
该仓库未声明开源许可证文件（LICENSE），使用请关注具体项目描述及其代码上游依赖。
项目仓库所选许可证以仓库主分支所使用许可证为准
克隆/下载
music.html 10.26 KB
一键复制 编辑 原始数据 按行查看 历史
关中刀客在青岛 提交于 2018-01-28 10:08 . 首次提交
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>我们的小窝-博文列表</title>

    <link rel="stylesheet" href="css/bootstrap.css">

    <link rel="stylesheet" href="css/bootstrap.min-3.3.7-blue.css">

    <link rel="stylesheet" href="css/style.css">

    <style>

        h2{

            margin-top: 1em;

        }

    </style>

</head>

<body id="music">

<!--导航-->

<nav class="navbar navbar-default navbar-fixed-top">

    <!--小屏幕按钮和logo-->

    <div class="container">

        <div class="navbar-header">

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a href="index.html" class="navbar-brand">我们的小窝</a>

        </div>

        <!--小屏幕按钮和logo-->



        <div class="navbar-collapse collapse navbar-right">

            <ul class="nav navbar-nav">

                <li><a href="index.html"><span class="glyphicon glyphicon-home"></span>首页</a></li>

                <li><a href="articleList.html"><span class="glyphicon glyphicon-list-alt"></span>博文列表</a></li>

                <li><a href="chat.html"><span class="glyphicon glyphicon-heart"></span>聊天室</a></li>

                <li class="active"><a href="music.html"><span class="glyphicon glyphicon-music"></span>音乐天地</a></li>

                <li class="hidden" style="padding: 5px"><a style="padding: 0"><button id="loginBtn" class="btn btn-success"><span class="glyphicon glyphicon-user"></span>登录/注册</button></a></li>

                <!--登录后显示用户名-->

                <li class="btn-success"><a href="userData.html"><span class="glyphicon glyphicon-user"></span>张晓宇</a></li>

            </ul>

        </div>

    </div>

</nav>

<!--导航-->



<div class="container">

    <div class="row">

        <div class="col-md-12">

            <div id="carousel" class="carousel slide" data-ride="carousel">

                <!-- Indicators -->

                <ol class="carousel-indicators">

                    <li data-target="#carousel" data-slide-to="0" class="active"></li>

                    <li data-target="#carousel" data-slide-to="1"></li>

                </ol>



                <!-- Wrapper for slides -->

                <div class="carousel-inner" role="listbox">

                    <div class="item active">

                        <img src="img/musicDream01.png">

                        <div class="carousel-caption">

                        </div>

                    </div>

                    <div class="item">

                        <img src="img/musicDream02.png">

                        <div class="carousel-caption">

                        </div>

                    </div>

                </div>



                <!-- Controls -->

                <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">

                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

                    <span class="sr-only">Previous</span>

                </a>

                <a class="right carousel-control" href="#carousel" role="button" data-slide="next">

                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

                    <span class="sr-only">Next</span>

                </a>

            </div>

        </div>

        <aside class="col-md-4 ">

            <img class="img-responsive img-thumbnail" src="img/user_zhizhe.jpg">

            <div id="playMusic">

                <audio controls loop autoplay src="music/zxy-qingHuaCi.mp3">

                    <div class="alert alert-danger alert-dismissible" role="alert">

                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                        <strong>您的浏览器不支持背景音乐播放，请升级浏览器！</strong>

                    </div>

                </audio>

            </div>

            <div class="alert alert-danger alert-dismissible" role="alert">

                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                <strong>如果有背景音乐播放，听作品前请在右上角将背景音乐停止！</strong>

            </div>

            <div class="musicMessage">

                <div class="panel panel-primary">

                    <div class="panel-heading">

                        <h3 class="panel-title">智者 - 青花瓷</h3>

                    </div>

                    <div class="panel-body">

                        大家好，这首歌是我翻唱周杰伦的《青花瓷》，希望大家能够喜欢^_^

                    </div>

                </div>

            </div>

        </aside>

        <article class="col-md-8">

            <div class="page-header">

                <h3>最新上传作品</h3>

            </div>

            <table class="table table-hover">

                <thead>

                <tr>

                    <th>播放</th><th>作品名称</th><th>作者</th><th>来源</th><th>播放次数</th><th>发表时间</th>

                </tr>

                </thead>

                <tbody>

                <tr>

                    <td><button class="btn btn-success btn-sm play"><span class="glyphicon glyphicon-play-circle"></span></button></td>

                    <!--<td>青花瓷<a class="hidden" href="music/zxy-qingHuaCi.mp3"></a> </td><td><a href="userData.html">智者</a></td><td>翻唱</td><td>15</td><td>2014-11-08</td>-->

                    <td>青花瓷<a class="hidden" href="http://civilnet.cn:8080/music/zyh_theForgotten89thKey.mp3"></a> </td><td><a href="userData.html">智者</a></td><td>翻唱</td><td>15</td><td>2014-11-08</td>

                </tr>

                <tr>

                    <td><button class="btn btn-success btn-sm play"><span class="glyphicon glyphicon-play-circle"></span></button></td>

                    <td>光阴的故事<a class="hidden" href="music/lyz-guangYinDeGuShi.mp3"></a></td><td><a href="userData.html">黑洞栀子</a></td><td>翻唱</td><td>14</td><td>2013-07-18</td>

                </tr>

                <tr>

                    <td><button class="btn btn-success btn-sm play"><span class="glyphicon glyphicon-play-circle"></span></button></td>

                    <td>大海<a class="hidden" href="music/lq-daHai.mp3"></a></td><td><a href="userData.html">谦谦</a></td><td>翻唱</td><td>13</td><td>2013-05-26</td>

                </tr>

                <tr>

                    <td><button class="btn btn-success btn-sm play"><span class="glyphicon glyphicon-play-circle"></span></button></td>

                    <td>忘情水<a class="hidden" href="music/gemfield-wangQingShui.mp3"></a></td><td><a href="userData.html">gemfield</a></td><td>翻唱</td><td>12</td><td>2013-01-22</td>

                </tr>

                <tr>

                    <td><button class="btn btn-success btn-sm play"><span class="glyphicon glyphicon-play-circle"></span></button></td>

                    <td>红豆<a class="hidden" href="music/lss-hongDou.mp3"></a></td><td><a href="userData.html">black佩佩珠</a></td><td>翻唱</td><td>11</td><td>2013-03-21</td>

                </tr>

                <tr>

                    <td><button class="btn btn-success btn-sm play"><span class="glyphicon glyphicon-play-circle"></span></button></td>

                    <td>老爸老妈<a class="hidden" href="music/daoke-laoBaLaoMa.mp3"></a></td><td><a href="userData.html">daoke</a></td><td>改编/翻唱</td><td>10</td><td>2016-01-17</td>

                </tr>

                <tr>

                    <td><button class="btn btn-success btn-sm play"><span class="glyphicon glyphicon-play-circle"></span></button></td>

                    <td>夜的诉说<a class="hidden" href="music/zyh_nightTell.mp3"></a></td><td><a href="userData.html">张宇桦</a></td><td>原创</td><td>10</td><td>2016-01-17</td>

                </tr>

                </tbody>

            </table>

            <div class="page-header">

                <h3>用户推荐</h3>

            </div>

            <div class="col-md-3">

                <div class="userRecommended">

                    <img class="img-responsive img-rounded" src="img/user_shenlukun.jpg" alt="">

                    <div>Hello，大家好，我是周杰伦<br>……<br>的歌迷，希望大家喜欢我的歌</div>

                </div>

            </div>

            <div class="col-md-3">

                <div class="userRecommended">

                    <img class="img-responsive img-rounded" src="img/user_futhead.jpg" alt="">

                    <div>请期待Futhead将带给大家一首《红日》</div>

                </div>

            </div>

            <div class="col-md-3">

                <div class="userRecommended">

                    <img class="img-responsive img-rounded" src="img/user_liuyizhong.jpg" alt="">

                    <div>我的作品《光阴的故事》有MV版的，轻触<a href="http://player.youku.com/player.php/sid/XNTg1NzQzMTQ0/v.swf" target="_blank">这里</a>可以观看</div>

                </div>

            </div>

        </article>

    </div>

</div>

<!--

<div id="bgMusic">

    <audio autoplay controls loop src="">

        <div class="alert alert-danger alert-dismissible" role="alert">

            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

            <strong>您的浏览器不支持背景音乐播放，请升级浏览器！</strong>

        </div>

    </audio>

</div>

-->





<footer id="footer" class="btn-primary">

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-12">

                <p>Copyright © 2012-2015&nbsp;&nbsp;<br class="visible-xs">http://e-art.taobao.com&nbsp;&nbsp;<br

                        class="visible-xs">鲁ICP备12345678号-4&nbsp;&nbsp;</p>

            </div>

        </div>

    </div>

</footer>



<script src="js/jquery-2.2.4.js"></script>

<script src="js/bootstrap.js"></script>

<script src="js/main.js"></script>



</body>

</html>
HTML/CSS
1
https://gitee.com/daoke0818/pro_dingFuHuangZhuangHome.git
git@gitee.com:daoke0818/pro_dingFuHuangZhuangHome.git
daoke0818
pro_dingFuHuangZhuangHome
pro_dingFuHuangZhuangHome
master
点此查找更多帮助

搜索帮助

Git 命令在线学习 如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部