HTML5期末大作业：设计网站设计——动漫设计响应式(10页) HTML+CSS+JavaScript 动漫设计制作
文章目录
HTML5期末大作业：设计网站设计——动漫设计响应式(10页) HTML+CSS+JavaScript 动漫设计制作一、作品展示二、文件目录三、代码实现四、完整源码一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="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"><buttontype="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"><divclass="swiper-slide"style="background-image: url(img/banner.png)"></div><divclass="swiper-slide"style="background-image: url(img/banner.png)"></div><divclass="swiper-slide"style="background-image: url(img/banner.png)"></div><divclass="swiper-slide"style="background-image: url(img/banner.png)"></div><divclass="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">广州袁动动漫设计有限公司（YDART），致力于CG美术概念设计及三维影视游戏视觉开发制作</span><span>其团队现由创办人袁杰联合著名CG艺术家肖壮悦以及XRCGTEAM（<ahref=""></a>）成员和各游戏、影视、动漫业内资深艺术家所组成，</span><span>为国内外众多项目提供优质概念设计、原画设定、美宣插画、次世代3D、GUI、动作特效等外包服务。</span><span>曾参与《星际争霸》《上古卷轴》《英雄联盟》《战神》《三国无双》《梦幻西游》《LOC》《鬼吹灯》《长城》等国内外大型游戏影视项目视觉美术开发制作</span></div><div class="row"><div class="col-xs-6 col-sm-3"><div class=""><h3class="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=""><h3class="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=""><h3class="timer count-title"id="count-number"data-to="200"data-speed="1500"></h3><img src="img/doimg_1.png" />手游</div></a><a href="###"><divclass="col-xs-6 col-sm-4 col-md-2 wow bounceInLeft"data-wow-delay="1s"><img src="img/doimg_2.png" />页游</div></a><a href="###"><divclass="col-xs-6 col-sm-4 col-md-2 wow bounceInLeft"data-wow-delay="0.5s"><img src="img/doimg_3.png" />端游</div></a><a href="###"><divclass="col-xs-6 col-sm-4 col-md-2 wow bounceInRight"data-wow-delay="0.5s"><img src="img/doimg_4.png" />次世代</div></a><a href="###"><divclass="col-xs-6 col-sm-4 col-md-2 wow bounceInRight"data-wow-delay="1s"><img src="img/doimg_5.png" />单机</div></a><a href="###"><divclass="col-xs-6 col-sm-4 col-md-2 wow bounceInRight"data-wow-delay="1.5s"><img src="img/doimg_6.png" />影视</div></a></div><div class="text-list wow bounceInDown"><ul><li><a href="###">角色原画设计</a><a href="###">场景原画设计</a><a href="###">UI设计</a></li><li><a href="###">肖像绘制</a><a href="###">道具绘制</a><a href="###">图标绘制</a></li><li><a href="###">美宣</a><a href="###">卡牌绘制</a><a href="###">2D场景整合</a></li><li><a href="###">3DMAX角色模型</a><a href="###">3DMAX场景模型</a><a href="###">次世代模型、贴图</a></li><li><a href="###">3DMAX动画</a><a href="###">3DMAX特效</a><a href="###">3转2绘制</a></li></ul></div></div></div><!--footer--><div class="footer"><img src="img/foot_logo.png" /></div></body><scriptsrc="js/jquery.min.js"type="text/javascript"charset="utf-8"></script><scriptsrc="js/bootstrap.min.js"type="text/javascript"charset="utf-8"></script><script type="text/javascript" src="js/jquery.SuperSlide.2.1.js"></script><script src="js/numberAdd.js" type="text/javascript" charset="utf-8"></script><scriptsrc="js/swiper.min.js"type="text/javascript"charset="utf-8"></script><script type="text/javascript" src="js/wow.min.js"></script><script type="text/javascript">//多图轮播jQuery(".picScroll").slide({mainCell: "ul",effect: "leftLoop",vis: 6,scroll: 1,autoPage: true,switchLoad: "_src",autoPlay: true,});//banner轮播var swiper = new Swiper(".swiper-container", {spaceBetween: 30,//effect: 'fade',loop: true,pagination: {el: ".swiper-pagination",clickable: true,},navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});//鼠标滚动特效new WOW().init();</script></html>
四、完整源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
网页设计成品DW静态网页Html5自应式css3——动漫设计响应式(10页) HTML+CSS+JavaScript 动漫设计制作 简单静态HTML网页作品 动漫设计作业成品 学生个人网站模板
