217. Web前端网页制作火影忍者动漫网页设计实例大学生期末大作业 html+css+js-CSDN博客

本文链接：https://blog.csdn.net/A240307/article/details/138942743

前言

火影忍者动漫网页设计实例，应用html+css+js： Div、导航栏、图片轮翻效果、鼠标滑动特效、视频、登录页面等。适用于大学生网页课程作业设计，供大家参考。

一、网页概述

网页布局为“同字型”的布局，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底。

支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含7个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<body>
<div class="index_list">
<ul>
<li> <a href="index.html">首页</a> </li>
<li> <a href="jingli.html"> 剧情简介</a> </li>
<li> <a href="zuopin.html">火影疾风传</a> </li>
<li> <a href="hudong.html">火影新世代</a> </li>
<li> <a href="huojiang.html"> 历代火影</a> </li>
<li> <a href="pinjia.html"> 名字由来</a> </li>
<li> <a href="login.html">登录</a> </li>
</ul>
</div>
<div class="cleaner"></div>
<div id="container">
<div class="dm">

<div id="yc-mod-slider">
<div class="wrapper">
<div id="slideshow" class="box_skitter fn-clear">
<ul>
<li> <img class="cubeRandom" src="images/dm1.jpg" /></li>
<li> <img class="cubeRandom" src="images/dm2.jpg" /></li>
<li> <img class="cubeRandom" src="images/dm3.jpg" /></li>
</ul>
</div>
<script type="text/javascript" src="js/slideshow.js"></script>
</div>
</div>

</div>
<div class=" clear"></div>
<div class="index_main">
<h1>Studio Pierrot </h1>
<a href="javascript:;">电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》自2007年2月开始播出，共500话；累计全720话。</a>
<p>
<img src="images/1.jpg">

</p>

</div>
<div class="share">

<div class="cleaner"></div>
</div>
<div id="footer"> Copyright © 动漫--火影忍者</div>
</div>

</body>

</html>

...

2.CSS

代码如下（节选示例）：

html {
background: #000;
;
}

body {
margin: 0;
padding: 0;
font-family: Tahoma, "Trebuchet MS", Verdana;
font-size: 12px;
line-height: 1.5em;
width: 100%;
display: table;
background: url(../images/bj.jpg) center top no-repeat fixed #000;
}

a:link,
a:visited {
color: #87430c;
text-decoration: none;
}

a:active,
a:hover {
color: #FFFF00;
}

p {
font-family: Tahoma, "Trebuchet MS", Verdana;
font-size: 14px;
color: #222;
line-height: 24px;
text-align: justify;
}

h1 {
font-family: Tahoma, "Trebuchet MS", Verdana;
font-size: 25px;
color: #333;
font-weight: normal;
margin: 0 0 15px 0;
}

h2 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #111;
margin: 0 0 10px 0;
}

h3 {
font-family: Tahoma;
font-size: 13px;
color: #111;
font-weight: normal;
margin: 0 0 3px 0;
}

.title_left {
float: left;
width: 333px;
height: 46px;
}

.title_right {
float: right;
width: 165px;
height: 40px;
color: #d89300;
font-family: Tahoma;
font-size: 28px;
margin: 0;
padding: 6px 0 0 0;
}

.title_left h1 {
float: left;
display: block;
font-family: Tahoma;
font-size: 25px;
color: #e17638;
font-weight: normal;
margin: 0 0 2px 0;
}

.title_left h3 {
font-family: Tahoma;
font-size: 20px;
color: #fff;
font-weight: normal;
display: block;
float: right;
}

.gallery ul {
margin-left: -40px;
}

.gallery li {
float: left;
margin: 5px;
list-style-type: none;
}

.gallery li img {
width: 75px;
height: 75px;
}

li {
list-style-type: none;
}

#container {
width: 950px;
padding: 30px;
margin: 10px auto;
background-color: rgba(255, 255, 255, 0.7);
-moz-border-radius: 20px;
border-radius: 20px;
min-height: 600px;
margin-bottom: 50px;
}

.index_main {
width: 700px;
height: auto;
margin: auto;
padding: 50px 0px;
text-align: center;
}

.index_main h1 {
color: #fff;
font-size: 111px;
text-align: center;
line-height: 136px;
font-weight: normal;
}

.index_list {
width: 960px;
margin: auto;
min-height: 80px;
padding-top: 20px;
}

.index_list ul {}

.index_list li {
height: 50px;
margin: 15px;
float: left;
}

.index_list li a {
color: #fff;
font-size: 22px;
text-align: center;
line-height: 36px;
}

.index_list li a:hover {
color: #990;
}

.share {
width: 220px;
height: 50px;
margin: auto;
}

.share li {
float: left;
margin: 2px;
}

.share li img {
width: 30px;
height: 30px;
}

.Language {
width: 860px;
margin: auto;
}

.Language ul {
width: 700px;
}

...

3.JS

代码如下（节选示例）：

(function(a, b) {
function cv(a) {
return f.isWindow(a) ? a : a.nodeType === 9 ? a.defaultView || a.parentWindow : !1
}

function cr(a, b) {
var c = {};
f.each(cm.concat.apply([], cm.slice(0, b)), function() {
c[this] = a
});
return c
}

function cq() {
cn = b
}

function cp() {
setTimeout(cq, 0);
return cn = f.now()
}

function cf() {
try {
return new a.ActiveXObject("Microsoft.XMLHTTP")
} catch (b) {}
}

function ce() {
try {
return new a.XMLHttpRequest
} catch (b) {}
}

function bY(a, b, c, d) {
if (f.isArray(b))
f.each(b, function(b, e) {
c || bC.test(a) ? d(a, e) : bY(a + "[" + (typeof e == "object" || f.isArray(e) ? b : "") + "]", e, c, d)
});
else if (!c && b != null && typeof b == "object")
for (var e in b)
bY(a + "[" + e + "]", b[e], c, d);
else
d(a, b)
}

function bX(a, c, d, e, f, g) {
f = f || c.dataTypes[0], g = g || {}, g[f] = !0;
var h = a[f],
i = 0,
j = h ? h.length : 0,
k = a === bR,
l;
for (; i < j && (k || !l); i++)
l = h[i](c, d, e), typeof l == "string" && (!k || g[l] ? l = b : (c.dataTypes.unshift(l), l = bX(a, c, d, e, l, g)));
(k || !l) && !g["*"] && (l = bX(a, c, d, e, "*", g));
return l
}

function bm(a, b) {
b.src ? f.ajax({
url: b.src,
async: !1,
dataType: "script"
}) : f.globalEval((b.text || b.textContent || b.innerHTML || "").replace(be, "/*$0*/")), b.parentNode && b.parentNode.removeChild(b)
}

function bl(a) {
f.nodeName(a, "input") ? bk(a) : "getElementsByTagName" in a && f.grep(a.getElementsByTagName("input"), bk)
}

function bk(a) {
if (a.type === "checkbox" || a.type === "radio")
a.defaultChecked = a.checked
}

function bj(a) {
return "getElementsByTagName" in a ? a.getElementsByTagName("*") : "querySelectorAll" in a ? a.querySelectorAll("*") : []
}