284. Web前端网页制作 动漫设计公司响应式网页设计实例 大学生期末大作业 htm

编程语言 2025-04-10 00:21
0 阅读

目录

一、前言  

二、网页文件

 三、网页效果

四、代码展示

1.HTML

2.CSS

3.JS

 五 、更多推荐

一、前言  

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

扫描二维码关注公众号，回复： 17593425 查看本文章

二、网页文件

 三、网页效果

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

四、代码展示

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">
        <!-- Brand and toggle get grouped for better mobile display -->
        <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>
          <!--logo-->
          <a class="navbar-brand" href="#">
          </a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <!--<ul class="language navbar-right">
                        <li><a href="#" class="active">中</a></li>
                        <li>|</li>
                        <li><a href="#">EN</a></li>
                      </ul>-->
          <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>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
    <!-- Swiper -->
    <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>
      <!-- Add Pagination -->
      <div class="swiper-pagination swiper-pagination-white"></div>
      <!-- Add Arrows -->
      <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...'
  }
 

......

 五 、更多推荐

【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！

猜你喜欢

目录

热门文章