仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS

简介: 仿王者荣耀网页-前端网页技术设计完整精美源码HTML+CSS+JS

f8a4dc090b7c4685b4b8ff7d96180e88.png

效果预览①主页首页

cd0756131f90428dbf47f124477b5e36.png0ef8f2d3ef094e1f8bee65db326eeaec.png


效果预览②游戏介绍页


9286aeb2e3b542708e43db73fce8d259.png4250e3fb7d4842f5a663953bb7f94c01.png6821e41ec6624f30bf92bed4faae8cf9.png


效果预览③游戏攻略页


873d387c8a934ac79d675b15d1bad89f.png667420710b224c6ea5dc17f67542cd74.png


效果预览④手办商城页


6a307edcd5584b61ba0f46b88f777ca9.pngviolation-del.png


效果预览⑤问卷调查页


48a8d871c6f740ed84cceb49391ddd58.png84f2871f2b104921ab2417c7cef82e39.png


效果预览⑥加入我们页


violation-del.png


微信公众号:创享日记

发送:王者荣耀

获取完整源码(打开即可用)


其余及源码详见下载!


/*出装图片切换板块*/
var i=0;
function hero(i){
  var a=document.getElementById("a1");
  if(i==0)
  a.setAttribute("src","images/上官婉儿出装铭文.jpg");
  if(i==1)
  a.setAttribute("src","images/狄仁杰出装铭文.jpg");
  if(i==2)
  a.setAttribute("src","images/蔡文姬出装铭文.jpg");
  if(i==3)
  a.setAttribute("src","images/夏侯惇出装铭文.jpg");
  if(i==4)
  a.setAttribute("src","images/嫦娥出装铭文.jpg");
  if(i==5)
  a.setAttribute("src","images/狂铁出装铭文.jpg");
  if(i==6)
  a.setAttribute("src","images/阿珂出装铭文.jpg");
  if(i==7)
  a.setAttribute("src","images/铠出装铭文.jpg");
  if(i==8)
  a.setAttribute("src","images/嬴政出装铭文.jpg");
  if(i==9)
  a.setAttribute("src","images/安琪拉出装铭文.jpg");
  if(i==10)
  a.setAttribute("src","images/西施出装铭文.jpg");
  if(i==11)
  a.setAttribute("src","images/甄姬出装铭文.jpg");
  if(i==12)
  a.setAttribute("src","images/马可波罗出装铭文.jpg");
  if(i==13)
  a.setAttribute("src","images/孙悟空出装铭文.jpg");
  if(i==14)
  a.setAttribute("src","images/百里守约出装铭文.jpg");
  if(i==15)
  a.setAttribute("src","images/黄忠出装铭文.jpg");
  if(i==16)
  a.setAttribute("src","images/庄周出装铭文.jpg");
  if(i==17)
  a.setAttribute("src","images/盘古出装铭文.jpg");
  if(i==18)
  a.setAttribute("src","images/张良出装铭文.jpg");
  if(i==19)
  a.setAttribute("src","images/貂蝉出装铭文.jpg");
  if(i==20)
  a.setAttribute("src","images/百里玄策出装铭文.jpg");
  if(i==21)
  a.setAttribute("src","images/姜子牙出装铭文.jpg");
  if(i==22)
  a.setAttribute("src","images/李信出装铭文.jpg");
  if(i==23)
  a.setAttribute("src","images/明世隐出装铭文.jpg");
  if(i==24)
  a.setAttribute("src","images/武则天出装铭文.jpg");
  if(i==25)
  a.setAttribute("src","images/雅典娜出装铭文.jpg");
  if(i==26)
  a.setAttribute("src","images/成吉思汗出装铭文.jpg");
  if(i==27)
  a.setAttribute("src","images/裴擒虎出装铭文.jpg");
  if(i==28)
  a.setAttribute("src","images/程咬金出装铭文.jpg");
  if(i==29)
  a.setAttribute("src","images/橘右京出装铭文.jpg");
  if(i==30)
  a.setAttribute("src","images/瑶出装铭文.jpg");
  if(i==31)
  a.setAttribute("src","images/鬼谷子出装铭文.jpg");
  if(i==32)
  a.setAttribute("src","images/艾琳出装铭文.jpg");
}


相关文章
|
5月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
281 1
|
5月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
406 1
|
5月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
403 3
|
5月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
600 0
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1352 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
613 0
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
648 6
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
961 1