HTML学习笔记分享
瓜波牛排
这个作者很懒,什么都没留下…
展开
-
HTML小游戏设计(2)-扑克翻牌游戏
游戏介绍前言:终于开题结束了, 写个小游戏放松一下。【游戏玩法介绍】 有24张(两两相同)盖着的牌,玩家翻到两种相同的扑克牌则消去。如果规定的时间内,玩家没有消除所有的牌,则游戏失败。代码模块设计【一、扑克牌的翻转】上图是素材图(每个子图的高度为120px,宽度为80px),需要用CSS3技术实现分割显示为每张扑克牌。例-显示扑克牌的背面图案.font{ width: 80px; height: 120px; background-image: url("原创 2020-11-04 17:12:03 · 4923 阅读 · 6 评论 -
HTML小游戏设计(1)- 人物拼图游戏
游戏介绍:拼图游戏将一幅图片分隔成若干拼块并且随机打乱,需要移动拼块,最后还原图形。程序设计思路:HTML5可以把图片整合到网页中,使用canvas元素可以在这个空白的画布填充线条、载入图片和设置动画效果。游戏程序首先以正确顺序排列图片的缩略图,然后按照行列数将图片分成很多拼块,按照顺序编号;游戏开始时,随机打乱这个编号数组,玩家可以用鼠标点击拼块和空白块交换位置,当编号数组按照之前顺序,则游戏结束。程序代码,注释在code中(1)主界面<!doctype html><原创 2020-08-27 10:37:31 · 1362 阅读 · 1 评论 -
HTML学习笔记(9)-jQuery动画
jQuery动画包括显示和隐藏、渐入渐出、飞入飞出、自定义动画等。一、显示和隐藏HTML元素使用show()方法可以动画效果显示指定的HTML元素,只适用于jQuery隐藏的元素或在CSS中声明style=‘display:none’的元素,其语法如下:.show( [duration] [, easing ] [, comlete] )duraion是动画效果的运行时间,easing是不同动画点中动画速度的easing函数,complete是动画效果执行完后调用的函数.例:使用s.原创 2020-08-22 15:28:31 · 288 阅读 · 0 评论 -
HTML学习笔记(8)- jQuery基础
一、认识jQuery语法: jQuery是一个开源的、轻量级的JavaScript脚本库。它将一些工具方法或对象方法封装在 类 库中,提供了强大的功能函数和丰富的用户界面设计能力。 jQuery语法是为选取HTML元素而编制的,可以对元素执行某些操作,jQuery基本语法是: $(selector).action() 其中,$表示jQuery, selector表示相应HTML元素, action表示执行对元素的某种操作。 例如:$...原创 2020-08-19 23:19:39 · 249 阅读 · 0 评论 -
HTML5学习笔记(7)—CSS3动画入门
CSS3动画效果有变形(transform)、过渡变换(transition)和动画(animation)一、变形transform:rotate(旋转)、scale(缩放)、skew(倾斜)、translate(移动)、matrix(矩阵变形)// 旋转,顺时针旋转30度<html><head><style> div{ width:200px; height:100px; background-color:green; /* 旋转 div原创 2020-08-09 19:58:24 · 225 阅读 · 0 评论 -
HTML5学习笔记(6)CSS3-基础入门
CSS(Cascading StyleSheet)是层叠样式表,在网页制作时候采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景等效果实现更加精确地控制。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发作的。CSS的好处在于用户只需要一次性定义文字的显示样式,就可以在各个网页中统一使用了。 (百度的页面就是用CSS做的)1. CSS基本语句选择器{属性名:值;...原创 2020-08-07 10:20:18 · 339 阅读 · 0 评论 -
HTML5学习笔记(5)使用Canvas画图(下)— 绘制图像和文字
1. 绘制图像API是drawImage(), 常用语法是drawImage(image,x,y,width,height)例子1:不同形式显示一张图片<canvas id="myCanvas" height=1000 width=1000>您的浏览器不支持 canvas。</canvas><script type="text/javascript">function draw(){ var c=document.getElementById("m原创 2020-08-03 17:15:05 · 593 阅读 · 0 评论 -
HTML5学习笔记(4) 使用Canvas画图-上
Canvas就是画布,可以画任何的线、图形、填充等一系列的操作,有强大的绘图能力。一、Canvas元素<canvas id="xxx" height=...width=...>…</canvas>id是canvas的标识,height是canvas的高度,单位是像素Canvas中的坐标系<!DOCTYPE html><html><body><canvas id="myCanvas" height=...原创 2020-07-31 21:18:11 · 296 阅读 · 0 评论 -
view in browser插件使用
在sublime中编写HTML文件,要想直接在浏览器中看运行的效果,可以通过view in browser插件可以先点击Package Control,然后选择Install Package,输入view in browser,就可以自动安装了但是这款插件有点脾气,通过鼠标点击Tool中的view in browser没反应,必须通过快捷键才可以运行在按键绑定-用户中写入如下代码:[ { "keys": [ "ctrl+alt+v" ], "command": "open_in_br原创 2020-07-31 12:14:56 · 3146 阅读 · 1 评论 -
解决方法记录:Sublime 无法install package control
Sublime想通过install package安装插件,但是如下报错第一种方法尝试:下载的sublime会调用channel_v3.json文件,而这个文件的网址失效了。官方更新了一个更加简单的方法来添加channel文件,如下图,在Preferences -> Package Control -> Add Channel,在输入框可直接加入在线地址(https://erhan.in/channel_v3.json)试用后还是不行第二种方法尝试把Package .原创 2020-07-31 11:59:29 · 609 阅读 · 0 评论 -
HTML5学习笔记(3)JavaScript面向对象程序设计
面向对象对象编程(OPP)复习:类class的三个基本特点-封装、继承、多态(1)封装:将数据和操作捆绑在一起,定义一个新的class就是封装。(2)继承:一个类共享了一个或多个其他类定义的属性和行为。(3)多态:相同的函数名在不同子类中有不同的实现。一、定义class严格地说,JavaScript是基于对象的编程语言,而不是面向对象的编程语言。面向对象的编程语言(C++、JAVA等)声明一个类用class关键字,但是在JavaScript中,没有声明class的关键字,也没有办法对类的原创 2020-07-23 14:53:09 · 207 阅读 · 0 评论 -
HTML5学习笔记(2)—— JavaScript语法基础
JavaScript 简称JS,是一种可以嵌入到HTML页面中的脚本语言,HTML5提供的很多API都可以在JS中直接调用。JavaSript是一种解释型的编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户端由浏览器解释执行,而JAVA在发往客户端执行之前必须先经过编译。一、在HTML中使用JavaScript语言(1)第一种方式,把JS代码写到<Script Language = “JavaScript”> 和 </Scrip...原创 2020-07-23 00:23:57 · 333 阅读 · 0 评论 -
HTML5学习笔记(1)— 基础了解
HTML介绍Web应用程序使用Web文档(网页)来表现用户界面,而web文档都遵循标准HTML格式。HTML是HyperText Markup Language(超文本标记语言)的缩写,HTML5是目前最新的HTML标准,用它编写的文件扩展名通常是.html或.htm。HTML中包含很多HTML标记(标签Tag),它们可以被Web浏览器解释,从而决定网页的结构和显示的内容。这些标记通常是成对出现的,语法格式:<标记名>数据内容等</标记名>。HTML文档的基本结构:原创 2020-07-14 16:14:29 · 250 阅读 · 0 评论