Web大学生网页成品——英雄联盟LOL游戏网站制作与实现(HTML+CSS+JS)

一、作品介绍

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

---

二、作品效果

▶️视频演示

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

(title-H44JP 英雄联盟 lol 6页带js 包含轮播)]

截图演示

06.png

05.png

04.png

03.png

02.png

01.png

---

三、 作品代码

HTML代码

  
  
  
  
  
  
  





  
  
  
  
  
    
    

      
      


        

          
网站首页
          
背景简介
          
游戏系统
          
英雄列表
          
物品资料
          
在线登陆
        

      
    
    
    

      

        
        

        
        

          

            


              

            
          
          

        
      

    
    
    

      


        

          
英雄联盟的历史
          
他们认为恶毒自私如同疾病，应当从人类灵魂中根除。来到德玛西亚并定居于此的
        

        

          
战争学院
          
战争学院内部是马约里斯秘术中心，部分是魔法学校，部分是法术储藏地，还有一部
        

        

          
诺克萨斯
          
就诺克萨斯居民的素质而言，基本都是这条准则的支持者。虽然看起来很残酷，不过
        

        

      
    
    
    


      

        

            
        

        
关于英雄联盟
        

          
        
        
《英雄联盟》(简称LOL)是由美国拳头游戏(Riot Games)开发、中国大陆地区腾讯游戏代理运营的英雄对战MOBA竞技网游。
        
 游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色养成系统。
          《英雄联盟》还致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“季中冠军赛”“全球总决赛”“All
          Star全明星赛”三大世界级赛事，获得了亿万玩家的喜爱，形成了自己独有的电子竞技文化。
          英雄联盟是一款多人竞技类游戏，于2018年加入亚运会。
        

      
    
    
    

    

    

      
© 英雄联盟

    
    
    

CSS代码

body {
    margin:0px;
    padding:0px;
    color:#717174;
    font-family: Tahoma, Geneva, sans-serif;
    font-size:13px;
    line-height:1.5em; 
    background-color: #121213;
}

a, a:link, a:visited {
    color:#c0c0c2;
}


.button a:hover {
    color: #fff;
    background: url(../image/a4.png) no-repeat;
}
.button1 a {
    clear: both;
    display: block;
    width: 109px;
    height: 30px;
    padding: 4px 0 0 0;
    background: url(../image/a6.png) no-repeat;
    
    color: #000000;
    font-weight: bold;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
}

.button1 a:hover {
    color: #fff;
    background-color: #663333;
    background-repeat: no-repeat;
}

ul {
    margin: 20px;
    padding: 0;
    list-style-image:  url(http://www.ylcp.shop/files/files/1652241704159/images/list_icon.png);
}

ul li {
    margin: 0 0 15px 0;
    padding: 0 0;
}

/* menu */

#dh {
    width: 100%;
    height: 50px;
    background: url(../image/m3.jpg) repeat-x;
}

#nav {
    width: 920px;
    height: 50px;
    margin: 0 auto;
    padding: 0 30px;
    background: url(../image/m1.jpg) no-repeat;
}

#nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#nav ul li{
    padding: 0px;
    margin: 0px;
    display: inline;
}

#nav ul li a{
    float: left;
    display: block;
    width: 124px;
    height: 38px;
    padding: 12px 0 0 0;
    margin-right: 1px;
    text-align: center;
    font-size: 16px;
    text-decoration: none;
    color: #d8d3bd; 
    font-weight: normal;
    outline: none;
}

#nav li a:hover, #nav li .current{
    color: #fff;
    background: url(../image/m2.png) no-repeat;
}


/* end of menu */

/* header */

#zt {
    width: 100%;
    height: 250px;
    background: url(../image/h1.jpg) repeat-x;
    border-bottom: 1px solid #000;
}


.footer_box {
    float: left;
    width: 280px;
    padding: 0 30px 0 0;
}

.footer_menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer_menu li {
    margin: 0;
    padding: 5px 0;
}

.footer_menu li a {
    color: #d8d3bd;
}

.footer_menu li a:hover {
    color: #fff;
}

#foot img{
    padding: 4px;
    background: #000;
    border: 1px solid #34322f;
    margin-bottom: 10px;
}

/* end of footer */

/* 版权信息 */

#copyright_wrapper {
    width: 100%;
    background: #000000;
    border-top: 1px solid #262626;
}
/* 版权信息模块 */

#copyright {
    width: 960px;
    margin: 0 auto;
    padding: 15px 20px;
    text-align: center;
    color: #6e6965;
}

#copyright a {
    color: #6e6965;
}
/* end of copyright */
.wzsy1 {
    font-size: 12px;
    line-height: 24px;
}
.wzbj {
    font-size: 13px;
    line-height: 30px;
    text-align: justify;
    text-indent: 2em;
}
.bj01 {
    height: auto;
    width: 100%;
    margin-bottom: 30px;
}
.imgyxlb {
    height: 180px;
    width: 410px;
}
/*插入首页宣传大图片*/
.banner {
    /* background-image: url(../images/banner.jpg); *//*设置背景*/
    height: 300px;/*设置高度*/
    margin-top: 10px;/*上边距*/
    margin-bottom: 30px;/*下边距*/
}
.banner img{
    height: 100%;
    width: 100%;
}
.cs_wrapper img {
    height: 150px;
    width: 100%;
}

---

四、更多源码

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

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

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