23.动漫设计公司响应式网页 Web前端网页制作大学生期末大作业 html5+css+js

一只小小的眠羊

于 2024-10-03 23:32:47 发布

阅读量583

点赞数 7

分类专栏：大学生期末大作业动漫文章标签： html css javascript html5 jquery 正则表达式 bootstrap

本文链接：https://blog.csdn.net/VX_L_5201314168/article/details/142697811

版权

大学生期末大作业同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

动漫

2 篇文章 0 订阅

订阅专栏

一、前言

本文为动漫设计公司网页设计实例，应用html5+css3+js，响应式布局，可以根据不同的设备屏幕大小自动调整页面布局，手机等移动设备自适应界面，提高用户体验；支持包括IE、Firefox、Chrome、Safari等主流浏览器。本实例适用于动漫、游戏设计公司，大学生网页课程作业等网页设计的应用，供大家参考。

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>xx官网-首页</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid wrap">

<div class="navbar-header">
<button
type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"
aria-expanded="false"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a class="navbar-brand" href="#">
</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav main-nav navbar-right">
<li class="active"><a href="index.html">首页</a></li>
<li><a href="worksShow.html">作品展示</a></li>
<li><a href="recruit.html">招贤纳士</a></li>
<li><a href="contract.html">联系我们</a></li>
<li><a href="about.html">关于公司</a></li>
<li class="lang">
<a class="active">中</a>|<a href="en_index.html">EN</a>
</li>
</ul>
</div>

</div>

</nav>

<div class="swiper-container">
<div class="swiper-wrapper">
<div
class="swiper-slide"
style="background-image: url(img/banner.png)"
></div>
<div
class="swiper-slide"
style="background-image: url(img/banner.png)"
></div>
<div
class="swiper-slide"
style="background-image: url(img/banner.png)"
></div>
<div
class="swiper-slide"
style="background-image: url(img/banner.png)"
></div>
<div
class="swiper-slide"
style="background-image: url(img/banner.png)"
></div>
</div>

<div class="swiper-pagination swiper-pagination-white"></div>

<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>

<div class="lunbo">
<div class="title wow bounceInUp">我们参与的项目</div>
<div class="picScroll">
<ul>
<li>
<a target="_blank" href="###">
<img _src="img/lunbo1.png" src="img/lunbo1.png" />
<div class="img-text">大型海战战场“潜龙之渊”上线，全民开战！</div>
</a>
</li>
<li>
<a target="_blank" href="###">
<img _src="img/lunbo2.png" src="img/lunbo2.png" />
<div class="img-text">
天刀嘲天宫《一人之战》视频首发同名专辑上架QQ音乐
</div>
</a>
</li>
<li>
<a target="_blank" href="###"
><img _src="img/lunbo3.png" src="img/lunbo3.png" />
<div class="img-text">懒人攻略如何刷完一周胜负令</div>
</a>
</li>
<li>
<a target="_blank" href="###"
><img _src="img/lunbo4.png" src="img/lunbo4.png" />
<div class="img-text">
《王者荣耀》魔性H5上线，五军对决等你来战
</div>
</a>
</li>
<li>
<a target="_blank" href="###"
><img _src="img/lunbo5.png" src="img/lunbo5.png" />
<div class="img-text">
超高期待！玩家Coser作品获《绝地求生全军出击》官方点赞
</div>
</a>
</li>
<li>
<a target="_blank" href="###"
><img _src="img/lunbo6.png" src="img/lunbo6.png" />
<div class="img-text">揭幕战RNGvsIG LPL春季赛1月15日正式开赛</div>
</a>
</li>
</ul>
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<a href="###"><div class="more">更多作品</div></a>
</div>

