67. Web前端网页案例——【海贼王动漫响应式自适应网页（6页）】大学生期末大作业 html5+css3+js-CSDN博客

♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:

http://angella.blog.csdn.net

提示：以下是本篇文章正文内容，下面案例供参考

一、网页概述

本实例应用html5+css3+js：导航菜单、图片轮翻、无缝滚动插件、瀑布流式浏览、fonts等。适用于大学生网页课程作业设计；响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；👉温馨提示：这里所有的网页案例主要应用HTML、CSS、JS等关键技术知识，有静态网页，更有动态网页，所有网页案例都支持如DW、HBuilder、Vscode、Text 等任意HTML主流编辑软件进行编辑修改，亦支持包括IE、Chrome、Firefox、Safari主流浏览器浏览。

二、网页文件

本网页共包含6个页面：

三、网页效果

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

四、代码展示

1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<title>Home</title>
<link rel="icon" href="favicon.png" type="image/png">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">



</head>
<body>
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="active item">
       <div class="caption zoomIn wow animated">
<h2>海贼王 <br/><strong>海贼王，我当定了</strong></h2>
</div>

       <img class="" src="img/timg (5).gif" width="1920px" height="800px"alt=""></div>
<div class="item">
       <div class="caption zoomIn wow animated">
<h2>かいぞくおう<br/><strong>かいぞくおうになる</strong></h2>
</div>
           <img class="" src="img/timg (1).gif" width="1920px" height="800px"alt=""></div>
<div class="item">
       <div class="caption zoomIn wow animated">
<h2>ONE PIECE<br/><strong>One Piece, I'm in.</strong></h2>
</div><img class="" src="img/slide2.gif" width="1920px" height="800px"alt=""></div>
</div>

<a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
</div>

<header id="header_wrapper">
<div class="container">
<div class="header_box">

   <nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
   <div id="main-nav" class="collapse navbar-collapse navStyle">
           <ul class="nav navbar-nav" id="mainNav">
           <li class="active"><a href="#carousel" class="scroll-link">首页</a></li>
           <li><a href="#aboutUs" class="scroll-link">介绍</a></li>
           <li><a href="#service" class="scroll-link">人物简介</a></li>
           <li><a href="#Portfolio" class="scroll-link">人物集</a></li>
           <li><a href="#experience" class="scroll-link">时间线</a></li>
           <li><a href="#contact" class="scroll-link">待续……</a></li>
           </ul>
</div>
   </nav>
</div>
</div>
</header>

<section id="aboutUs">
<div class="inner_wrapper about-us aboutUs-container fadeInLeft animated wow">
<div class="container">
<h2>《海贼王》 ”かいぞくおう“</h2>
<h6>尾田荣一郎创作的漫画作品</h6>
<div class="inner_section">
<div class="row">
<div class="col-md-6"> <img class="img-responsive" src="img/316040.gif" align=""> </div>
<div class="col-md-6">
<h3>作品简介</h3>
<p>故事讲述了想成为海贼王的路飞，误食了海贼

香克斯收藏的橡胶恶魔果实，而变成橡胶人，恶魔果实的副作用却使他永远不能游泳。不过他的理想仍然没有改变——成为海贼王，并且找到传说中哥尔·D·罗杰的秘宝－One Piece，冒险就此开始了。</p>

<p>误食“橡胶果实”的路飞怀揣着对这个世界的憧憬和对自己成为海贼王梦想的执著，路飞出海了。
这一路上还真让他找到了许多身怀绝技的朋友：目标成为世界第一剑客的索隆，想绘画出世界地图的航海士娜美，想找到all blue的海上厨师香吉士，特别善于说大话但想成为狙击王的乌索普，想成为最强医生的萌萌哒的船医乔巴，成熟富有女人味的考古学家罗宾，以及顶级的船匠改造人弗兰奇，和立志与鲸鱼拉布重逢的骷髅音乐家布鲁克。
路飞一伙一路千辛万苦地努力着，而由此开始One Piece的故事将要完全展开了
</p>

<ul class="about-us-list">
                                       <li class="points">海军军队及世界政府——绝对正义</li>
<li class="points">王下七武海——世界政府公认的七位大海贼</li>
                                       <li class="points">四皇——海上皇帝</li>
                                   </ul>

</div>
</div>
   </div>
</div>
</div>
</section>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";

/* Reset
---------------------------------*/
ul {
list-style: none;
}

.figure {
margin: 0px;
}

img {
max-width: 100%;
}

a, a:hover, a:active {
outline: 0px !important;
text-decoration:none;
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

.clearfix:after {
clear: both;
}

/*carousel*/
.carousel-fade .carousel-inner .item {
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
transform: translate3d(0,0,0);
}
.carousel-fade .carousel-control {
z-index: 2;
}
.carousel,
.carousel-inner,
.carousel-inner .item {
height: 100%;
}
.item:nth-child(1) {
background: darkred;
}
.item:nth-child(2) {
background: red;
}
.item:nth-child(3) {
background: orange;
}
.caption {
position: absolute;

top: 64%;
right: 0;
padding: 25px;
padding-left: 25px;
left: 0;
}
.carousel-fade .carousel-control {
z-index: 2;
font-size: 90px;
top: 38%;
}
.carousel-indicators li {
background-color: rgba(0,0,0,0);
border: 1px solid #FEE16F;
border-radius: 0;
}

...

3.JS

代码如下（节选示例）：

/*
* jQuery One Page Nav Plugin
* http://github.com/davist11/jQuery-One-Page-Nav
*
* Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
* Dual licensed under the MIT and GPL licenses.
* Uses the same license as jQuery, see:
* http://jquery.org/license
*
* @version 3.0.0
*
* Example usage:
* $('#nav').onePageNav({
* currentClass: 'current',
* changeHash: false,
* scrollSpeed: 750
* });
*/

; (function ($, window, document, undefined) {

// our plugin constructor
var OnePageNav = function (elem, options) {
this.elem = elem;
this.$elem = $(elem);
this.options = options;
this.metadata = this.$elem.data('plugin-options');
this.$win = $(window);
this.sections = {};
this.didScroll = false;
this.$doc = $(document);
this.docHeight = this.$doc.height();
};

// the plugin prototype
OnePageNav.prototype = {
defaults: {
navItems: 'a',
currentClass: 'current',
changeHash: false,
easing: 'swing',
filter: '',
navHeight: 70,
scrollSpeed: 750,
scrollThreshold: 0.5,
begin: false,
end: false,
scrollChange: false
},

init: function () {
// Introduce defaults that can be extended either
// globally or using an object literal.
this.config = $.extend({}, this.defaults, this.options, this.metadata);

this.$nav = this.$elem.find(this.config.navItems);

//Filter any links out of the nav
if (this.config.filter !== '') {
this.$nav = this.$nav.filter(this.config.filter);
}

//Handle clicks on the nav
this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));

//Get the section positions
this.getPositions();

//Handle scroll changes
this.bindInterval();

//Update the positions on resize too
this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));

...