首页 > 其他分享 >494. 响应式动漫设计公司网站 大学生期末大作业 Web前端网页制作 html5+css+js

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

时间：2024-09-20 22:24:34浏览次数：11  
标签：Web 网页 settings navbar js html5 background data swiper

目录

一、网页概述

二、网页文件

 三、网页效果

四、代码展示

1.html

2.CSS

3.JS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

六、更多推荐

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

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

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

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

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

一、网页概述

本实例应用html5+css+js： 导航菜单、图片轮翻、三级页面、无缝滚动插件、鼠标滑动特效、文字特效、中英文双语切换等。适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

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

 三、网页效果

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

四、代码展示

1.html

<!DOCTYPE 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>袁动官网-首页</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="#">
            <img src="img/logo.png" alt="" />
          </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>
              项目

...

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;
}

...

3.JS

代码如下（节选示例）：

//窗口显示才加载
var wrapTop = $(".aboutUs").offset().top;
var istrue = true;
$(window).on("scroll",
function() {
    var s = $(window).scrollTop();
    if (s > wrapTop - 500 && istrue) {
        $(".timer").each(count);
        function count(a) {
            var b = $(this);
            a = $.extend({},
            a || {},
            b.data("countToOptions") || {});
            b.countTo(a)
        };
        istrue = false;
    };
})
//设置计数
$.fn.countTo = function (options) {
    options = options || {};
    return $(this).each(function () {
        //当前元素的选项
        var settings = $.extend({}, $.fn.countTo.defaults, {
            from:            $(this).data('from'),
            to:              $(this).data('to'),
            speed:           $(this).data('speed'),
            refreshInterval: $(this).data('refresh-interval'),
            decimals:        $(this).data('decimals')
        }, options);
        //更新值
        var loops = Math.ceil(settings.speed / settings.refreshInterval),
            increment = (settings.to - settings.from) / loops;
        //更改应用和变量
        var self = this,
        $self = $(this),
        loopCount = 0,
        value = settings.from,
        data = $self.data('countTo') || {};
        $self.data('countTo', data);
        //如果有间断，找到并清除
        if (data.interval) {
            clearInterval(data.interval);
        };
        data.interval = setInterval(updateTimer, settings.refreshInterval);
        //初始化起始值
        render(value);
        function updateTimer() {
            value += increment;
            loopCount++;
            render(value);
            if (typeof(settings.onUpdate) == 'function') {
                settings.onUpdate.call(self, value);
            }
            if (loopCount >= loops) {
                //移出间隔
                $self.removeData('countTo');
                clearInterval(data.interval);
                value = settings.to;
                if (typeof(settings.onComplete) == 'function') {
                    settings.onComplete.call(self, value);
                }
            }
        }
        function render(value) {
            var formattedValue = settings.formatter.call(self, value, settings);
            $self.html(formattedValue);
        }
        });
    };
    $.fn.countTo.defaults={
        from:0,               //数字开始的值
        to:0,                 //数字结束的值
        speed:1000,           //设置步长的时间
        refreshInterval:100,  //隔间值
        decimals:0,           //显示小位数
        formatter: formatter, //渲染之前格式化
        onUpdate:null,        //每次更新前的回调方法
        onComplete:null       //完成更新的回调方法
    };
    function formatter(value, settings){
        return value.toFixed(settings.decimals);
    }
    //自定义格式
    $('#count-number').data('countToOptions',{
        formmatter:function(value, options){
            return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
        }
    });
    //定时器
    $('.timer').each(count);
    function count(options){
        var $this=$(this);
        options=$.extend({}, options||{}, $this.data('countToOptions')||{});
        $this.countTo(options);
    }
 

...

五、总结

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

1.简洁实用

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

2.使用方便

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

3.整体性好

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

4.形象突出

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

5.交互式强

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

六、更多推荐

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

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

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

标签：Web,网页,settings,navbar,js,html5,background,data,swiper
From： https://blog.csdn.net/A240307/article/details/142383187

