470.海贼王动漫主题网页大学生期末大作业 Web前端网页制作 html5+css+js

仙女网页制作

于 2024-09-03 13:48:49 发布

阅读量828

点赞数 12

分类专栏： Web网页设计实例动漫文章标签：前端 html css javascript html5 jquery css3

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

版权

Web网页设计实例同时被 2 个专栏收录

466 篇文章 24 订阅

订阅专栏

动漫

25 篇文章 0 订阅

订阅专栏

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html5+css+js：导航菜单、图片轮翻、视频等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

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

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>漫点看首页</title>

<link rel="stylesheet" href="../CSS/icomoon/style.css">
<link rel="stylesheet" href="../CSS/mystyle.css">
<link rel="icon" href="../images/myico.ico" type="image/x-icon">
<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/my.js" type="text/javascript"></script>
</head>

<body>

<div class="header">
<div class="header-first">

<img src="../images/logo.png" alt="" class="logo">
<p class="mylogo">ONE PIECE</p>

<ul class="lnav-box">
<li>
<div class="box">
<div class="front">首页</div>
<a href="index.html">
<div class="bottom">进入</div>
</a>
</div>
</li>
<li>
<div class="box">
<div class="front">周边</div>
<a href="javascript:;">
<div class="bottom">进入</div>
</a>
</div>
</li>
<li>
<div class="box">
<div class="front">资讯</div>
<a href="content.html">
<div class="bottom">进入</div>
</a>
</div>
</li>
</ul>

<div class="search">
<input type="text" placeholder="请输入你想找的内容">
<button></button>
</div>

<div class="rnav-box">
<li>
<div class="box">
<a href="javascript:;">
<div class="front">历史</div>
</a>
</div>
</li>
<li>
<div class="box">
<a href="javascript:;">
<div class="front">收藏</div>
</a>
</div>
</li>
<li>
<div class="box">
<a href="javascript:;">
<div class="front">消息</div>
</a>
</div>
</li>
</div>

<div class="user">

<div class="register">
<a href="javascript:;">登录/注册</a>
</div>
<img src="../images/xin.png" alt="">
</div>
</div>
</div>


<script type="text/javascript">
headerrolling();
</script>

<div class="banner">
<div class="internal w">
<div class="img-wrap">
<ul>
<li class="item" style="display: block">
<img src="../images/banner1.jpg" alt="" class="lunbo">
</li>
<li class="item">
<img src="../images/banner2.jpg" alt="" class="lunbo">
</li>
<li class="item">
<img src="../images/banner3.jpg" alt="" class="lunbo">
</li>
<li class="item">
<img src="../images/banner4.jpg" alt="" class="lunbo">
</li>
<li class="item">
<img src="../images/banner5.jpg" alt="" class="lunbo">
</li>
</ul>
</div>
<div class="lr-tab">
<div class="left btn">
<span class="icon-arrow-left2"></span>
</div>
<div class="right btn">
<span class="icon-arrow-right2"></span>
</div>
</div>
<div class="tab-btn">
<ul>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
</ul>
</div>

<div class="subnav">
<div class="diversity">篇章简介</div>
<ul>
<li class="subnav-itd">
<a href="javascript:;">东海篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，蒙奇·D·路飞童年时受到海贼“红发”杰克斯的启蒙，自小就立志要成为“海贼王”。17岁时他出海之后，接续遇见了海贼猎人罗罗亚·佐罗、航海士奈美、狙击手撒谎布、厨师文斯莫克·山智等人并结为伙伴。他们组成了草帽海贼团准备进入伟大的航道来到了罗格镇。
</p>
<div class="photo">
<img src="..//images/east.png" alt="">
<span>东海篇</span>
</div>
<p>
路飞出海当海贼，打败了胖妹海贼，来到摩卡大佐控制的城镇，认识了克比，救下了索隆，并成为伙伴！索隆和路飞来到小丑巴基统治的城镇，打败了巴基，遇到了偷财宝的娜美，并暂时结伴！三人来到了一个小村庄，靠岸遇到爱说谎的乌索普，并帮助乌索普打倒了赛巴斯觉醒的船长洛克，救下病娇青梅竹马可雅，好感度+10，乌索普成为伙伴。四人来到海上餐厅，遇到加经验的海军，被出场的香吉士打倒，大舰队提督克里克来袭，被路飞打败，鹰眼出场，索隆挑战失败！香吉士加入！娜美偷了一伙人的船走了，四人尾随娜美去了娜美的家乡所在小岛，打败了统治小岛的鱼人恶龙。一伙人来到罗杰的处刑地罗格镇，进入伟大的航路之前的最后一个小岛！巴基再次出现，还遇到海军上校斯摩格拦路，幸而革命军首领龙现身救了他们。成功进入伟大的航路！
</p>
</div>
</li>
<li class="subnav-itd">
<a href="javascript:;">冬岛篇<span class="icon-ctrl"></span></a>
<div class="subnav-mask">
<p>《海贼王》剧集中，进入伟大航路后，由于娜美感染了一种不知名的病，使得全员必须前往有医生的岛屿寻找医生，但在此时，他们又从三天前的报导中得知阿拉巴斯坦的内乱越来越严重，身为一国公主的薇薇担忧著国内一百万名国民的性命，因此希望在治好娜美的病后让船以最快的速度航向阿拉巴斯坦。
</p>
<div class="photo">
<img src="..//images/cold.jpg" alt="">
<span>冬岛篇</span>
</div>

