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

一、📚作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

二、🔗作品效果

▶️视频演示

https://live.csdn.net/v/embed/239968

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

🧩 截图演示

06.png
05.png
04.png
03.png
02.png
01.png

三、💒 作品代码

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

四、🎁更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

📕【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容