1000字范文 > web前端期末大作业——响应式游戏介绍网站制作与实现(html+css+js+bootstarp)

web前端期末大作业——响应式游戏介绍网站制作与实现(html+css+js+bootstarp)

时间：2019-12-10 03:19:48

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

其中：

（1）📜html文件包含：其中index.html是首页、其他html为二级页面；

（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

H19XY-游戏网页介绍(6页)高质量

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html><html lang="en"><head><title>Index</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="Kids Video Game Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" /><script type="application/x-javascript"> addEventListener("load", function() {setTimeout(hideURLbar, 0); }, false); function hideURLbar(){window.scrollTo(0,1); } </script><link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /><link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" /><link href="css/style.css" rel="stylesheet" type="text/css" media="all" /><link href='/css?family=Josefin+Sans:400,100,100italic,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'><link href='/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'><script src="js/jquery.min.js"></script><script src="js/bootstrap.js"></script></head><body> <div class="header"><nav class="navbar navbar-default"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">切换导航<</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="index.html"><h1>CCG <img src="images/c1.png" alt=" " /> 游戏</h1></a></div><div id="navbar" class="navbar-collapse collapse"><ul class="nav navbar-nav navbar-right"><li class="hover-effect"><a href="index.html">首页</a></li><li class="hover-effect"><a href="about.html">关于</a></li><li class="hover-effect"><a href="games.html">游戏</a></li><li class="hover-effect"><a href="news.html">新闻</a></li><li class="hover-effect"><a href="contact.html">接触</a></li></ul></div></div></nav><div class="slider"><ul class="rslides" id="slider"><li><img src="images/banner1.jpg" alt="" /></li><li><img src="images/banner2.jpg" alt="" /></li><li><img src="images/banner3.jpg" alt="" /></li></ul></div></div><script src="js/responsiveslides.min.js"></script><script>$(function () {$("#slider").responsiveSlides({auto: true,nav: true,speed: 800,namespace: "callbacks",pager: true,});});</script><div class="trend-w3layouts"><div class="container"><h2>潮流小游戏</h2><ul id="flexiselDemo1"><li><div class="trend-grid"><h4>赛车游戏</h4><img src="images/tg1.jpg" alt=" " class="img-responsive" /></div></li><li><div class="trend-grid"><h4>3D游戏</h4><img src="images/tg2.jpg" alt=" " class="img-responsive" /></div></li><li><div class="trend-grid"><h4>动作游戏</h4><img src="images/tg3.jpg" alt=" " class="img-responsive" /></div></li><li><div class="trend-grid"><h4>玩具小游戏</h4><img src="images/tg4.jpg" alt=" " class="img-responsive" /></div></li></ul><script type="text/javascript">$(window).load(function() {$("#flexiselDemo1").flexisel({visibleItems: 4,animationSpeed: 1000,autoPlay: true,autoPlaySpeed: 3000, pauseOnHover: true,enableResponsiveBreakpoints: true,responsiveBreakpoints: {portrait: {changePoint:480,visibleItems: 2}, landscape: {changePoint:640,visibleItems:3},tablet: {changePoint:768,visibleItems: 4}}});});</script><script type="text/javascript" src="js/jquery.flexisel.js"></script></div></div><div class="services-agileits-w3layouts"><div class="container"><h3>服务</h3><div class="col-md-3 service-grid-agileits service-grid-agileits-top"><span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span><h4>下载</h4><p>游戏下载</p><a href="single.html">更多</a></div><div class="col-md-3 service-grid-agileits"><span class="glyphicon glyphicon-random" aria-hidden="true"></span><h4>分享</h4><p>游戏分享</p><a href="single.html">更多</a></div><div class="col-md-3 service-grid-agileits service-grid-agileits-bottom"><span class="glyphicon glyphicon-yen" aria-hidden="true"></span><h4>交易</h4><p>游戏充值</p><a href="single.html">更多</a></div><div class="col-md-3 service-grid-agileits service-grid-agileits-bottom"><span class="glyphicon glyphicon-object-align-right" aria-hidden="true"></span><h4>个人中心</h4><p>个人中心</p><a href="single.html">更多</a></div><div class="clearfix"></div></div></div><div class="new-w3-agile"><div class="container"><h3>新游戏</h3><div class="col-md-3 new-grid-w3l view view-eighth"><img src="images/ng1.jpg" alt=" " /><div class="mask"><a href="single.html"><h4>点击这里</h4></a><p>了解更多这方面的信息</p></div></div><div class="col-md-3 new-grid-w3l view view-eighth"><img src="images/ng2.jpg" alt=" " /><div class="mask"><a href="single.html"><h4>点击这里</h4></a><p>了解更多这方面的信息</p></div></div><div class="col-md-3 new-grid-w3l view view-eighth"><img src="images/ng3.jpg" alt=" " /><div class="mask"><a href="single.html"><h4>点击这里</h4></a><p>了解更多这方面的信息</p></div></div><div class="col-md-3 new-grid-w3l view view-eighth"><img src="images/ng4.jpg" alt=" " /><div class="mask"><a href="single.html"><h4>点击这里</h4></a><p>了解更多这方面的信息</p></div></div><div class="col-md-3 new-grid-agile view view-eighth"><img src="images/ng5.jpg" alt=" " /><div class="mask"><a href="single.html"><h4>点击这里</h4></a><p>了解更多这方面的信息</p></div></div><div class="col-md-3 new-grid-agile view view-eighth"><img src="images/ng6.jpg" alt=" " /><div class="mask"><a href="single.html"><h4>点击这里</h4></a><p>了解更多这方面的信息</p></div></div><div class="col-md-3 new-grid-agile view view-eighth"><img src="images/ng7.jpg" alt=" " /><div class="mask"><a href="single.html"><h4>点击这里</h4></a><p>了解更多这方面的信息</p></div></div><div class="col-md-3 new-grid-agile view view-eighth"><img src="images/ng8.jpg" alt=" " /><div class="mask"><a href="single.html"><h4>点击这里</h4></a><p>了解更多这方面的信息</p></div></div><div class="clearfix"></div></div></div><div class="services-bottom-w3-agileits"><div class="container"><div class="wthree_info"><section class="slider"><div class="flexslider"><ul class="slides"><li><div class="wthree_info_grid"><h3> 死亡歌颂者</h3><p>一曲终了、繁花散尽、伊人已逝，只余一声空叹。</p><a href="single.html" class="learn">了解更多</a></div></li><li><div class="wthree_info_grid"><h3>诡术妖姬</h3><p>当黑色的玫瑰悄悄绽放，除了镜花水月，又有谁能够了解我的心？</p><a href="single.html" class="learn">了解更多</a></div></li><li><div class="wthree_info_grid"><h3>惩戒之箭</h3><p>为你坠入地狱，沾满邪恶之力的身体，已被黑暗毒素腐蚀的容颜。一切，都只为你复仇。</p><a href="single.html" class="learn">了解更多</a></div></li></ul></div></section><script defer src="js/jquery.flexslider.js"></script><script type="text/javascript">$(window).load(function(){$('.flexslider').flexslider({animation: "slide",start: function(slider){$('body').removeClass('loading');}});});</script></div></div></div><div class="footer"><div class="container"><div class="col-md-3 footer-left-w3"><h4>接触</h4><ul><li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></li><li><a href="mailto:example@"><h6></h6></a></li></ul><ul><li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></li></ul><ul><li><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></li><li><h6></h6></li></ul><ul><li><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></li></ul></div><div class="col-md-5 footer-middle-w3"><h4>最新游戏</h4><div class="col-md-3 img-w3-agile"><a href="single.html"><img src="images/ng1.jpg" alt=" " /></a></div><div class="col-md-3 img-w3-agile"><a href="single.html"><img src="images/ng2.jpg" alt=" " /></a></div><div class="col-md-3 img-w3-agile"><a href="single.html"><img src="images/ng3.jpg" alt=" " /></a></div><div class="col-md-3 img-w3-agile"><a href="single.html"><img src="images/ng4.jpg" alt=" " /></a></div><div class="col-md-3 img-w3-agile footer-middle-wthree"><a href="single.html"><img src="images/ng5.jpg" alt=" " /></a></div><div class="col-md-3 img-w3-agile footer-middle-wthree"><a href="single.html"><img src="images/ng6.jpg" alt=" " /></a></div><div class="col-md-3 img-w3-agile footer-middle-wthree"><a href="single.html"><img src="images/ng7.jpg" alt=" " /></a></div><div class="col-md-3 img-w3-agile footer-middle-wthree"><a href="single.html"><img src="images/ng8.jpg" alt=" " /></a></div><div class="clearfix"></div></div><div class="col-md-4 footer-right-w3"><a href="index.html"><h4>CCG <img src="images/f1.png" alt=" " /> 游戏</h4></a><p>CCG游戏你的游戏天堂.</p><p class="agileinfo">感谢您选择CCG游戏.</p></div><div class="clearfix"></div><div class="copyright"><p>CCG游戏公司版权所有</p></div></div></div><style>.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}</style></body></html>

