前言
學習前端語言已經有一段時間了，可是還沒有真正着手寫一個自己的網頁，這次花了一個星期用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="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="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="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="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="image/qq音樂.jpg" alt="qqmusic">
<h2>QQ音樂</h2>
<p>通過貼心的社區服務,讓QQ音樂成爲中國網民在線音樂生活的首選品牌，引領着人們的音樂生活方式！</p>
</div>
<div class="col-md-3">
<img src="image/img_localize_0f893220d6a27b8013bedae1ac0c71ca_560x350.jpg" alt="wangyiyun">
<h2>網易雲音樂</h2>
<p>明星、專業音樂人、DJ進駐，專業的私房“歌單”和音樂推薦，格調頓現。</p>
</div>
<div class="col-md-3">
<img src="image/20160623145235489.jpg" alt="kuwo">
<h2>酷我音樂</h2>
<p>酷我音樂盒是一款融歌曲和MV搜索、下載、在線播放、歌詞同步顯示爲一體音樂資源聚合器、播放器。</p>
</div>
<div class="col-md-3">
<img src="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="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="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="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="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>
