![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
冒险岛模拟
风铭大师
长不过执念,短不过善变
展开
-
模板引擎art-template的介绍
首先介绍我们的主角: 下载地址:https://github.com/aui/art-template 模板引擎插件(art-template),它的官方介绍是:拥有接近 JavaScript 渲染极限的的性能.今天我们就用它来渲染我们网页的部分内容.需要渲染的部分: 这里面的页面结构极其相似,所以我们利用模板可以生成.接着,我们介绍模板的...原创 2018-09-08 11:00:53 · 8644 阅读 · 0 评论 -
冒险岛官网模拟之五利用PHP+jQuery实现游戏排行榜的制作(连更)
先看效果: 实现后代具体效果是这样的,如果我们直接用CSS+HTML书写的话,代码量是非常巨大的。为了简化我们的代码,所以我们采用从数据库里面获取内容的形式来精简我们的代码。具体流程:在代码中,我们只写了一个li标签,然后通过获取数据库里的数据(得到的是一个数组),将这个数组遍历出来生成对应的li标签盒子。而li标签就包含上图滑动展示出来的所有内容。所以我们的代码里面只需要一个li标...原创 2018-08-22 22:01:35 · 1717 阅读 · 0 评论 -
冒险岛2官网模拟具体教程之一工具的准备(详解)(连载)
第一步:因为我们没有UI提供的页面原图,所以我们需要自己在官网场面去截图,那么怎么截图呢? a: 用谷歌浏览器先打开冒险岛官网:http://mxd2.qq.com/main.htm b: 打开你想截图的网页,然后按下 F12(macOS 是 option + command + i)调出开发者工具,接着按「Ctrl + Shift + P」(macOS 是 command + Shift...原创 2018-08-08 19:46:00 · 877 阅读 · 0 评论 -
冒险岛2官网模拟具体教程之二头部的布局以及动态交互实现(详解)(连载)
冒险岛2静态页面展示: 冒险岛当鼠标移入时,页面展示: 需求: 1、当滚动条滚动到一定距离时,导航栏固定在页面的最上端 2、当鼠标移入对应的li标签时,下面的黄线就跟随到对应的li标签下面 3、当鼠标移入到导航栏的盒子上方,显示线面的下拉菜单,同时鼠标移入到下拉子菜单对应的li标签上时,相应的文字高亮 4、当鼠标移出导航栏或者下拉子菜单的时候,下拉子菜单隐藏布局设置: ...原创 2018-08-13 00:40:31 · 659 阅读 · 0 评论 -
冒险岛2官网模拟之三单击登录弹出登陆框的具体实现(连载)
登录框的设计的样式以及结构思路在样式中需要设置登录的unlogin盒子,以及登录框login-web盒子,最后写一个全局的cover-bg来做遮罩层.但是设置样式的时候将cover-bg设置为定位这样就可以让其脱标,不会影响页面的内容,同时也要将登录框的盒子设置为定位属性,但是它的层级一定比cover-bg的层级高,这样就可以让遮罩层显示在下面,登录框在上面的样式.HTML+CSS...原创 2018-08-14 17:38:27 · 418 阅读 · 0 评论 -
冒险岛2官网模拟之四自动轮播图(连载)
在官网的的轮播图: 具体的需求: 1、轮播图每间隔7秒滚动一次 2、每一次滚动下面的滚动条的样式发生相应的变化 3、有两个点击事件(官方/合作)点击之后切换到不同的轮播图;图中展示的官方对应的轮播图,切换到合作的时候也会出现与之对应的轮播图展示页HTML代码:<!DOCTYPE html>&amp原创 2018-08-16 00:24:37 · 382 阅读 · 0 评论