基于Bootstrap的网页“音乐播放器博物馆” --- 处女作！
2024-05-17 19:16:46
前言
学习前端语言已经有一段时间了，可是还没有真正着手写一个自己的网页，这次花了一个星期用Bootstrap框架写了个简单的网页，期间出了很多问题，也收获了很多！(具体功能以后会慢慢完善！)
问题：
- JQuery 代码的陌生，致使导航条的功能无法实现，差点想要放弃；
- js的摆放顺序；
- 盒子模型的具体数值以及摆放；
- 图片的大小处理问题；
- 选择器的使用：1.标签选择器 2.class => . 3.id => #.
展示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>音乐播放器博物馆</title><link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" /><style>body{padding-top:50px;padding-bottom:50px;}.carousel{height: 500px;background-color:#000;margin-bottom:60px;}.carousel .item{height: 500px;background-color: #000;}.carousel img{width: 100%;}footer{margin:90px;}#summary-container .col-md-3{text-align:center;}#summary-container img{width:100px;height:60px;}hr.divider{margin:40px;}.tab-content{margin:90px;}#feature-tab{margin-right:50px;margin-left: 50px;}.feature-heading {font-size: 50px;color: #2a6496;}.feature-heading .text-muted {font-size: 28px;}.carousel-caption p{margin-bottom:20px;font-size:20px;line-height:1.8;}</style>
</head>
<body><div class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation"><div class="container"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded=" false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">音乐播放器博物馆</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="#carousel-example-generic">综述</a></li><li><a href="#summary-container" id="sma">简述</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" >特点<span class="caret"></span></a><ul class="dropdown-menu" role="menu" id="kiss"><li><a href="#feature-tab" data-tab="tab-QQmusic">QQ音乐</a></li><li><a href="#feature-tab" data-tab="tab-wangyiyun">网易云音乐</a></li><li><a href="#feature-tab" data-tab="tab-kuwo">酷我音乐</a></li><li><a href="#feature-tab" data-tab="tab-kugou">酷狗音乐</a></li></ul><li><a href="#" data-toggle="modal" data-target="#spaul">关于</a></li></ul></div></div></div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="data:image/d3c7f61a5d2f76fdcd9fd66525a4d2ba.jpg" alt="1 slide"><div class="carousel-caption"><h1>QQ音乐</h1><p>QQ音乐播放器是一款带有精彩音乐推荐功能的播放器。</p><p><a class="btn btn-lg btn-primary" href="https://dldir1.qq.com/music/clntupate/QQMusic_YQQFloatLayer.exe" target="_blank" role="button">点我下载</a></p></div></div><div class="item"><img src="data:image/网易云2.jpg" alt="2 slide"><div class="carousel-caption"><h1>网易云音乐</h1><p>国内首个以“歌单”作为核心架构的音乐APP,国内最大、最优质的“歌单”库,批量遇见好听音乐更加简单,轻松创建“歌单”。</p><p><a class="btn btn-lg btn-primary" href="https://d1.music.126.net/dmusic/obj/w5zCg8OCw6fCn2vDicOl/586346057/3e98/201911319853/cloudmusicsetup2.7.0.198230.exe" target="_blank" role="button">点我下载</a></p></div></div><div class="item"><img src="data:image/bg_like.jpg" alt="3 slide"><div class="carousel-caption"><h1>酷我音乐</h1><p>酷我音乐盒是一款融歌曲和MV搜索、在线播放、同步歌词为一体的音乐聚合播放器。具有“全”、“快”、“炫”三大特点。</p><p><a class="btn btn-lg btn-primary" href="http://down.kuwo.cn/mbox/kwmusic_web_4.exe" target="_blank" role="button">点我下载</a></p></div></div><div class="item"><img src="data:image/20190109104215314555.jpg" alt="4 slide"><div class="carousel-caption"><h1>酷狗音乐</h1><p>酷狗作为中国领先的音乐搜索和下载平台,是中国国内最先提供在线试听功能的音频播放软件。</p><p><a class="btn btn-lg btn-primary" href="http://downmini.kugou.com/web/kugou8395.exe" target="_blank" role="button">点我下载</a></p></div></div></div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">上一页</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">下一页</span></a>
</div><div class="container summary" id="suma">
<div class="row" id="summary-container"><div class="col-md-3"><img src="data:image/qq音乐.jpg" alt="qqmusic"><h2>QQ音乐</h2><p>通过贴心的社区服务,让QQ音乐成为中国网民在线音乐生活的首选品牌，引领着人们的音乐生活方式！</p></div><div class="col-md-3"><img src="data:image/img_localize_0f893220d6a27b8013bedae1ac0c71ca_560x350.jpg" alt="wangyiyun"><h2>网易云音乐</h2><p>明星、专业音乐人、DJ进驻，专业的私房“歌单”和音乐推荐，格调顿现。</p></div><div class="col-md-3"><img src="data:image/20160623145235489.jpg" alt="kuwo"><h2>酷我音乐</h2><p>酷我音乐盒是一款融歌曲和MV搜索、下载、在线播放、歌词同步显示为一体音乐资源聚合器、播放器。</p></div><div class="col-md-3"><img src="data:image/0a76636f8f5c6dcbab3d81984da0d584.jpg" alt="kugou"><h2>酷狗音乐</h2><p>酷狗与中国国内外多家知名品牌企业及机构合作，提供了一个数量庞大的在线音乐库，汇聚了数以万计的在线音乐。
</p></div>
</div>
</div><hr class="divider"><ul class="nav nav-tabs" role="tablist" id="feature-tab"><li class="active"><a href="#tab-QQmusic" role="tab" data-toggle="tab">QQ音乐</a></li><li><a href="#tab-wangyiyun" role="tab" data-toggle="tab">网易云音乐</a></li><li><a href="#tab-kuwo" role="tab" data-toggle="tab">酷我音乐</a></li><li><a href="#tab-kugou" role="tab" data-toggle="tab">酷狗音乐</a></li></ul><div class="tab-content"><div class="tab-pane active" id="tab-QQmusic"><div class="row feature"><div class="col-md-7"><h2 class="feature-heading">QQ音乐<span class="text-muted">腾讯出品</span></h2><p class="lead">QQ音乐播放器是一款带有精彩音乐推荐功能的播放器。同时支持在线音乐和本地音乐的播放，是国内内容最丰富的音乐平台。其独特的音乐搜索和推荐功能，让您可以尽情地享受最流行，最火爆的音乐。只要您拥有QQ音乐播放器，就拥有属于您自己的流行音乐!</p></div><div class="col-md-5"><img class="feature-image img-responsive" src="data:image/QQ截图20191216143036.png" alt="QQmusic"></div></div></div><div class="tab-pane" id="tab-wangyiyun"><div class="row feature"><div class="col-md-5"><img class="feature-image img-responsive" src="data:image/109951164207180884.png" alt="wangyiyun"></div><div class="col-md-7"><h2 class="feature-heading">网易云音乐<span class="text-muted">网红播放器</span></h2><p class="lead">国内首个以“歌单”作为核心架构的音乐 APP，国内最大、最优质的“歌单”库，批量遇见好听音乐更加简单；轻松创建“歌单”。“乐评”氛围，同一首歌，通过其他人的评论，体会当中故事、体会同样的感受，在评论中找到共鸣。用户自上传“主播电台”，音乐故事、脱口秀、情感话题，每个人都能轻松表达自己。明星、专业音乐人、DJ进驻，专业的私房“歌单”和音乐推荐，格调顿现；专业音乐编辑每周新奇独到的专题评论， 听歌也可更有趣。
</p></div></div></div><div class="tab-pane" id="tab-kuwo"><div class="row feature"><div class="col-md-5"><img class="feature-image img-responsive" src="data:image/47033c0.png" alt="wangyiyun"></div><div class="col-md-7"><h2 class="feature-heading">酷我音乐<span class="text-muted">经典软件</span></h2><p class="lead">整合了互联网中的上百万首歌曲、MV、歌词和写真，每周更新百张以上专辑。酷我音乐软件界面一点即播，无需等待；应用多资源超线程技术，令歌曲和MV一点即播，无需等待。同步欣赏明星写真、滚动歌词，像卡拉OK一样欣赏同步歌词，像看电影一样欣赏写真图片，还能把自己的照片配上喜欢的音乐做成MV 秀。</p></div></div></div><div class="tab-pane" id="tab-kugou"><div class="row feature"><div class="col-md-5"><img class="feature-image img-responsive" src="data:image/20151128102356348.jpg" alt="wangyiyun"></div><div class="col-md-7"><h2 class="feature-heading">酷狗音乐<span class="text-muted">Hello 酷狗！</span></h2><p class="lead">酷狗音乐库提供的音乐资源很丰富，在该窗口可以看到有“乐库”、“电台”、“MV”、“直播”、 “歌词”五大标签，汇集了最新的流行音乐资讯及歌曲。酷狗音乐库中的所有音乐都是直接调用酷狗播放器进行播放，即使是最新的歌曲，也能找到并且播放时很流畅，使用酷狗在线试听不会在本地硬盘自动保存，如果想保存该试听歌曲，可以点击试听后面的“下载”按钮进行下载，下载速度快，下载完无要缓冲。</p></div></div></div>
</div><hr class="divider"><footer><p class="pull-right"><a href="#top">回到顶部</a></p><p>© 2019 张晟</p></footer><div class="modal fade" id="spaul"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">关于</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><p>这个网页是小张同学尝试用Boostrap框架开发的处女作！<br>关注小张CSDN：（ID）张甜不拉几</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">了解</button></div></div></div>
</div><script src="bootstrap-3.3.7-dist/js/jquery-1.11.1.min.js"></script><script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><script >$('#feature-tab a').click(function (e) {e.preventDefault()$(this).tab('show')});$('#kiss a').click(function (e) {var href = $(this).attr('href');var tabId = $(this).attr('data-tab');if ('#' !== href) {e.preventDefault();$(document).scrollTop($(href).offset().top - 70);if (tabId) {$('#feature-tab a[href=#' + tabId + ']').tab('show');}}});</script>
</body>
</html>
基于Bootstrap的网页“音乐播放器博物馆” --- 处女作！相关推荐
- 基于Vue实现的网页音乐播放器
基于Vue现实网页音乐播放器 该音乐播放器是由父组件和子组件相结合通过axios获取音乐的相关属性,将其显示在界面,通过点击实现相应的操作.链接为https://download.csdn.net/d ...
- 10款Flash和Javascript网页音乐播放器
关联:9 Fresh jQuery Media Players 10款音乐播放器, 有基于javascript的网页 音乐播放器,也有基于Flash的音乐播放器.赶快挑一款,分享你喜爱的音乐吧! 1. ...
- 仿照网易云界面做的Flask网页音乐播放器（豪华版）
一个基于Flask的网页音乐播放器,前端用了h5,css,jq,ajax,hash,数据库是mysql,前端到后端,全都有.管理员有上传音乐的功能,一定要先注册一个账户名为Admin的账户. 主要功能 ...
- 基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- HTML5之audio实战，网页音乐播放器开发
今天我们就基于 HTML5 audio 来,开发一个网页音乐播放器. 在HTML5 新特性中,audio .video 是我们比较关心的 新 元素,我们终于可以脱离 Flash ,来开发音频.视频播 ...
- html实现音乐界面设计,基于HTML5技术的音乐播放器的设计与实现.doc
基于HTML5技术的音乐播放器的设计与实现 基于HTML5技术的音乐播放器的设计与实现 常志强 刘正余 杨劲楠 皖西学院电子与信息工程学院 X 关注成功! 加关注后您将方便地在 我的关注中得到本文献的 ...
- web html5音乐播放器设计与实现,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11Nov.2017 赤峰学院学报(自然科学版) Journal of Chifeng University (Natural Science Edition )第33卷第11期(下 ...
- 基于html的音乐播放设计,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11 Nov.2017 赤峰学院学报(自然科学版) JournalofChifengUniversity(NaturalScienceEdition) 第 33 卷第11 期(下) ...
- html音乐播放器论文,基于HTML5技术的音乐播放器的设计与实现.docx
基于HTML5技术的音乐播放器的设计与 实现 常志强刘正余杨劲楠 皖西学院电子与信息工程学院 摘要: 本文采用IITML5技术,设计了一款音乐播放器,可以实现在线播放音乐,也可 以加载终端里存储的音乐 ...
- 【html+css练习】小白使用html+css模拟音乐播放器构造了网页音乐播放器--1
文章目录 纯html+css构造网页音乐播放器 html代码: CSS代码: 纯html+css构造网页音乐播放器 此处参照各大音乐播放器 这个页面使用了1天的时间进行构造,由于对各语法还不是很熟悉, ...
最新文章
- [POJ2104]K-th Number（区间第k值 记录初始状态）
- oracle 的替代变量和
- centos6 安装 mantisbt-1.2.8 —— （4）在CentOS6.4中安装配置LAMP环境
- SecutrCRTt 连接VirtualBox 中的Ubuntu -端口转发
- 安检x光机原理计算机实现,安检x光机成像原理介绍
- Scala调用Java静态成员及静态方法注意点——只能通过当前类名调用而不能借助子类调用父类静态成员/方法
- css实现排序升降图标
- git master代码被删除 怎么恢复_git 分支的删除与恢复
- Java项目经验是程序员成长的重要经验
- NOI.AC NOIP2018 全国热身赛 第四场
- APIS IQ FMEA 试用版安装包和“破解”（去除60天使用限制）
- .Net Core Win2008R2 运行环境问题 502.5
- 雷电模拟器Android obb,exagear模拟器数据obb包
- 4568: [Scoi2016]幸运数字
- vscode C语言中文输出乱码问题的解决
- python软件长什么样子图片_使用Python把多个图片拼接成为长图
- 网络和internet设置 代理 手动设置无效 | internet选项 代理设置无效无法应用 |internet选项代理修改后无法应用
- hadoop集群：关于Could not obtain block:报错问题
- python相关性分析函数_python实现相关性分析
- java中文逗号替换英文逗号