@[TOC](??文章目錄)
<hr>
# 二、??網(wǎng)站介紹
**??網(wǎng)站布局方面**：計(jì)劃采用目前主流的先誉、能兼容各大主流瀏覽器而账、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁(yè)布局結(jié)構(gòu)。
**??網(wǎng)站程序方面**：計(jì)劃采用最新的網(wǎng)頁(yè)編程語(yǔ)言HTML5+CSS3+JS程序語(yǔ)言完成網(wǎng)站的功能設(shè)計(jì)没卸。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時(shí)看到網(wǎng)站的效果秒旋。
**??網(wǎng)站素材方面**：計(jì)劃收集各大平臺(tái)好看的圖片素材约计，并精挑細(xì)選適合網(wǎng)頁(yè)風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁(yè)尺寸的圖片迁筛。
**??網(wǎng)站文件方面**：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁(yè)結(jié)構(gòu)文件煤蚌、css網(wǎng)頁(yè)樣式文件、js網(wǎng)頁(yè)特效文件、images網(wǎng)頁(yè)圖片文件尉桩；
**??網(wǎng)頁(yè)編輯方面**：網(wǎng)頁(yè)作品代碼簡(jiǎn)單筒占，可使用任意HTML編輯軟件（如：`Dreamweaver、HBuilder蜘犁、Vscode 翰苫、Sublime 嗽冒、Webstorm疫诽、Text 、Notepad++` 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）屉符。
其中：
（1）??html文件包含：其中index.html是首頁(yè)析恋、其他html為二級(jí)頁(yè)面良哲；
（2）?? ?css文件包含：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等；
（3）?? js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼）助隧。
---
# 三筑凫、??網(wǎng)站效果
## ??1.視頻演示
https://live.csdn.net/v/embed/239849??B49JP 火影忍者-7頁(yè)
## ?? 2.圖片演示
<hr>
# 四、?? 網(wǎng)站代碼
## ??HTML結(jié)構(gòu)代碼
```html
<!DOCTYPE html>
<html>
<head>
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>火影忍者</title>
</head>
<body>
<div class="banner"><img src="images/banner.jpg"></div>
<nav class="menu">
? <ul class="center">
? ? <li><a href="index.html">網(wǎng)站首頁(yè)</a></li>
? ? <li><a href="juesejieshao.html">人物介紹</a></li>
? ? <li><a href="juqingjieshao.html">劇情介紹</a></li>
? ? <li><a href="jingcaitupian.html">圖片欣賞</a></li>
? ? <li><a href="denglu.html">登錄</a></li>
? ? <li><a href="zhuce.html">注冊(cè)</a></li>
? </ul>
</nav>
<div class="content">
? <div class="mart">
? ? <div class="bar">圖片</div>
? ? <div class="pics scrollleft">
? ? ? <ul>
? ? ? ? <li>
? ? ? ? ? <p><img src="images/9.gif" width="300" height="180" /></p>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? <p><img src="images/0.jpg" width="300" height="180" /></p>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? <p><img src="images/1.jpg" width="300" height="180" /></p>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? <p><img src="images/2.jpg" width="300" height="180" /></p>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? <p><img src="images/3.jpg" width="300" height="180" /></p>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? <p><img src="images/4.jpg" width="300" height="180" /></p>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? <p><img src="images/5.jpg" width="300" height="180" /></p>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? <p><img src="images/6.jpg" width="300" height="180" /></p>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? <p><img src="images/7.jpg" width="300" height="180" /></p>
? ? ? ? </li>
? ? ? </ul>
? ? </div>
? ? <div class="clear"></div>
? ? <div class="bar">基本信息</div>
? ? <div class="pad">
? ? ? <p>電視動(dòng)畫《火影忍者》改編自日本漫畫家岸本齊史的同名漫畫并村，2002年10月3日在東京電視臺(tái)系列全6局巍实、岐阜放送首播，共220話哩牍；第二季《火影忍者疾風(fēng)傳》于2007年2月15日－2017年3月23日在東京電視臺(tái)播出棚潦，共500話；累計(jì)全720話膝昆。 ? ? ?</p>
? ? ? <p> </p>
? ? ? <div> 故事成功地將原本隱藏在黑暗中丸边，用世界上最強(qiáng)大的毅力和最艱辛的努力去做最密不可宣和隱諱殘酷的事情的忍者，描繪成了太陽(yáng)下最值得驕傲最光明無(wú)限的職業(yè)荚孵。</div>
? ? ? <p>系列續(xù)作《BORUTO -火影新世代- 》2017年4月播出妹窖。 </p>
? ? ? <p><br>
? ? ? ? 這是一個(gè)忍者的世界。在Naruto的世界中收叶，忍者這個(gè)職業(yè)骄呼，就像HunterXHunter里的獵人、One Piece里的海盜一樣判没，是少年們的夢(mèng)想蜓萄！不過這回的主人公鳴人和自學(xué)成才的小岡、路飛不一樣澄峰，他是木葉忍者村的忍者學(xué)校中科班畢業(yè)的哦（雖然畢業(yè)得很勉強(qiáng)绕德，是被稱為萬(wàn)年吊車尾的“差生”）。<br data-filtered="filtered">
? ? ? ? <br data-filtered="filtered">
? ? ? ? </p>
? ? </div>
? </div>
</div>
<footer class="end">
? <p>網(wǎng)頁(yè)底部</p>
</footer>
</body>
</html>
```
## ???CSS樣式代碼
```css
@charset "utf-8";
/* CSS Document */
ul,
li,
p {
? padding: 0;
? margin: 0;
? list-style: none
}
a {
? text-decoration: none;
? color: #000
}
html{ background:#ccc}
body {
? width: 1200px;
? margin: 0 auto;
? line-height:30px;
? font-size:16px;
? background-color: #fff;
}
.clear {
? clear: both
}
.menu li {
? list-style: none
}
.logo {
? position: absolute;
? top: 50px;
? width: 250px;
? height: 100px;
? margin-left: 40px
}
.banner {
? position: relative;
? height: 530px;
}
.banner img {
? width: 100%;
? height: 100%;
}
.menu {
? width: 100%;
? text-align: center;
? float: left;
? background: #000;
? margin-bottom:20px;
}
.menu:after{ content:''; display:block; clear:both}
.menu li a {
? color: #fff;padding: 15px 0px;
? display:block
}
.menu li {
? float: left;
? margin: 2px;
? background: #666;
? padding:0 30px;
? width: 136px
}
.menu li:hover{ background:#999966}
.right {
? float: right;
? width: 660px;
? padding: 20px
}
.left {
? min-height: 300px;
? float: left;
? width: 260px;
? padding: 20px
}
.content {
? background: #fff;
? width: 100%;
? clear:both
}
.btn{ background:#996666; border:none; color:#fff}
.end {
? clear: both;
? background: #333;
? color: #fff;
? padding: 30px 0;
? text-align: center;
}
.produce img {
? margin: 0 20px 20px 0
}
.produce {
? line-height: 30px
}
.pad {
? padding: 20px;
? display: block
}
.pics p {
? margin: 1px;
? text-align: center
}
.imglist {
? width: 840px;
? margin: 0 auto
}
.imglist li {
? float: left;
? width: 400px;
? margin: 10px;
? text-align: center
}
.scrollleft {
? margin: 0 30px
}
.scrollleft li {
? float: left;
? width:33.33%
}
.scrollleft li img{}
.news li {
? padding: 5px;
}
.title {
? text-align: center;
? color: #F00;
? padding: 10px
}
.fl {
? float: left
}
.js div {
? width: 100%;
? clear: both;
? margin-bottom: 20px;
? float: left
}
.js div img {
? float: right;
? border:#000 dashed 1px;
? margin-right: 20px
}
.msg>div {
? padding: 10px
}
.vid{ float:right; width:300px; height:200px; padding:30px 0; line-height:50px; font-size:24px; margin-right:20px; color:#fff; float:right ; background:#000; text-align:center}
.vid img{ width:100px; border-radius:100px; margin:0 auto }
.bar {
? border: #000 solid 1px;
? margin: 20px;
? font-size:20px;
? clear: both;
? color: #000;
? font-weight: bold;
? padding: 5px
}
.pad-two {
? color: #000;
}
.pad-two p {
? color: #000;
}
.pad-two img {
? width: 250px;
}
.box1sa {
? width: 400px;
? margin: 0 auto;
}
.box1sa label {
? display: block;
? text-align: left;
? font-size: 16px;
? color: #000000;
}
.box1sa input{
? width: 100%;
? height: 40px;
? margin: 30px 0;
}
.box1sa textarea{
? width: 100%;
? height:200px;
? margin: 30px 0;
}
```
<hr>
# 五摊阀、??更多源碼
1.如果我的博客對(duì)你有幫助 `請(qǐng) “??點(diǎn)贊” “??評(píng)論” “??收藏” `一鍵三連哦！
2.`??【??????????????關(guān)注我| 獲取更多源碼】 `帶您學(xué)習(xí)各種前端插件、3D炫酷效果胞此、圖片展示臣咖、文字效果、以及整站模板 漱牵、大學(xué)生畢業(yè)HTML模板 夺蛇、等!
??以上內(nèi)容技術(shù)相關(guān)問題??歡迎一起交流學(xué)習(xí)????????????
完整代碼 https://gitee.com/zhanyuqiu2022/my-app
