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代码

  









 

    

        
        

            


                

                    
                        切换导航<
                        
                        
                        
                    
                    
CCG  游戏
                

                

                    

                        
首页
                        
关于
                        
游戏
                        
新闻
                        
接触
                    
                

            
        
        

        
        

            

                

                    
                
                

                    
                
                

                    
                
            
        
        

    
    
    
    
    
    



    

        
潮流小游戏
        
         
                

                    

                        
赛车游戏
                        
                    
                
                

                    

                        
3D游戏
                        
                    
                
                

                    

                        
动作游戏
                        
                    
                
                

                    

                        
玩具小游戏
                        
                    
                
            
                        
                    
    






    

        
服务
        

            
            
下载
            
游戏下载
            更多
        
        

            
            
分享
            
游戏分享
            更多
        
        

            
            
交易
            
游戏充值
            更多
        
        

            
            
个人中心
            
个人中心
            更多
        
        

    





    

        
新 游戏
        

            
            

                
点击这里
                
了解更多这方面的信息
            
        
        

            
            

                
点击这里
                
了解更多这方面的信息
            
        
        

            
            

                
点击这里
                
了解更多这方面的信息
            
        
        

            
            

                
点击这里
                
了解更多这方面的信息
            
        
        

            
            

                
点击这里
                
了解更多这方面的信息
            
        
        

            
            

                
点击这里
                
了解更多这方面的信息
            
        
        

            
            

                
点击这里
                
了解更多这方面的信息
            
        
        

            
            

                
点击这里
                
了解更多这方面的信息
            
        
        

    






        

            

                

                    

                        

                            

                                

                                    
 死亡歌颂者
                                    
一曲终了、繁花散尽、伊人已逝，只余一声空叹。
                                    了解更多
                                
                            
                            

                                

                                    
诡术妖姬
                                    
当黑色的玫瑰悄悄绽放，除了镜花水月，又有谁能够了解我的心？
                                    了解更多
                                
                            
                            

                                

                                    
惩戒之箭
                                    
为你坠入地狱，沾满邪恶之力 的身体，已被黑暗毒素腐蚀的容颜。一切，都只为你复仇。
                                    了解更多
                                
                            
                        
                    
                
                        
                            
                            
                            
                        
            
        
    



    

        

            
接触
            

                

                

            
            

                

            
            

                

                

            
            

                

            
        
        

            
最新游戏
            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
            

        
        

            
CCG  游戏
            
CCG游戏 你的游戏天堂.
            
感谢您选择CCG游戏.
        
        

        

            
CCG游戏公司 版权所有
        
    

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