![](https://img-blog.csdnimg.cn/20190927151053287.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端作品大集合
文章平均质量分 81
一切平时心血来潮的demo
梦境工程师-335
啥都会一点的六边形战士,我常在一个神秘的网络里接各种稀奇古怪的订单
展开
-
H5游戏开发:恶魔抽卡 (新)
文章目录开发环境需求游戏规则前端三步骤第一步:html+css第二步,现在开始写css代码,定义元素样式:第三步,现在开始写js代码,通过点击按钮改变卡牌和抽卡记录的数据:第四步,接下来写最后一步,也就是解决bugs今天我教大家如何开发一个简易的抽卡游戏开发环境需求(1)所使用的的编辑器: vscode(2)语言 : html + css + js它的名字叫做: 恶魔抽卡请原谅我是放荡不羁的恶魔,命运在于自己手中,一开始只是概率的问题游戏规则恶魔值的作用,恶魔值是你活在这个游戏世界原创 2020-10-24 21:54:54 · 966 阅读 · 0 评论 -
H5游戏开发:恶魔抽卡
今天我教大家如何开发一个简易的抽卡游戏它的名字叫做: 恶魔抽卡请原谅我是放荡不羁的恶魔,命运在于自己手中,只是一开始就是概率的问题。游戏规则:点击按钮后,开始从一组卡组中抽去卡牌,卡组中的卡牌是随机分布的,每次点击按钮后出一张卡牌并翻开正面向玩家展示,如果是厄运卡牌,玩家被淘汰;如果是好运卡牌,玩家继续抽卡,抽卡只有抽到机会卡才能拥有免遭一次淘汰的机会。如果成功抽完卡组中的卡牌,恭喜...原创 2020-10-24 19:22:04 · 718 阅读 · 0 评论 -
Web前端知识点复习(四十一个知识点·选择题大集合)
文章目录(一)web前端开发概述(二)网站与网页(三)Web前端开发技术(四) HTML概述(五)HTML文件结构(六)HTML标签(I)(七)HTML标签(II)(八) HTML标签(III)(九)HTML标签(IV)(十)HTML标签(V)(十一)CSS概述(十二)CSS添加方法(十三)CSS选择器(十四) CSS样式(I) 文字样式(十五)CSS样式(II) 背景,超链接样式(十六)CSS样式(III) 列表,表格样式(十七)布局与定位概述(十八)盒子模型(I)(十九)盒子模型(II)(十九)CSS定原创 2020-06-22 00:05:59 · 2751 阅读 · 2 评论 -
用JQ+AJAX+PHP+Mysql做简单的用户注册功能
文章目录当前数据库是空的初始化数据库及自动建表的方法,在apache服务器环境下运行initDataBases.php文件动态结果演示插入后的结果原创 2020-05-29 17:48:53 · 1692 阅读 · 0 评论 -
全国省份地域的三级联动菜单联动 (Jquery版)
效果图如下所示 >>>代码如下 >>>原创 2020-05-20 21:05:24 · 1233 阅读 · 0 评论 -
Kok-ui 官方文档网页模板 【第一版】
文章目录采用技术 >>>PC端截图 >>>移动端截图 >>>移动端动态演示 >>>kok-ui 模板主要用于一些简单的文本信息展示,是一个自适应动效网页模板 , 能够在移动端和PC端使用采用技术 >>>采用前端框架: Jquery + Layui动画采用 : CSS3PC端截图 >>>移动端截图 >>>移动端动态演示 >>># 关原创 2020-05-17 18:43:03 · 1869 阅读 · 0 评论 -
用JS的‘ if...else ’做【网站登录的用户表单验证】
文章目录提出问题解决思路(1)按照正常的逻辑,先写一些html标签(2)然后用点CSS优化下表单,让其变得好看一点(3)写JS代码的逻辑index.html 文件代码 (复制粘贴即可运行)为了减少服务器负载,将表单计算验证缓解在客户浏览器上执行,验证完成基本的格式后,再提交给服务器进行数据处理,那么,前端如何用JS做网站登录的用户表单验证 ?提出问题制作一个表单,前三个文本框不为空,且长度...原创 2020-04-27 14:00:27 · 2134 阅读 · 0 评论 -
前端电商项目实战,如何从 0 开始创造一个【考拉海购官网】?( 共6节教程 )
文章目录声明:本次开发仅针对考拉海购的官网首页进行前端UI开发教程目录从0开始做一个【考拉海购网站】声明:本次开发仅针对考拉海购的官网首页进行前端UI开发我写了6篇教程,代码中有大量注释,尽可能地去解释因果,只愿阅读教程的你能够学到一些知识,关于本次开发的还原度,因为一些细节比较费时间,之后我会将更多的经历投入到h5的游戏开发或者其他demo开发中,所以还原度会有些差距,我们来看两组图 :...原创 2020-04-22 20:34:39 · 9213 阅读 · 2 评论 -
电商项目实战第六节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【页底信息,网站备案信息】
上一节:电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】文章目录电商项目实战第六节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【页底官方相关】第一步,分析布局第二步,根据布局写html标签index.html文件代码第三步,写CSS样式优化htmlindex.css文件代码电商项目实战第六节: CSS3+HTML5+JS 设计案例【考拉...原创 2020-04-22 16:48:55 · 4239 阅读 · 1 评论 -
电商项目实战第五节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【商品栏及右侧垂直导航】
112原创 2020-04-22 02:00:51 · 7796 阅读 · 4 评论 -
电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】
文章目录【考拉海购网站】之【轮播图特效】第一步,根据页面布局写相应的html标签index.html文件代码第二步,美化轮播图小组件样式index.css文件代码第三步,轮播图原理自动切图轮播图原理(初阶版)初阶版轮播图运行效果一览按钮操控轮播图的原理 (进阶版)进阶版轮播图运行效果一览第四步,完成index.js文件代码【考拉海购网站】之【轮播图特效】轮播图特效如图所示 >>&g...原创 2020-04-20 03:11:34 · 4591 阅读 · 2 评论 -
电商项目实战第三节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【分类导航栏】
文章目录【考拉海购网站】之【分类导航栏】第一步,分析页面布局第二步,写需要的html标签【考拉海购网站】之【分类导航栏】之前我们做了顶部导航和搜索框的部分,这一篇我来讲解如何制作分类导航部分第一步,分析页面布局总共4个主要的部分: 1,横向分类导航栏 2,垂直分类导航栏(二级下拉菜单) 3,三级菜单内容 &...原创 2020-04-19 19:34:06 · 6927 阅读 · 0 评论 -
电商项目实战第二节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【搜索框那一栏】
文章目录一,作战情况分析一,作战情况分析这是作战具体情况:(1) 左边一个劳拉网的logo图案,中间一个圆角边的input输入框,右边一个圆角的购物车input提交框按钮(2)至于那些图案呢,直接去steal他们网站的了,好,整个情报就是这样接上一篇文章的代码后面开始写...原创 2020-04-18 18:15:59 · 5005 阅读 · 0 评论 -
电商项目实战第一节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【顶部导航】
文章目录【考拉海购网站】之【顶部导航】第一步,分析布局第二步,建立基本的文本目录及文件第三步,根据第一步对导航栏的分析,在html代码里面补全需要的标签【考拉海购网站】之【顶部导航】第一步,分析布局分析完布局后,我们开始逐行解决第二步,建立基本的文本目录及文件index.html文件里面的代码基本结构是这样的(这个结构是H5标准的,在vscode编辑器里面输入html:5 后按下回车...原创 2020-04-18 00:43:05 · 5971 阅读 · 0 评论 -
H5知识之多媒体操作 (附召唤御姐demo)
召唤御姐演示:文章目录html5结构元素Html5功能元素召唤御姐的小demo (复制粘贴即可用):Html5表单元素要实现单选就设置相同的name值input新属性:Audio/Video元素基本属性如何动态创建播放器?浏览器支持情况如何知道资源链接?音乐控件中如何加减音量?如何控制播放器播放速度?如何暂停播放器?html5结构元素1,header整个页面的头部,某块区域的标题,页眉。...原创 2020-04-15 23:49:26 · 1472 阅读 · 0 评论 -
HTML+CSS3一分钟写简单的瀑布流布局
CSS3 弹性盒( Flexible Box 或 flexbox)是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。我们就用两个元素解决排列问题:display:flex;和 flex:1;flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。1...原创 2020-04-15 20:20:28 · 1907 阅读 · 0 评论 -
md5加密小工具制作(js版)
废话不多说,上图上代码:页面布局代码:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...原创 2020-04-14 22:22:40 · 998 阅读 · 0 评论 -
h5游戏开发:用html+css+js写一个整蛊游戏
还记得那个一拳打穿显示器的胖子吗?我来做一个简单的整蛊游戏吧!既然是整蛊游戏,我们名字就不要起得太明显,根据潘多拉魔盒效应,为了诱导玩家进入我们的陷阱,就取名为:千万别走到终点!!!玩法设定:有玩家看到这个标题可能第一反应是什么恐怖游戏,或者有奇怪的东西在终点等着他,为了消除这种顾虑,我们将游戏设定改一下,设计为通过摇骰子的方式决定玩家走的步数,而不是玩家自己走。这样我们就拥有进一步控...原创 2020-04-13 14:31:48 · 7421 阅读 · 5 评论 -
用CSS设计三角形图标
实现后如下图所示这个设计的原理很简单:1,就是给一个块级标签的宽和高都设置为0,如果你要用行级标签,先设置行级标签的display为block后,就可以设置宽和高都为0。(本次演示使用i标签)i{display:block;}2,接下来是设置border边框,设置border边框具有一定的宽度,这样就能依靠边框自己膨胀成一个矩形的模样i{ display:bloc...原创 2020-04-11 23:50:57 · 1009 阅读 · 0 评论 -
用CSS3写出星际穿梭的效果(改变穿梭粒子内容可得B站弹幕效果)
用css3写星际穿梭我这里用到动画属性@keyframes 与 animation先来看下html结构:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...原创 2020-04-13 17:10:33 · 4472 阅读 · 0 评论 -
用CSS实现聊天对话框小三角效果
今天我教大家如何用css设计对话框的尖角效果。对话框的结构:1,左边的矩形和右边的三角形。第一步,实现右边的三角形》<!DOCTYPE html><html><head><meta charset="utf-8"> <style> div{ display:block; width...原创 2020-04-14 13:45:49 · 2477 阅读 · 0 评论 -
用css3的过渡动画效果简单做星空转换的效果
有时候,css3的过渡动画效果比js的计时器控制要好用,因为你不用去设计计时器,利用css3的过渡可以让元素很流畅的播放,接下来,我简单介绍一下一些css3的过渡属性并且用他们做一些星空转换的demo。第一,知识讲解》》》CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。css3的部分属性及描述transition 》》》简写属性,用于在一个属性中设置四个过渡属性。transitio...原创 2020-04-13 12:48:27 · 1605 阅读 · 0 评论 -
谷歌(chrome)恐龙小游戏外挂
你是不是也遇到过上面这种情况?然后按下空格键就可以开始游戏然而,每次游戏失败都会从原点开始,速度放慢再来,那么,有没有什么方法可以让我们不再从原速度开始呢?有,在线开挂谷歌这款掉线后出现的小游戏的代码是由前端js写成的,其编程思想以对象为主,我们主要找这个文件:往下找,直到这几行代码:无视障碍物,刷分可以刷到爆:那就在控制台输入这条语句>Runner.instance...原创 2020-04-15 13:45:06 · 16332 阅读 · 0 评论