🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
📂文章目录
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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>
<!-- css -->
<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" />
<!--// css -->
<!-- font -->
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:400,100,100italic,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!-- //font -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<!-- Header -->
<div class="header">
<!-- Navbar -->
<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>
<!-- //Navbar -->
<!-- Slider -->
<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>
<!-- //Slider -->
</div>
<!-- Banner-Slider-JavaScript -->
<script src="js/responsiveslides.min.js"></script>
<script>
$(function () {
$("#slider").responsiveSlides({
auto: true,
nav: true,
speed: 800,
namespace: "callbacks",
pager: true,
});
});
</script>
<!-- //Banner-Slider-JavaScript -->
<!-- //Header -->
<!-- trend -->
<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>
<!-- //trend -->
<!-- services-->
<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>
<!-- //services-->
<!-- new games -->
<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>
<!-- //new games-->
<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>
<!-- flexSlider -->
<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>
<!-- //flexSlider -->
</div>
</div>
</div>
<!-- footer -->
<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@mail.com"><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>
<!-- //footer -->
<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);
}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