🏠CSS样式代码

h1, h2, h3, h4, h5, h6 {margin: 0;padding: 0;text-align: center;font-family: 'Josefin Sans', sans-serif;letter-spacing:1px;}p {margin:0;}ul {margin:0;padding:0;}label {margin:0;}a:focus, a:hover {text-decoration: none;outline: none}img {width: 100%;}/*-- //Reset Code --*//*-- Banner --*//*-- Navbar --*/.navbar {margin-bottom: 0;position: absolute;z-index: 99999;background:transparent;border: none;border-radius: 0;width: 100%;padding: 10px 0;}.navbar-header h1{color:#fff;font-size:40px;}.navbar-header img{width:20%;}.navbar-nav>li {padding: 5px 15px;}.navbar-default .navbar-nav>li>a {color: #fff;}.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {color: #FFF;}.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {color: #E91E63;background-color: transparent;}/*-- Link-Hover-Effect --*/.hover-effect a {padding: 10px;color: #237546;font-weight: 700;text-shadow: none;-webkit-transition: color 0.3s;-moz-transition: color 0.3s;transition: color 0.3s;font-family: 'Raleway', sans-serif;}.hover-effect a::before, .hover-effect a::after {position: absolute;left: 0;width: 100%;height: 2px;background: #fff;content: '';opacity: 0;-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;-moz-transition: opacity 0.3s, -moz-transform 0.3s;transition: opacity 0.3s, transform 0.3s;-webkit-transform: translateY(-10px);-moz-transform: translateY(-10px);transform: translateY(-10px);}.hover-effect a::before {top: 0;-webkit-transform: translateY(-10px);-moz-transform: translateY(-10px);transform: translateY(-10px);}.hover-effect a::after {bottom: 0;-webkit-transform: translateY(10px);-moz-transform: translateY(10px);transform: translateY(10px);}