相关文章

  • WebViz可视化工具的应用
    WebViz可视化Webviz是一个基于Web的可视化工具，意味着您可以通过浏览器/APP访问它，而不需要安装额外的软件。这对于远程访问和团队协作非常方便。Foxglove是一个开源的工具包，包括线上和线下版。旨在简化机器人系统的开发和调试。它提供了一系列用于构建机器人应用程序的功能。本节将......
  • Nodejs 揭秘：单线程魔法背后的真相以及它如何为高性能应用程序提供动力
    Node.js有时被称为“单线程”，这个词对于习惯了Java或.NET等多线程环境的开发人员来说可能会令人困惑，甚至令人畏惧。然而，Node.js如何处理作业的真相远比这个简单术语所暗示的复杂和强大。在这篇博客中，我们将了解Node.js的架构、单线程意味着什么，以及Node.js如何通过其独......
  • Nodejs 的新功能
    TL;DR:让我们探索Node.js22的主要功能，包括ECMAScript模块支持和V8引擎更新。此版本引入了Maglev编译器和内置WebSocket客户端，以增强性能和实时通信。还涵盖了测试、调试和文件系统管理方面的改进。Node.js22将于10月进入LTS，现在是尝试这些功能的最佳时机！在本博......
  • nodejs中文官网
    node.js中文官方网站为https://nodejs.cn/，由node.js基金会维护，提供全面的node.js信息和资源，包括：文档、社区、资源和其他信息，特点是全面性、准确性、及时性、易用性和活跃社区。nodejs中文官网nodejs中文官网是哪个？Node.js中文官方网站为：https://nodejs.cn/详细介绍Node.js......
  • nodejs实际应用场景
    node.js是一种用于开发各种高性能应用程序的javascript运行时环境，其主要实际应用场景包括：后端web应用程序开发实时应用程序开发（例如聊天室和多人游戏）为移动应用程序提供后端服务构建轻量级微服务实时数据流处理和数据管道构建devops自动化和监控/日志记录物联网边缘计算和物......
  • nodejs应用领域
    node.js广泛应用于以下领域：后端开发（restapi、网站、web应用程序）事件流处理移动和桌面应用程序开发（跨平台、桌面应用程序）实时通信（实时聊天、多用户游戏）物联网（传感器数据采集、智能设备控制、自动化）大数据分析（分布式处理、可视化、机器学习）微服务架构（可扩展、模块化、独立的微服......
  • node.js的特点及应用在哪些场景
    node.js的特点：单线程、事件驱动非阻塞i/o模块化系统跨平台应用场景：实时应用数据密集型应用web服务和api微服务架构devops工具Node.js的特点及其应用场景特点Node.js是一个基于ChromeV8引擎构建的JavaScript运行时环境，具有以下特点：单线程、事件驱动：Node.js采用单线程模型，通过事件......
  • node.js适用哪些场景
    node.js适用于以下场景：高并发、低延迟的服务器端应用实时应用程序微服务命令行工具数据流处理物联网(iot)机器学习Node.js适用的场景Node.js是一种流行的JavaScript运行时环境，适用于广泛的应用场景。以下是其最常见的应用场景：1.高并发、低延迟的服务器端应用Node.js强大的......
  • Nodejs 与 Expressjs：了解差异及其在 Web 开发中的作用
    在现代Web开发中，JavaScript已经成为一种基石技术，不仅适用于前端开发，也适用于服务器端应用程序。Node.js和Express.js是对JavaScript在服务器端编程中的崛起做出重大贡献的两项关键技术。了解Node.js和Express.js之间的差异以及它们在Web开发中的作用对于任何旨在构建......
  • Nodejs 中的 API 速率限制
    api构成了现代网络通信的支柱，管理客户端访问它们的频率至关重要。实施速率限制可通过控制api请求流来确保您的服务器保持响应速度和安全。本指南重点介绍在node.js（一个广泛使用的用于构建可扩展web服务的平台）中实现api速率限制的关键策略。什么是api速率限制？api......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99