<div class="aboutUs">
<div class="wrap">
<div class="title wow bounceInUp">关于我们</div>
<div class="text wow slideInDown">
<span class="ccf0f32"
>广州袁动动漫设计有限公司（YD
ART），致力于CG美术概念设计及三维影视游戏视觉开发制作</span
>
<span
>其团队现由创办人袁杰联合著名CG艺术家肖壮悦以及XRCGTEAM（<a
href="http://www.xrcgteam.com"
>http://www.xrcgteam.com</a
>）成员和各游戏、影视、动漫业内资深艺术家所组成，</span
>
<span
>为国内外众多项目提供优质概念设计、原画设定、美宣插画、次世代3D、GUI、动作特效等外包服务。</span
>
<span
>曾参与《星际争霸》《上古卷轴》《英雄联盟》《战神》《三国无双》《梦幻西游》《LOC》《鬼吹灯》《长城》等国内外大型游戏影视项目视觉美术开发制作</span
>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3">
<div class="">
<h3
class="timer count-title"
id="count-number"
data-to="150"
data-speed="1500"
></h3>
员工
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="">
<h3
class="timer count-title"
id="count-number"
data-to="100"
data-speed="1500"
></h3>
客户
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="">
<h3
class="timer count-title"
id="count-number"
data-to="200"
data-speed="1500"
></h3>
项目
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="">
<h3
class="timer count-title"
id="count-number"
data-to="6"
data-speed="1500"
></h3>
周年
</div>
</div>
</div>
</div>
</div>

<div class="believe">
<div class="wrap">
<div class="title wow bounceInUp">他们信任我们</div>
<div class="partnerList">
<ul>
<a href="###">
<li>
<img src="img/about_01.jpg" />
</li>
</a>
<a href="###">
<li>
<img src="img/about_02.jpg" />
</li>
</a>
<a href="###">
<li>

......

2.CSS

代码如下（节选示例）：

body {
   font-size: 18px;
   font-family: "microsoft yahei";
}
a:hover {
   text-decoration: none;
}
.row{
   margin-right: 0;
   margin-left: 0;
}
.wrap {
   max-width: 1200px;
   margin: 0 auto;
}
.navbar-default {
   background-color: rgba(255, 255, 255, 0.9);
   border: 0;
   height: 100px;
   line-height: 100px;
}
.navbar-brand {
   height: 100px;
   padding: 25px 15px;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
   color: #cf0f32;
   background: none;
}
.navbar-default .navbar-nav>li>a:hover{
   color: #cf0f32;
}
.navbar-nav>li>a {
   line-height: 80px;
}
.navbar-default .navbar-nav>li>a {
   color: #000;
}
.nav>li>a {
   padding: 10px 12px;
   display: inline-block;
}

.navbar-default .navbar-nav>li.lang {
margin-left: 20px;
}

.navbar-default .navbar-nav>li.lang>a {
color: #cccccc;
}

.navbar-default .navbar-nav>li.lang>a.active {
color: #000000;
}

.navbar-right {
margin-right: -10px;
}

/*banner轮播*/
.swiper-container {
width: 100%;
height: 850px;
}
.swiper-slide {
background-position: center;
background-size: cover;
}
.swiper-pagination-bullet{
   width: 15px;
   height: 15px;
   margin: 5px;
   background: #b6b6b2;
   opacity:1;
}
.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white{
   background: url(../img/right_arrow.png) no-repeat center center;
}
.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white{
   background: url(../img/left_arrow.png) no-repeat center center;
}
.swiper-button-next, .swiper-button-prev{
   width: 46px;
   height: 120px;
}
/*多图轮播*/
.picScroll {
   margin: 50px auto;
   position: relative;
   border: 0px solid #eee;
   overflow: hidden;
   width: 100%;
}
.picScroll .prev {
   display: block;
   position: absolute;
   top: 60px;
   left: 15px;
   width: 46px;
   height: 70px;
   background: url(../img/slider-left-arrow.png) no-repeat;
}
.picScroll .next {
   display: block;
   position: absolute;
   top: 60px;
   right: 15px;
   width: 46px;
   height: 70px;
   background: url(../img/slider-right-arrow.png) no-repeat;
   left: auto;
}
.picScroll ul {
   overflow: hidden;
   zoom: 1;
}
.picScroll ul li {
   width: 300px;
   float: left;
   overflow: hidden;
   margin: 0 9px;
   background: #FFFFFF;
}

.picScroll ul li img {
   width: 300px;
   height: 188px;
   display: block;
   margin-top: -25px;
}

.picScroll .img-text {
   color: #333333;
   font-size: 18px;
   padding: 10px 20px;
   height: 110px;
   overflow: hidden;
}
.lunbo{
   background: #f0f0f0;
   padding: 60px 0;
}
.lunbo .title {
   text-align: center;
   color: #262b2e;
   font-size: 36px;
   margin: 0px auto;
   padding-bottom: 60px;
}

