HTML+CSS+JS网页设计期末课程大作业 (王者荣耀游戏网站设计)

一、作品介绍

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

---

二、作品效果

▶️视频演示

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

(title-H35JP- 王者荣耀8页)]

截图演示

08.png

07.png

06.png

05.png

04.png

03.png

02.png

01.png

---

三、 作品代码

HTML代码

  

    

      
首页
      
介绍
      
壁纸
      
游戏视频
      
登录
      
联系我们
    
  
  

    

      

        

          

            
   
            
 
            
  
          
        
          
    
  
  

    
热门活动
    

      

        

          
  
          
  
        
        

      
      

        
  孙尚香-水果甜心优化海报...
        

          
  老亚瑟的答疑时间: 孙尚香-水果甜...   新闻 
            
 
          
          
  【狄仁杰封神榜】第53期 诈骗团伙...   新闻 
            
 
          
          
  狄某有话说｜瑶：射手只会影响我...   新闻 
            
 
          
          
  老亚瑟的答疑时间: 青白蛇设计稿票...   新闻 
            
 
          
          
  腾讯看点|新英雄“云缨”优质内容...   新闻 
            
 
          
          
  狄某有话说 | 姜子牙怎么玩？一局4...   新闻 
            
 
          
          
  投稿赢好礼，B站视频征集活动火...   新闻 
            
 
          
          
  7月1日体验服停机更新公告   热门 
            
 
          
          
  石梁长在无谓浮沉，夏日炎炎好礼...   活动 
            
 
          
          
  6月30日全服不停机更新公告   公告 
            
 
          
          
  6月29日体验服停机更新公告   公告 
            
 
          
          
  赢下喝彩，奔赴未来!第三届王者...   赛事 
            
 
          
        
      
      

      

        
    
        
    
        
    
        
    
      
    
    

    
美图
    

      

        
  
        
  
        
  
        
  
        
  
        
  
      
    
    

  
  

    
网页底部
  
  
  
  

CSS代码

@charset "utf-8";

/* CSS Document */
ul,li,h1,h2,h3,p {
  padding: 0;
  margin: 0;
  list-style: none
}

a {
  text-decoration: none;
  color: #000
}

html {
  background: rgb(163, 131, 131);
}

audio {
  position: fixed;
  bottom: -400px
}

body {
    width: 100%;
  margin: 0 auto;
  line-height: 31px
}

.clear {
  clear: both
}

.menu li {
  list-style: none
}

.head .fr {
  margin-top: 50px
}

.banner {
  position: relative;
  clear: both;
}

.main {
  width: 1200px;
  margin: auto;
}

.menu {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 55;
  float: left
}

.menu li a {
  color: #fff
}

.menu li {
  float: left;
  font-weight: bold;
  font-size: 18px;
  background: #000000;
    padding: 15px 15px;
  width: 200px
}

.content {
  padding-bottom: 20px;
  font-size: 14px;
  display: inline-block;
  width: 100%
}

.zhuce li button {
  background: #264665;
  width: 30%;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
  border: none;
}

.zhuce a {
  display: block;
  text-align: center;

}

.fl {
  float: left
}

.fr {
  float: right
}

.js div {
  width: 100%;
  clear: both;
  margin-bottom: 20px;
  float: left
}

.bar{

  clear: both;

  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  color: #fff;
  line-height: 50px;
  font-size: 20px;
  background-color: rgb(80, 80, 88);
}

.box{
  width: 100%; 
  height: 150px;
  background-color: rgb(236, 203, 210);
}
.box li{
float: left;
}
.box li a{
  display: block;
}
.box li img{
  width: 276px;
}
.head {
  color: #fff;
  font-size: 36px;
  padding: 20px 0
}
.cc{
  width: 100%;
  height: 570px;
  background-color: #fff;
}
.cc li {
  width: 31%;
  margin: 1%;
  float: left;
  text-align: center
}
.js p{
  line-height: 50px;
  text-indent: 2rem;
}


.section table {
  width: 100%;
  border-spacing: 0;
}

.section table td,
.section table th {
  border: #ddd solid 1px;
  padding: 5px 0;
}

.t-txt {
  width: 100%;
  border-spacing: 0;
}

.t-txt td,
.t-txt th {
  border: #ddd solid 1px;
  padding: 5px 0;
}

---

四、更多源码

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

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

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