前端重拾
关注
分享
扫一扫
文章平均质量分 82
丨Anna丨
这个作者很懒，什么都没留下…
展开
-
预处理器Less
预处理器Less1什么是预处理器less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。less的中文官网：http://lesscss.cn/bootstrap中less教程：http://www.bootcss.com/p/lesscss/2Less编译工具koala 官网:www.koala-app.com...原创 2021-05-17 19:56:11 · 398 阅读 · 0 评论 -
39 javaScript创建对象的方式
39 javaScript创建对象的方式1使用json方式创建对象 通过json创建对象，对象有自己的属性（年龄、姓名、性别等）和行为（吃饭、睡觉、走路、讲课等）。 推荐使用的场合： 作为函数的参数，临时只用一次的场景。比如设置函数原型对象。 缺点： 不能作为对象创建的模板，也就是不能用new进行构造新对象。// 定义var obj = {};var obj2 = { name: 'laoma', age: 18, sayHi: ...原创 2020-10-30 17:47:07 · 224 阅读 · 0 评论 -
38 canvas签名
38 canvas签名示例 <head> <meta charset="UTF-8"> <title>26_事件</title> <style> #test{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #BBAAFF; }原创 2020-10-29 17:45:10 · 244 阅读 · 0 评论 -
37 canvas导出为图像及事件操作
37 canvas导出为图像及事件操作1 canvas导出为图像语法toDataURL()注意是canvas元素接口上的方法，返回一个BASE64的图片信息示例 <head> <meta charset="UTF-8"> <title>25_导出为图像</title> <style> #test{ position: absolute; left: 0; right: 0; .原创 2020-10-29 17:12:03 · 304 阅读 · 0 评论 -
36 canvas全局透明度&覆盖合成
36 canvas全局透明度&覆盖合成1 全局透明度语法globalAlpha = value 这个属性影响到 canvas 里所有图形的透明度， 有效的值范围是 0.0 （完全透明）到 1.0（完全不透明） 默认是 1.0示例 <head> <meta charset="UTF-8"> <title>23_全局透明度</title> <style> #test{ positio原创 2020-10-29 16:49:52 · 468 阅读 · 0 评论 -
35 像素操作
35 像素操作 我们可以直接通过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中语法得到场景像素数据 getImageData():获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据 ctx.getImageData(sx, sy, sw, sh) sx:将要被提取的图像数据矩形区域的左上角 x 坐标。 sy:将要被提取的图像数据矩形区域的左上角 y 坐标。 sw:将要被提取的图像数据矩形区域的宽度。 sh:将要被..原创 2020-10-29 16:20:34 · 636 阅读 · 0 评论 -
34 canvas阴影
34 canvas阴影canvas阴影包括文本阴影和盒模型阴影语法shadowOffsetX = float shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离， 它们默认都为 0。 shadowOffsetY = float shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离， 它们默认都为 0。 shadowBlur = float shadowBlur 用于设定阴影原创 2020-10-29 15:49:50 · 778 阅读 · 0 评论 -
33 canvas绘制文本
33 canvas绘制文本1绘制文本语法canvas 提供了两种方法来渲染文本: fillText(text, x, y) 在指定的(x,y)位置填充指定的文本 strokeText(text, x, y) 在指定的(x,y)位置绘制文本边框示例 <head> <meta charset="UTF-8"> <title>18_绘制文本</title> <style> #test{ .原创 2020-10-29 15:27:09 · 432 阅读 · 0 评论 -
32 canvas渐变
31 canvas渐变1线性渐变语法 canvas渐变（线性渐变） createLinearGradient(x1, y1, x2, y2) 表示渐变的起点 (x1,y1) 与终点 (x2,y2) gradient.addColorStop(position, color) gradient :createLinearGradient的返回值 addColorStop 方法接受 2 个参数， position 参数必须是一个 0.0 与 .原创 2020-10-29 14:41:45 · 237 阅读 · 0 评论 -
31 canvas使用图片及设置背景
31 canvas使用图片及设置背景1使用图片在canvas中插入图片(需要image对象) 1.canvas操作图片时，必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。 这个方法多了2个参数：width 和 height，这两个参数用来控制 当像canvas画入时应该缩放的大小在canvas中设置背景(需要.原创 2020-10-29 14:30:48 · 14006 阅读 · 0 评论 -
30 canvas中的变换
29 canvas中的变换语法 translate(x, y) 我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。 translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量， 在canvas中translate是累加的 rotate(angle) 这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。 旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 transla原创 2020-10-29 12:09:00 · 226 阅读 · 0 评论 -
29 canvas贝塞尔曲线
29 canvas贝塞尔曲线1二次贝塞尔曲线语法quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。 起始点为moveto时指定的点解析示例 <head> <meta charset="UTF-8"> <title>07_绘制圆弧</title> <style> #test{ position: .原创 2020-10-29 11:16:50 · 192 阅读 · 0 评论 -
28 绘制圆弧
28 绘制圆弧1 角度与弧度的js表达式radians=(Math.PI/180)*degrees2arc语法 arc(x, y, radius, startAngle, endAngle, anticlockwise) 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束， 按照anticlockwise给定的方向（默认为顺时针）来生成。 ture：逆时针 false:顺时针 x,y为.原创 2020-10-29 10:59:15 · 624 阅读 · 0 评论 -
27 canvas绘制路径
27 canvas绘制路径 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。1canvas绘制路径步骤 1.首先，你需要创建路径起始点。 2.然后你使用画图命令去画出路径 3.之后你把路径封闭。 4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。2绘制三角形API beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。 ...原创 2020-10-29 10:23:06 · 654 阅读 · 0 评论 -
26 canvas绘制矩形
26 canvas绘制矩形1绘制矩形方法语法 canvas提供了三种方法绘制矩形： ---->绘制一个填充的矩形（填充色默认为黑色） fillRect(x, y, width, height) ---->绘制一个矩形的边框（默认边框为:一像素实心黑色） strokeRect(x, y, width, height) ---->清除指定矩形区域，让清除部分完全透明。 clearRect(x, y, width, height) x与y.原创 2020-10-28 22:22:43 · 5732 阅读 · 0 评论 -
25 canvas基本使用
25 canvas基本使用1什么是canvas(画布)<canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形例如，它可以用于绘制图形，创建动画。<canvas> 最早由Apple引入WebKit我们可以使用<canvas>标签来定义一个canvas元素----->使用<canvas>标签时，建议要成对出现，不要使用闭合的形式。...原创 2020-10-28 16:11:01 · 256 阅读 · 0 评论 -
24 H5内容可否编辑contenteditable属性
24 H5内容可否编辑contenteditable属性语法contenteditable="true"示例<head> <meta charset="UTF-8"> <title>04_H5内容可否编辑contenteditable属性</title> <style> .warp{ position: absolute; top: 0; bottom: 0; left: 0;原创 2020-10-28 14:13:10 · 196 阅读 · 0 评论 -
23 H5自定义属性属性值操作
23 H5自定义属性属性值操作 H5每一个预定义attribute属性都有一个对应的property属性与之对应。但是自定义属性没有。因此H5提供一个自定义属性属性值的property的操作。语法自定义的数据属性名称是以data- 开头的.它必须要遵循XML名称的产生规则规则，该规则是说它只可以包含字母，数字和下面的字符：Dash(-)，点(.)，冒号(:)，下划线(_).此外不应包含ASCII码大写字母Eg:<div id="test" data-test="test1" d..原创 2020-10-28 12:08:23 · 408 阅读 · 0 评论 -
22 H5原生JS获取元素class属性值及操作
22 H5原生JS获取元素class属性值及操作 前面说到每一个预定义属性都有一个property与之对应。因为class是关键字因此attribute对应的property名称为className,通过className我们可以获取到元素class的属性值。1获取class的属性值示例 <head> <meta charset="UTF-8"> <title>01_H5原生JS获取元素class属性值及操作</title>...原创 2020-10-28 11:37:05 · 9438 阅读 · 0 评论 -
21 attr与prop
21 attr于prop1 attribute于property是什么1.1什么是attributeattribute:是html预定义属性和html自定义属性的统称Eg:<input type="checkbox" name="sex" mark="自定义属性mark的值" age="自定义属性age的值"/>如上type和name是预定义属性，mark和age属于自定义属性1.2 attribute的监控示例 <head> <met..原创 2020-10-27 23:14:41 · 232 阅读 · 0 评论 -
20 动画
20 动画人类具有视觉暂留的特性，人的眼睛在看到一幅画或一个物体后，在0.34秒内不会消失。动画原理： 通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，在一幅画还没有消失前，播放下一幅画。就会给人造成一种流畅的视觉变化效果。css3动画 使元素从一种样式逐渐变化为另一种样式的效果。1基本API系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的...原创 2020-10-23 17:57:39 · 200 阅读 · 0 评论 -
19 3D变换
19 3D变换1浏览器中的坐标系 在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外2基本API2.1景深作用让3D场景有近大远小的效果。是一个不可继承属性，但它可以作用于后代元素（不是作用于本身的）语法transform: perspective(depth);depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值 注意：若使用perspective()函数，那么他必须被放...原创 2020-10-22 23:46:59 · 220 阅读 · 0 评论 -
18 过渡
过渡 众所周知，css效率极高，其变化的过程往往都是在一瞬间完成，速度极快。 CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。1 过渡属性transition1.1 transition transi...原创 2020-09-21 22:44:49 · 215 阅读 · 0 评论 -
17 CSS渐变及简单特效
CSS渐变 渐变是图片，不是颜色。CSS中渐变分为，线性渐变和径向渐变两种。1线性渐变 为了创建一个线性渐变，需要设置一个起始点和一个方向（指定为一个角度）。还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。语法：/*默认从上到下发生渐变*/background-image:linear-gradient(red,blue); /*改变渐变方向：（top bottom left righ...原创 2020-09-03 22:40:07 · 416 阅读 · 0 评论 -
16 CSS圆角
CSS圆角传统的圆角生成方案，必须使用多张图片作为背景图案CSS3圆角的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点： * 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。 * 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。 * 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况border-radius用来设置边框...原创 2020-09-02 21:38:27 · 401 阅读 · 0 评论 -
15 CSS调整大小resize及box-sizing
CSS调整大小resizeresize CSS 属性允许你控制一个元素的可调整大小性。（一定要配合overflow：auto使用）默认值：none 不可继承值： none 元素不能被用户缩放。 both 允许用户在水平和垂直方向上调整元素的大小。 horizontal允许用户在水平方向上调整元素的大小。 vertical 允许用户在垂直方向上调整元素的大小。示例： <head> &l...原创 2020-09-02 21:28:26 · 849 阅读 · 0 评论 -
14 盒模型阴影box-shadow
盒模型阴影box-shadowbox-shadow 以逗号分割列表来描述一个或多个阴影效果，可以用到几乎任何元素上。 如果元素同时设置了 border-radius ，阴影也会有圆角效果。多个阴影时和多个 text shadows 规则相同(第一个阴影在最上面)。默认值: none 不可继承值： inset 默认阴影在边框外。 使用inset后，阴影在边框内。 <offset-x> <offset-y>...原创 2020-09-01 22:54:00 · 256 阅读 · 0 评论 -
13 溢出显示省略号
溢出显示省略号实现方式使用text-overflow :确定如何向用户发出未显示的溢出内容信号。 它可以被剪切， 显示一个省略号（'...'）实现条件 （1）设置属性white-space: nowrap; （2）设置属性overflow: hidden; （3）设置属性text-overflow: ellipsis; （4）文字包裹元素必须是块元素，不能被子元素撑开示例: <he...原创 2020-09-01 22:42:59 · 140 阅读 · 0 评论 -
12 文字阴影text-shadow
文字阴影text-shadow text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边）默认值：none 不可继承值 <color> 可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）选择的颜色。 <offset-x> <offset-y> 必选。这些长度值指定阴影相对文字的偏移量。 <off...原创 2020-09-01 22:17:23 · 752 阅读 · 0 评论 -
11 自定义字体及字体图标
1 自定义字体@font-face:允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，可以消除对用户电脑字体的依赖 @font-face { font-family:"damu"; src: url(damu/GOUDYSTO.TTF);} font-family 所指定的字体名字将会被用于font或font-family属性 src 字体资源注意:不能在一个 CSS 选择器中...原创 2020-08-31 19:04:53 · 352 阅读 · 0 评论 -
10 压缩CSS代码
压缩CSS代码压缩CSS代码的方式很多，可以使用在线工具，也可以使用jsCssZip.exe进行压缩原创 2020-08-31 17:51:23 · 196 阅读 · 0 评论 -
9 CSS hack
CSS hack1 条件hack 条件hack只针对IE浏览器有效，其他浏览器都会将它识别为注释。IE10及其以上已经不支持这种方式 <!--[if IE 6]> <p>IE 6 显示内容</p> <![endif]--> <!--[if lt IE 9]> <p>IE 9以下浏览器显示内容</p> <![endif]--> <!--[if lte IE 9]>...原创 2020-08-31 17:27:52 · 504 阅读 · 0 评论 -
8 HTML表格
1HTML表格1.1 表格 在Web的历史中，HTML的表格发挥了极大的作用。最初创建表格就是为了以表格的形式显示数据，后来表格变成了一个极受欢迎的布局工具。 但是有了CSS以后，CSS在布局网页方面实际上会更出色，所以现在我们使用表格的作用只有一个，就是用来表示格式化的数据。 HTML中的表格可以很复杂，但是通常情况下我们不需要创建过于复杂的表格。1.2 表格的创建标签：table、tr、th、td 使用table标签创建一个表格。 tr表示表格...原创 2020-08-31 15:19:32 · 119 阅读 · 0 评论 -
7 设置元素的背景及雪碧（精灵）图使用
1 设置元素的背景1.1背景颜色background-color background-color属性用来为元素设置背景颜色。需要指定一个颜色值，当指定了一个颜色以后，整个元素的可见区域都会使用这个颜色作为背景色。如果不设置背景颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色。background-color: red;1.2背景图片background-image background-image可以为元素指定背景图片和background-color类...原创 2020-08-31 12:02:52 · 457 阅读 · 0 评论 -
6 opacity设置元素的透明背景
opacity设置元素的透明背景 opacity可以用来设置元素的透明的背景，他需要一个0-1之间的值。0表示完全透明，1表示完全不透明语法：opacity: 0.5;注意:opacity在IE8及其以下属性不支持。可以使用如下属性进行代替语法：filter: alpha(opacity=透明度)透明度需要0-100的值，0表示完全透明，100完全不透明...原创 2020-08-31 10:49:36 · 319 阅读 · 0 评论 -
5 定位
定位1什么是定位 将指定元素摆放在页面中的任意位置。 position属性可以控制Web浏览器如何以及在何处显示特定的元素。可以使用position属性把一个元素放置到网页中的任何位置。 可选值： – static 默认值，元素没有开启定位 – relative 相对对位 （1）当开启相对定位，不设置偏移量时，元素不会发生任何变化。 （2）相对对位是相对...原创 2020-08-31 10:41:56 · 276 阅读 · 0 评论 -
5 高度塌陷问题及解决办法
高度塌陷问题及解决办法1什么是高度塌陷 在文档流中，父元素的默认高度是被子元素撑开的，也就是父元素未在指定高度时，父元素的高度表现为子元素的占用的高度。此时，当子元素浮动，脱离文档流后将会导致父元素高度塌陷。示例：子元素未脱离文档流的情况 <head> <meta charset="UTF-8"> <title>高度塌陷问题</title> <style type="text/css"> .box1{ ...原创 2020-08-29 18:01:16 · 246 阅读 · 0 评论 -
4 盒子模型
盒子模型 在网页中“一切皆是盒子”。CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。1 盒子模型的组成 一个盒子我们会分成几个部分： – 内容区(content) （1） 内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。 （2） 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。...原创 2020-08-29 12:03:55 · 317 阅读 · 0 评论 -
3 文本标签及样式
文本标签及样式1文本标签1.1<em>和<strong> em标签用于表示一段内容中的着重点。strong标签用于表示一个内容的重要性。这两个标签可以单独使用，也可以一起使用。通常em显示为斜体，而strong显示为粗体示例： <em>和<strong> <hr/> <p> <strong>警告：任何情况下不要接近僵尸。</strong&g...原创 2020-08-28 15:49:10 · 470 阅读 · 0 评论 -
2 CSS样式的继承及选择器的优先级
CSS样式的继承1什么是元素的继承 后代元素可以继承祖先元素的一些基本样式示例： <head> <meta charset="UTF-8"> <title>CSS样式的继承</title> <style type="text/css"> p{ color: #BBAAFF; font-size: 24px; } </style> </head> &..原创 2020-08-12 14:23:30 · 325 阅读 · 0 评论