📂文章目錄
- 二、📚網站介紹
- 三、🔗網站效果
- ▶️1.視訊示範
- 🧩 2.圖檔示範
- 四、💒 網站代碼
- 🧱HTML結構代碼
- 🏠CSS樣式代碼
- 五、🎁更多源碼
二、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。
📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。
📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；
📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html編輯軟體進行運作及修改編輯等操作）。
其中：
（1）📜html檔案包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；
（3）📄 js檔案包含：js實作動态輪播特效, 表單送出, 點選事件等等（個别網頁中運用到js代碼）。
三、🔗網站效果
▶️1.視訊示範
B66JP 航海王 6頁 帶視訊帶音樂帶jq帶bootstarp
🧩 2.圖檔示範
四、💒 網站代碼
🧱HTML結構代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OnePiece</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/logo.css" />
<link rel="stylesheet" href="css/公告新聞欄.css" />
<link rel="stylesheet" href="css/kstd.css" />
<link rel="stylesheet" href="css/ztwz.css" />
</head>
<body>
<!--
作者：鈣爾奇
時間：2021-12-09
描述：Logo搜尋框
-->
<div class="container">
<div class="row">
<div class="col-6 col-md-5">
<img src="img/logo.png" class="img-fluid" width="300"/>
</div>
<div class="col-6 col-md-7" style="padding-top: 2.5%;">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="請輸入您需要搜尋的内容" />
<div class="input-group-append">
<button class="btn btn-color" type="submit">搜尋</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!--
作者：鈣爾奇
時間：2021-12-09
描述：導航欄
-->
<div class="navbar navbar-expand-md navbar-light bg-color">
<div class="container">
<ul class="navbar-nav nav-tabs nav-pills">
<li class="nav-item active">
<a class="nav-link" href="index.html">首頁</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="html01.html">故事介紹</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="html01.html">劇情主線</a>
<a class="dropdown-item" href="https://www.yhdmp.cc/s_all?ex=1&kw=%E6%B5%B7%E8%B4%BC%E7%8E%8B">追番推薦</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="html02.html">角色介紹</a>
<div class="dropdown-menu dropright">
<a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="html02.html">海賊</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="html02.html">草帽一夥</a>
<a class="dropdown-item" href="html02.html">四皇</a>
<a class="dropdown-item" href="html02.html">王下七武海</a>
<a class="dropdown-item" href="html02.html">極惡的世代</a>
</div>
<a class="dropdown-item" href="html02.html">海軍</a>
<a class="dropdown-item" href="html02.html">革命軍</a>
<a class="dropdown-item" href="html02.html">海賊獵人</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="html03.html">用法解說</a>
<div class="dropdown-menu dropright">
<a class="dropdown-item" href="html03.html">霸氣</a>
<a class="dropdown-item" href="html03.html">懸賞金</a>
<a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="html03.html">世界種族</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="html03.html">天龍人</a>
<a class="dropdown-item" href="html03.html">天空人</a>
<a class="dropdown-item" href="html03.html">改造人</a>
<a class="dropdown-item" href="html03.html">毛皮族</a>
<a class="dropdown-item" href="html03.html">巨人族</a>
<a class="dropdown-item" href="html03.html">咚塔塔族</a>
<a class="dropdown-item" href="html03.html">人魚族&魚人族</a>
<a class="dropdown-item" href="html03.html">手長族&足長族</a>
</div>
<a class="dropdown-item" href="html03.html">地理設定</a>
<a class="dropdown-item" href="html03.html">世界政府</a>
<a class="dropdown-item" href="html03.html">曆史正文</a>
<a class="dropdown-item" href="html03.html">古代兵器</a>
<a class="dropdown-item" href="html03.html">惡魔果實</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="html04.html">相冊時光</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="個人履歷.html">關于我們</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="個人履歷.html">作者簡介</a>
<a class="dropdown-item" href="視訊音頻/隐藏網頁.html">我愛城建</a>
</div>
</li>
</ul>
</div>
</div>
<!--
作者：鈣爾奇
時間：2021-12-09
描述：圖檔輪播
-->
<div class="container">
<div class="row">
<div class="col-12" style="margin: 20px 0px;">
<div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="2500" >
<ol class="carousel-indicators">
<li data-slide-to = "0" data-target = "#myCarousel" class="active"></li>
<li data-slide-to = "1" data-target = "#myCarousel"></li>
<li data-slide-to = "2" data-target = "#myCarousel"></li>
<li data-slide-to = "3" data-target = "#myCarousel"></li>
<li data-slide-to = "4" data-target = "#myCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img alt=""class="d-block w-100" src="img/lunbo/lunbo01.jpg" />
<div class="carousel-caption">
<h5>一個人的夢想，幾億人的期待</h5>
</div>
</div>
<div class="carousel-item">
<img alt=""class="d-block w-100" src="img/lunbo/lunbo02.jpg" />
<div class="carousel-caption">
<h5>我們都有相同愚蠢的夢想，我為了自己的目标，我就陪你好了，由我來做你船上的廚師吧</h5>
</div>
</div>
<div class="carousel-item">
<img alt=""class="d-block w-100" src="img/lunbo/lunbo03.jpg" />
<div class="carousel-caption">
<h5>我的船上沒有手下，隻有夥伴</h5>
</div>
</div>
<div class="carousel-item">
<img alt=""class="d-block w-100" src="img/lunbo/lunbo04.jpg" />
<div class="carousel-caption">
<h5>隻要路飛還在笑，那生活就不算太糟</h5>
</div>
</div>
<div class="carousel-item">
<img alt=""class="d-block w-100" src="img/lunbo/lunbo05.jpg" />
<div class="carousel-caption">
<h5>為了大家，我一定會堅強的活下去！我已經決定不再哭泣！我要獨自奮戰！</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" data-slide="prev" href="#myCarousel" role="button">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" data-slide="next" href="#myCarousel" role="button">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<!--
作者：鈣爾奇
時間：2021-12-10
描述：公告欄和新聞欄
-->
<div class="row">
<div class="col-12 col-md-4">
<div class="card">
<h5>
<a href="#" style="float: right;">更多 ></a>
<img src="img/logo01.jpg" alt="" width="20" height="20" /> 海賊公告
</h5>
<hr />
<div class="list-group list-group-flush">
<a class="list-group-item" href="#">我是路飛！要成為海賊王的男人</a>
<a class="list-group-item" href="#">大劍豪現身！海賊獵人羅諾亞.索隆</a>
<a class="list-group-item" href="#">正義的騙子？烏索普船長</a>
<a class="list-group-item" href="#">著名廚師！海上餐廳的山治</a>
<a class="list-group-item" href="#">開始與結束之鎮 登陸羅格鎮</a>
<a class="list-group-item" href="#">讓船向空中去吧！乘上突擊的海流</a>
</div>
</div>
</div>
<div class="col-12 col-md-5">
<div class="card">
<h5>
<a href="#" style="float: right;">更多 ></a>
<img src="img/logo02.jpg" alt="" width="20" height="20" /> 海賊大事件
</h5>
<hr />
<div class="list-group list-group-flush">
<a class="list-group-item" href="#">飛馳的海列車與 水之都「Water Seven」</a>
<a class="list-group-item" href="#">君臨大海的百獸之王！夢想之船終于完成</a>
<a class="list-group-item" href="#">相會新世界！與勇猛的海賊的告别</a>
<a class="list-group-item" href="#">遇見人的喜悅！骷髅紳士的真面目</a>
<a class="list-group-item" href="#">消失的夥伴們 草帽小子一夥的末日</a>
<a class="list-group-item" href="#">演出開幕 揭開黑胡子的野心</a>
</div>
</div>
</div>
<!--
作者：鈣爾奇
時間：2021-12-10
描述：快速通道
-->
<div class="col-12 col-md-3">
<div class="card kstd">
<h5>
<img src="img/logo03.jpg" alt="" width="20" height="20" /> 海上電車
</h5>
<hr />
<div class="card-body">
<div class="row">
<div class="col-4">
<img src="img/kstd/kstd01.jpg" class="img-fluid img-thumbnail" />
<p>佳肴信念</p>
</div>
<div class="col-4">
<img src="img/kstd/kstd02.jpg" class="img-fluid img-thumbnail" />
<p>彈弓謊言</p>
</div>
<div class="col-4">
<img src="img/kstd/kstd03.jpg" class="img-fluid img-thumbnail" />
<p>白骨樂章</p>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="img/kstd/kstd04.jpg" class="img-fluid img-thumbnail" />
<p>三刀承諾</p>
</div>
<div class="col-4">
<img src="img/kstd/kstd05.jpg" class="img-fluid img-thumbnail" />
<p>草帽夢想</p>
</div>
<div class="col-4">
<img src="img/kstd/kstd06.jpg" class="img-fluid img-thumbnail" />
<p>風車航路</p>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="img/kstd/kstd07.jpg" class="img-fluid img-thumbnail" />
<p>繁花微笑</p>
</div>
<div class="col-4">
<img src="img/kstd/kstd08.jpg" class="img-fluid img-thumbnail" />
<p>櫻花思念</p>
</div>
<div class="col-4">
<img src="img/kstd/kstd09.jpg" class="img-fluid img-thumbnail" />
<p>航船意志</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
作者：鈣爾奇
時間：2021-12-13
描述：專題網站
-->
<div class="row">
<div class="col-12">
<div class="card ztwz">
<h5>
<a href="#" style="float: right;">更多 ></a>
<img src="img/logo04.jpg" alt="" width="20" height="20" /> 那年的青春
</h5>
<hr />
<div class="card-body">
<div class="row">
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz01.jpg"></a>
<p>"我是要成為海賊王的男人!"</p>
</div>
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz02.jpg"></a>
<p>"如果不豁出性命，也沒法創造未來。"</p>
</div>
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz03.jpg"></a>
<p>"想守護的東西就好好守住，别再讓那些家夥得逞了!"</p>
</div>
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz04.jpg"></a>
<p>"将過去和羁絆全部丢棄，不要吝惜那為了夢想流下的淚水。"</p>
</div>
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz05.jpg"></a>
<p>"所謂的夢想是同時擁有實力的人才可以談的現實。"</p>
</div>
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz06.jpg"></a>
<p>"惡魔也好，海賊也好，反正我要我的聲名轟動全世界。"</p>
</div>
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz07.jpg"></a>
<p>"世代繼承的，時代的變遷，人的夢，這些個都是擋不住的。"</p>
</div>
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz08.jpg"></a>
<p>"人的夢想，永遠不會結束!"</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html> 🏠CSS樣式代碼
.btn-color {
color: #fff;
background-color: #ab2a84;
border-color: #av2a84;
}
.btn-color:hover {
color: #fff;
background-color: #ab2a84;
border-color: #av2a84;
}
.btn-color.focus {
color: #fff;
background-color: #ab2a84;
border-color: #av2a84;
box-shadow: 0000.2rem rgba(171, 42, 132, 0.5);
}
.btn-color:disabled {
color: #fff;
background-color: #ab2a84;
border-color: #av2a84;
}
.btn-color:not(:disabled):not(.disabled):active,.show>.btn-color.dropdown-toggle {
color: #fff;
background-color: #ab2a84;
border-color: #av2a84;
}
.btn-color:not(:disabled):not(.disabled).active:focus,.show>.btn-color.dropdown-toggle:focus {
box-shadow: 0000.2rem rgba(171, 42, 132, 0.5);
} 五、🎁更多源碼
1.如果我的部落格對你有幫助
請 “👍點贊” “✍️評論” “💙收藏”
一鍵三連哦！