...

2.CSS

代码如下（节选示例）：

@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?tye8vm');
src: url('fonts/icomoon.eot?tye8vm#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?tye8vm') format('truetype'),
url('fonts/icomoon.woff?tye8vm') format('woff'),
url('fonts/icomoon.svg?tye8vm#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
content: "\e900";
}
.icon-home2:before {
content: "\e901";
}
.icon-home3:before {
content: "\e902";
}
.icon-office:before {
content: "\e903";
}
.icon-newspaper:before {
content: "\e904";
}
.icon-pencil:before {
content: "\e905";
}
.icon-pencil2:before {
content: "\e906";
}
.icon-quill:before {
content: "\e907";
}
.icon-pen:before {
content: "\e908";
}
.icon-blog:before {
content: "\e909";
}
.icon-eyedropper:before {
content: "\e90a";
}
.icon-droplet:before {
content: "\e90b";
}
.icon-paint-format:before {
content: "\e90c";
}
.icon-image:before {
content: "\e90d";
}
.icon-images:before {
content: "\e90e";
}
.icon-camera:before {
content: "\e90f";
}
.icon-headphones:before {
content: "\e910";
}
.icon-music:before {
content: "\e911";
}
.icon-play:before {
content: "\e912";
}
.icon-film:before {
content: "\e913";
}
.icon-video-camera:before {
content: "\e914";
}
.icon-dice:before {
content: "\e915";
}
.icon-pacman:before {
content: "\e916";
}
.icon-spades:before {
content: "\e917";
}
.icon-clubs:before {
content: "\e918";
}
.icon-diamonds:before {
content: "\e919";
}
.icon-bullhorn:before {
content: "\e91a";
}
.icon-connection:before {
content: "\e91b";
}
.icon-podcast:before {
content: "\e91c";
}
.icon-feed:before {
content: "\e91d";
}

...

3.JS

代码如下（节选示例）：

// 导航栏下拉至一定高度后固定在顶部的特效
function headerrolling() {
$(document).ready(function () {
//首先获取导航栏距离中间盒子顶部的高度
var top = $('.banner').offset().top;
//开始监控滚动栏scroll
$(document).scroll(function () {
//获取当前滚动栏scroll的高度并赋值
var scrTop = $(window).scrollTop();
//开始判断如果导航栏距离顶部的高度等于当前滚动栏的高度则开启悬浮
if (scrTop >= top) {
$('.header').css({
'position': 'fixed',
'z-index': '999',
'top': '0',
'width': '100%'
});
} else { //否则清空悬浮
$('.header').css({
'position': '',
'top': ''
});
}
})
})
}

// 顶部返回
function returntop() {
$(function () {
$(function () {
//当点击跳转链接后，回到页面顶部位置
$("#toTop").click(function () {
$('body,html').animate({
scrollTop: 0
}, 1500);
return false;
});
});
});
}

// 轮播图
function turnpicture() {
var index2 = 0; /*初始化一个变量指向下彪*/
//点击点
$(".tab-btn .btn").click(function () {
index2 = $(this).index(); //获取点击该元素下彪
$(this).addClass("active").siblings().removeClass("active");
$(".item").eq(index2).fadeIn().siblings().fadeOut();
});
//点击切换效果
$(".lr-tab .right").click(function () {
index2++;
if (index2 > 4) {
index2 = 0;
}
$(".item").eq(index2).fadeIn().siblings().fadeOut();
$(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");

});
$(".lr-tab .left").click(function () {
index2--;
if (index2 < 0) {
index2 = 4;
}
$(".item").eq(index2).fadeIn().siblings().fadeOut();
$(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");

});
var time2 = setInterval(function () {
index2++;
if (index2 > 4) {
index2 = 0;
}
$(".item").eq(index2).fadeIn().siblings().fadeOut();
$(".tab-btn .btn").eq(index2).addClass("active").siblings().removeClass("active");

}, 4000); //定时器重复
}

//右边工具栏吸顶效果
function sidenavrolling() {
$(document).ready(function () {
//首先获取导航栏距离中间盒子顶部的高度
var top = $('.goods').offset().top;
//开始监控滚动栏scroll
$(document).scroll(function () {
//获取当前滚动栏scroll的高度并赋值
var scrTop = $(window).scrollTop();
//开始判断如果导航栏距离顶部的高度等于当前滚动栏的高度则开启悬浮
if (scrTop >= top) {
$('.sidenav').css({
'position': 'fixed',
'z-index': '999',
'top': '50px',
'right': '0',
'transition': 'all 0.4s',
});

...

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

六、更多推荐

【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!

您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。

仙女网页制作

关注

12
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
470.海贼王动漫主题网页大学生期末大作业 Web前端网页制作 html5+css+js

本实例应用html5+css+js：导航菜单、图片轮翻、视频等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
复制链接

扫一扫