二、??網(wǎng)站介紹
??網(wǎng)站布局方面：計(jì)劃采用目前主流的方妖、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁布局結(jié)構(gòu)。
??網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計(jì)澄成。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時(shí)看到網(wǎng)站的效果。
??網(wǎng)站素材方面：計(jì)劃收集各大平臺(tái)好看的圖片素材环揽，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片略荡，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
??網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件歉胶、css網(wǎng)頁樣式文件汛兜、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件通今；
??網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡(jiǎn)單粥谬，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder辫塌、Vscode 漏策、Sublime 、Webstorm臼氨、Text 掺喻、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
其中：
（1）??html文件包含：其中index.html是首頁储矩、其他html為二級(jí)頁面感耙；
（2）?? css文件包含：css全部頁面樣式,文字滾動(dòng), 圖片放大等；
（3）?? js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁中運(yùn)用到j(luò)s代碼）持隧。
三即硼、??網(wǎng)站效果
??1.視頻演示
https://live.csdn.net/v/embed/239853 B66JP 航海王 6頁 帶視頻帶音樂帶jq帶bootstarp
?? 2.圖片演示
05.png
04.png
03.png
02.png
01.png
四、?? 網(wǎng)站代碼
??HTML結(jié)構(gòu)代碼
<!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>
<!--
作者：鈣爾奇
時(shí)間：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="請(qǐng)輸入您需要搜索的內(nèi)容" />
<div class="input-group-append">
<button class="btn btn-color" type="submit">搜索</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!--
作者：鈣爾奇
時(shí)間：2021-12-09
描述：導(dǎo)航欄
-->
<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" >追番推薦</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">手長(zhǎng)族&足長(zhǎng)族</a>
</div>
<a class="dropdown-item" href="html03.html">地理設(shè)定</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">惡魔果實(shí)</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="html04.html">相冊(cè)時(shí)光</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="個(gè)人簡(jiǎn)歷.html">關(guān)于我們</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="個(gè)人簡(jiǎn)歷.html">作者簡(jiǎn)介</a>
<a class="dropdown-item" href="視頻音頻/隱藏網(wǎng)頁.html">我愛城建</a>
</div>
</li>
</ul>
</div>
</div>
<!--
作者：鈣爾奇
時(shí)間：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>一個(gè)人的夢(mèng)想屡拨，幾億人的期待</h5>
</div>
</div>
<div class="carousel-item">
<img alt=""class="d-block w-100" src="img/lunbo/lunbo02.jpg" />
<div class="carousel-caption">
<h5>我們都有相同愚蠢的夢(mèng)想只酥，我為了自己的目標(biāo)，我就陪你好了呀狼，由我來做你船上的廚師吧</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>為了大家赠潦，我一定會(huì)堅(jiān)強(qiáng)的活下去叫胖！我已經(jīng)決定不再哭泣！我要獨(dú)自奮戰(zhàn)她奥！</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>
<!--
作者：鈣爾奇
時(shí)間：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="#">大劍豪現(xiàn)身！海賊獵人羅諾亞.索隆</a>
<a class="list-group-item" href="#">正義的騙子哩俭？烏索普船長(zhǎng)</a>
<a class="list-group-item" href="#">著名廚師绷跑！海上餐廳的山治</a>
<a class="list-group-item" href="#">開始與結(jié)束之鎮(zhèn) 登陸羅格鎮(zhèn)</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="#">君臨大海的百獸之王凡资！夢(mèng)想之船終于完成</a>
<a class="list-group-item" href="#">相會(huì)新世界砸捏！與勇猛的海賊的告別</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>
<!--
作者：鈣爾奇
時(shí)間：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>草帽夢(mèng)想</p>
</div>
<div class="col-4">
<img src="img/kstd/kstd06.jpg" class="img-fluid img-thumbnail" />
<p>風(fēng)車航路</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>
<!--
作者：鈣爾奇
時(shí)間：2021-12-13
描述：專題網(wǎng)站
-->
<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>"如果不豁出性命，也沒法創(chuàng)造未來垦藏。"</p>
</div>
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz03.jpg"></a>
<p>"想守護(hù)的東西就好好守住梆暖，別再讓那些家伙得逞了!"</p>
</div>
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz04.jpg"></a>
<p>"將過去和羈絆全部丟棄，不要吝惜那為了夢(mèng)想流下的淚水掂骏。"</p>
</div>
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz05.jpg"></a>
<p>"所謂的夢(mèng)想是同時(shí)擁有實(shí)力的人才可以談的現(xiàn)實(shí)轰驳。"</p>
</div>
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz06.jpg"></a>
<p>"惡魔也好，海賊也好弟灼，反正我要我的聲名轟動(dòng)全世界级解。"</p>
</div>
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz07.jpg"></a>
<p>"世代繼承的，時(shí)代的變遷田绑，人的夢(mèng)勤哗，這些個(gè)都是擋不住的。"</p>
</div>
<div class="col-12 col-md-3">
<a href="#"><img src="img/ztwz/ztwz08.jpg"></a>
<p>"人的夢(mèng)想掩驱，永遠(yuǎn)不會(huì)結(jié)束!"</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.如果我的博客對(duì)你有幫助 請(qǐng) “??點(diǎn)贊” “??評(píng)論” “??收藏”一鍵三連哦！
2.??【??????????????關(guān)注我| 獲取更多源碼】帶您學(xué)習(xí)各種前端插件昙篙、3D炫酷效果腊状、圖片展示诱咏、文字效果苔可、以及整站模板 、大學(xué)生畢業(yè)HTML模板 袋狞、等!
??以上內(nèi)容技術(shù)相關(guān)問題??歡迎一起交流學(xué)習(xí)????????????
