临近期末，你还在设计HTML页面的作业，老师的作业要求让人应接不暇。HTML作业无从下手？所需网页总数太大？没有合适的模板？等等一系列问题。你想解决专栏里的问题。
Html+Css+JavaScript最终赋值
可以满足你的需求。独创的HTML+CSS+JS页面设计，web大学生网页设计源码，是一款不错的网页制作，配有灵动的图片，非常适合初学者学习使用。
网页实现截图:文末获取源代码
官网动画主页:
游戏动画页面显示:
招聘人才:
联系我们:
关于公司:
主源代码显示:
主源代码显示:
游戏动画homepage.html
<head> <title>游戏动漫官网-首页</title> </head> <body> <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> < <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--> <style> .copyrights { text-indent: -9999px; height: 0; line-height: 0; font-size: 0; overflow: hidden; } </style>
主页css& lthead & gt & lt；title & gt游戏动画官网-首页
。导航条-默认。导航条-导航& gt。活动的& gt答， 。导航条-默认。导航条-导航& gt。活动的& gt答:专注， 。导航条-默认。导航条-导航& gt。活动的& gta:hover { color:# cf0f 32； 背景:无； } 。导航条-默认。导航条-导航& gt李& gta:hover { color:# cf0f 32； } 。导航条-导航& gt李& gta { 行高:80px } 。导航条-默认。导航条-导航& gt李& gta { color:# 000； } 。nav & gt李& gta { 填充:10px 12px display:inline-block； } 。导航条-默认。导航条-导航& gtli.lang { 边距-左侧:20px }xxxxxxxxxxbr。导航条-默认。导航条-导航& gt。活动的& gta，br . navbar-默认。导航条-导航& gt。活动的& gta:focus，br.navbar-default。导航条-导航& gt。活动的& gta:hover { br color:# cf0f 32；br背景:无；br } brbr . navbar-默认。导航条-导航& gt李& gta:hover { br color:# cf0f 32；br } brbr . navbar-nav & gt；李& gta {br行高:80pxbr } brbr . navbar-默认。导航条-导航& gt李& gta { br color:# 000；br } brbr.nav & gt李& gta { br padding:10px 12px；br显示:内嵌-块；br } brbr . navbar-默认。导航条-导航& gtLi . lang { br margin-left:20px；Br }实现图片轮播的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', }, });
xxxxxxxxxxbr //多图轮播br jQuery(".picScroll").slide({br mainCell: "ul",br effect: "leftLoop",br vis: 6,br scroll: 1,br autoPage: true,br switchLoad: "_src",br autoPlay: truebr });brbr //banner轮播br var swiper = new Swiper('.swiper-container', {br spaceBetween: 30,br // effect: 'fade',br loop: true,br pagination: {br el: '.swiper-pagination',br clickable: true,br },br navigation: {br nextEl: '.swiper-button-next',br prevEl: '.swiper-button-prev',br },br });br