.lunbo .more {
   width: 130px;
   height: 60px;
   background: #cf0f32;
   color: #FFFFFF;
   margin: 0 auto;
   text-align: center;
   line-height: 60px;
   margin-bottom: 50px;
}

/*关于我们*/

.ccf0f32 {
color: #CF0F32;
}

.aboutUs {
background: #FFFFFF;
padding: 30px 0 50px 0;
}

.aboutUs .title {
   text-align: center;
   color: #262b2e;
   font-size: 36px;
   margin: 0px auto;
   padding-bottom: 20px;
}

.aboutUs .text {
   color: #535557;
   text-align: center;
   line-height: 40px;
   margin-bottom: 30px;
   padding: 0 20px;
}

.aboutUs .text>span {
display: block;
font-size: 16px;
}

.aboutUs .text>span>a:hover {
text-decoration: underline;
}

......

3.JS

代码如下（节选示例）：

/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under the MIT license
*/

if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap\'s JavaScript requires jQuery')
}

+function ($) {
'use strict';
var version = $.fn.jquery.split(' ')[0].split('.')
if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 3)) {
throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4')
}
}(jQuery);

/* ========================================================================
* Bootstrap: transition.js v3.3.7
* http://getbootstrap.com/javascript/#transitions
* ========================================================================
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */

+function ($) {
'use strict';

// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================

function transitionEnd() {
var el = document.createElement('bootstrap')

var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
OTransition : 'oTransitionEnd otransitionend',
transition : 'transitionend'
}

for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}

return false // explicit for ie8 ( ._.)
}

// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false
var $el = this
$(this).one('bsTransitionEnd', function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}

$(function () {
$.support.transition = transitionEnd()

if (!$.support.transition) return

$.event.special.bsTransitionEnd = {
bindType: $.support.transition.end,
delegateType: $.support.transition.end,
handle: function (e) {
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
}
}
})

}(jQuery);

/* ========================================================================
* Bootstrap: alert.js v3.3.7
* http://getbootstrap.com/javascript/#alerts
* ========================================================================
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */

+function ($) {
'use strict';

// ALERT CLASS DEFINITION
// ======================

var dismiss = '[data-dismiss="alert"]'
var Alert = function (el) {
$(el).on('click', dismiss, this.close)
}

Alert.VERSION = '3.3.7'

Alert.TRANSITION_DURATION = 150

Alert.prototype.close = function (e) {
var $this = $(this)
var selector = $this.attr('data-target')

if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}

var $parent = $(selector === '#' ? [] : selector)

if (e) e.preventDefault()

if (!$parent.length) {
$parent = $this.closest('.alert')
}

$parent.trigger(e = $.Event('close.bs.alert'))

if (e.isDefaultPrevented()) return

$parent.removeClass('in')

function removeElement() {
// detach from parent, fire event then clean up data
$parent.detach().trigger('closed.bs.alert').remove()
}

$.support.transition && $parent.hasClass('fade') ?
$parent
.one('bsTransitionEnd', removeElement)
.emulateTransitionEnd(Alert.TRANSITION_DURATION) :
removeElement()
}

// ALERT PLUGIN DEFINITION
// =======================

function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.alert')

if (!data) $this.data('bs.alert', (data = new Alert(this)))
if (typeof option == 'string') data[option].call($this)
})
}

var old = $.fn.alert

$.fn.alert = Plugin
$.fn.alert.Constructor = Alert

// ALERT NO CONFLICT
// =================

$.fn.alert.noConflict = function () {
$.fn.alert = old
return this
}

// ALERT DATA-API
// ==============

$(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)

}(jQuery);

/* ========================================================================
* Bootstrap: button.js v3.3.7
* http://getbootstrap.com/javascript/#buttons
* ========================================================================
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */

+function ($) {
'use strict';

// BUTTON PUBLIC CLASS DEFINITION
// ==============================

var Button = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Button.DEFAULTS, options)
this.isLoading = false
}

Button.VERSION = '3.3.7'

Button.DEFAULTS = {
loadingText: 'loading...'
}

......