作者主頁: 【進入主頁—獲取更多源碼】
web前端期末大作業： 【HTML5網頁期末作業 (1000套) 】
程序員有趣的告白方式：【HTML七夕情人節表白網頁制作 (110套) 】
文章目錄
二、網站介紹
網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。
網站程序方面：計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器用dw個人網頁制作教程，已達到打開后就能即時看到網站的效果。
網站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網頁風格的圖片用dw個人網頁制作教程，然后使用PS做出適合網頁尺寸的圖片。
網站文件方面：網站系統文件種類包含：html網頁結構文件、css網頁樣式文件、js網頁特效文件、網頁圖片文件；
網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）html文件包含：其中index.html是首頁、其他html為二級頁面；
（2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3） js文件包含：js實現動態輪播特效, 表單提交, 點擊事件等等（個別網頁中運用到js代碼）。
三、網站效果 ??1.視頻演示
B49JP 火影忍者-7頁
2.圖片演示
四、 網站代碼 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">網站首頁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">注冊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>電視動畫《火影忍者》改編自日本漫畫家岸本齊史的同名漫畫，2002年10月3日在東京電視臺系列全6局、岐阜放送首播，共220話；第二季《火影忍者疾風傳》于2007年2月15日－2017年3月23日在東京電視臺播出，共500話；累計全720話。 p>
<p> p>
<div> 故事成功地將原本隱藏在黑暗中，用世界上最強大的毅力和最艱辛的努力去做最密不可宣和隱諱殘酷的事情的忍者，描繪成了太陽下最值得驕傲最光明無限的職業。div>
<p>系列續作《BORUTO -火影新世代- 》2017年4月播出。 p>
<p><br>
這是一個忍者的世界。在Naruto的世界中，忍者這個職業，就像HunterXHunter里的獵人、One Piece里的海盜一樣，是少年們的夢想！不過這回的主人公鳴人和自學成才的小岡、路飛不一樣，他是木葉忍者村的忍者學校中科班畢業的哦（雖然畢業得很勉強，是被稱為萬年吊車尾的“差生”）。<br data-filtered="filtered">
<br data-filtered="filtered">
p>
div>
div>
div>
<footer class="end">
<p>網頁底部p>
footer>
body>
html>
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;
}
五、更多源碼
1.如果我的博客對你有幫助 請 “點贊” “??評論” “收藏” 一鍵三連哦！
2.【關注我| 獲取更多源碼】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、等!
以上內容技術相關問題歡迎一起交流學習