9 书和咖啡

尚未进行身份认证

我要认证

学习python的小侠客

等级
TA的排名 3w+

Less 混合

本节我们学习 Less 中的混合(Mixin),混合是一种将一组属性从一个规则集包含或混入到另一个规则集的方法。简单一点来说,其实混合就有点类似编程语言中的函数,通过这种方式,可以在代码中实现复用。如果还不懂,下面我们通过实际例子来看一下混合的使用。普通Mixins我们先来看下面这段 Less 代码:.xkd{ font-size: 14px; color: #ccc;}.good{ font-size: 14px; color: #ccc; padding: 10px;}

2020-08-05 13:57:51

Less 转义

本节我们学习 Less 语言中的转义(Escaping),什么是转义呢?某些时候,当需要引入无效的 CSS 语法或 Less 不能识别的字符,就需要使用转义字符。Less 中的转义字符就是在字符串前面加上一个 ~ 符号,并将需要转义的字符串放在 "" 或 '' 中,例如 ~"xkd"。转义允许你使用任意字符串作为属性或变量值。转义的使用一般情况下我们是不需要用到转义的,只有在代码不能被正常编译的情况下,才需要使用转义。下面我们来举一个例子说明一下。示例:例如 border-radius 属性,在

2020-07-27 09:58:56

Less 运算

Less 语言中支持运算,我们可以给变量进行一些运算操作,例如加 +、 减 -、乘 *、除 / 四个运算符,这四个运算符可以对任何数字、颜色或变量进行运算。一般运算符在进行加、减计算之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。运算的使用运算的使用其实很简单,就是对属性值或变量进行一些加减乘除运算。示例:我们来看下面这段 HTML代码:<!DOCTYPE html><html> <head>

2020-07-23 09:46:15

Less 作用域

本节我们学习 Less 中的作用域,作用域其实可以理解为可以被访问的区域。Less 语言中变量的作用域和其他编程语言中的很类似,首先会先从本地范围查找,如果没有找到,编译器会从父范围查找,向上一层一层找,直到找到为止。变量的作用域我们来看一下关于变量的作用域,下面是用于测试的 HTML 代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title

2020-07-20 09:45:23

Less 变量

本节我们来学习 Less 中的变量,很多编程语言中都有变量这个概念,而不同的语言中定义变量的方式也不一样。例如在 JavaScript 中可以通过 var 关键字定义变量。变量表示可以改变的值, Less 中的变量可以帮助我们为重复定义的样式类或者属性值起一个别名。这是什么意思呢,看下面这个例子。示例:例如在 CSS 代码中,某个颜色值 #f93d66 在多个地方被使用:.xkd{ border: 1px solid #f93d66;}.xkd h3{ background-color:

2020-07-17 09:57:18

Less 嵌套

本节我们学习 Less 中的嵌套,嵌套应该很容易理解,HTML 语言中就支持标签的嵌套。我们在使用 CSS 时,如果想要为多层嵌套的元素设置样式,要么给元素加上一个类选择器或ID选择器,要么使用后代选择器。例如:.xkd{ font-size: 14px;}.xkd p{ line-height: 25px;}.xkd p span{ color: #ccc;}这样写虽然也好理解,但是没有那么直观,维护起来也不方便。而 Less 中的嵌套规则正好可以解决这样问题,嵌套规则允许在

2020-07-15 09:47:41

Less 安装

本节我们学习 Less 的安装,Less 的官方地址为:<http://lesscss.org/。在官网首页,有告诉我们 Less 的两种安装方式,如下所示:直接引用通过 NPM 安装直接引用我们先来看直接引用,这个很简单,就是直接在 HTML 页面引入创建好的 Less 文件即可。在引入之前,我们需要创建一个 Less 文件,Less 文件的后缀名为 .less,所以我们可以将文件命名为 index.less。然后我们就可以通过 <link> 标签向 H

2020-07-13 10:01:49

HTML5 拖放

本节我们学习 HTML5 中的拖放,拖放是一种常见的特性,也就是抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。拖放事件拖放是由拖动与释放两部分组成,拖放事件也分为被拖动元素的相关事件,和容器的相关事件。被拖动元素的相关事件如下所示:事件描述ondragstart用户开始拖动元素时触发ondrag元素正在拖动时触发ondragend用户完成元素拖动后触发容器相关事件如下所示:事件描述ondrag

2020-07-08 10:33:07

HTML5 视频和音频的常用方法

HTML5 中为视频 video 和音频 audio 元素,提供了属性、方法和事件。这两个元素的常用属性上一节我们已经讲过了,本节我们来讲一下这两个元素的方法。视频和音频的常用方法HTML5 中为 video 元素 和 audio 元素提供了一些方法,这些方法可以用于操作 video 元素和 audio 元素,下面我们来看一下:方法描述paly()开始播放音频、视频pause()暂停当前播放的音频、视频load()重新加载音频、视频元素addTextTrac

2020-07-06 09:59:24

HTML5 向网页嵌入视频和音频

现在很多网站上都会使用到视频和音频,HTML5 中提供了展示视频和音频的标签。向网页嵌入视频可以使用 <video> 标签,而嵌入音频可以使用 <audio> 标签。这两个标签都是 HTML 5 中新增的标签,两个标签中的属性和方法也很类似,但也有些不同。其中 audio 元素用于定义声音,比如音乐, video 元素用于定义视频,如电影等。向网页中嵌入视频<video> 标签可以用于定义视频,且提供了播放、暂停、音量控件来控制视频。举个例子,像我们侠课岛网站上,课

2020-07-02 09:52:56

HTML5 给图形绘制阴影

在 HTML5 中,我们除了上一节讲过的可以对图形设置平移、旋转、缩放,还可以给图形添加阴影效果。添加阴影的时候只需要利用图形上下文对象的几个关于阴影绘制的属性就可以实现啦。图形阴影绘制的属性属性描述shadowOffsetX阴影的横向位移量shadowOffsetY阴影的纵向位移量shadowBlur阴影的模糊范围shadowColor阴影的颜色shadowOffsetX 属性和 shadowOffsetY 属性分别用于设置阴影在 X 轴和 Y 轴的

2020-06-30 09:57:34

HTML5 Canvas属性和方法

上一节我们已经学会了如何创建 Canvas 画布,本节我们来学习有关于 Canvas 中的属性和方法的使用,通过这些属性和方法,我们可以绘制各种图形,例如线条、矩形、圆形、多边形等等。Canvas坐标上一节我们已经学习了如何创建画布,而要在画布上绘制图形首先我们得弄清楚画布中的坐标关系。Canvas画布中的左上角坐标为 (0,0) ,画布的 x 和 y 轴用于在画布上对绘画进行定位。如下图所示:绘制线条我们可以通过下面属性和方法来在 Canvas 画布中绘制线条:beginPath():用

2020-06-28 09:56:38

HTML5 如何创建Canvas画布

本节我们来学习如何创建 Canvas 画布。 <canvas> 标签是 HTML5 中新增的标签,通过使用 JavaScript 中的脚本来绘制图形。在页面上放置一个 canvas 元素,就相当于在页面上放置了一块画布,canvas 元素拥有多种绘制矩形、圆形、字符、路径以及添加图像的方法。但是我们并不是使用鼠标在画布中画画的哟,其实 <canvas> 标签本身没有绘制图形的能力,它只是一个图形容器,要想在这个容器中绘制图形,则必须使用 JavaScript 脚本来完成。创建画布

2020-06-24 10:19:30

JavaScript 中常见HTML事件

HTML 事件就是发生在 HTML 元素上的事情,可以是浏览器行为,也可以是用户行为。我们可以使用 JavaScript 触发这个事件。下面是常用的HTML事件:onclick:用户点击 HTML 元素。onchange:HTML 元素改变onload:浏览器已完成页面的加载。onmouseover:用户在一个HTML元素上移动鼠标。onmouseout:用户从一个HTML元素上移开鼠标。onkeydown:用户按下键盘按键。onclick事件onclick 即点击事件,会在元素被点击

2020-06-22 09:53:07

数组的方法

上一节我们讲了数组的语法和使用,以及数组的遍历等,本节我们主要学习一下数组的常用方法。数组常用方法sort():对数组的元素进行排序。reserse():反转数组的元素排序。join():将所有数组元素连接到一个字符串中。push():将一个新元素添加到数组中(最后位置)。pop():从数组中删除最后一个元素。shift(),删除第一个数组元素,并将所有其他元素移位到较低的索引。unshift():将新元素添加到数组中(在开始处),并取消旧元素。splice():用于向数组中添加新项目(

2020-06-19 09:49:16

数组的介绍及使用

JavaScript 中的数组常用于在单个变量中存储多个值。数组就是一组数据的集合,在内存中表现为一段连续的内存地址(保存在堆内存)。创建数组的目的就是为了保存更多的数据。数组概念和语法概念:数组是一个特殊变量,一次可以容纳多个值。特点:有顺序,有长度。作用:使用单独的变量名来存储一系列的值。语法如下所示:var array_name = [item, item2, item3, ...];其中 array_name 就是数组名,其实就是变量名,而数组中的元素全部是包围在中括号 [] 内,元

2020-06-17 09:48:09

break 和 continue语句

break 语句的使用break 语句可以用于跳出循环,可以用在 for 循环、while 循环、switch 循环中。当我们在一个循环中使用了break 语句,则会中断循环,但是仍会继续执行循环之后的代码哟。示例:例如下面代码实现了当循环条件小于5时,循环中断:<!DOCTYPE html><html><head><meta charset="utf-8"><title>JS_侠课岛(9xkd.com)</title>

2020-06-15 09:44:12

JavaScript中的while循环

在 JavaScript 语言中,当我们使用 while 循环时,只要指定条件为 true,循环就可以一直执行。并且只要条件一直满足,就可以实现一个无限循环,例如:while(true){ console.log("1");}执行这个循环,就会无止境的输出1。while 语法及其使用语法如下所示:while (condition) { // 要执行的代码块}condition 是循环的条件,只有当循环条件成立时,才会执行花括号 {} 中的代码,如果条件不成立则不会执行代

2020-06-12 10:06:30

JavaScript中的for循环

JavaScript 语言中的 for 循环用于多次执行代码块,它是 JavaScript 中最常用的一个循环工具,还可用于数组的遍历循环等。我们为什么要使用 for 循环呢?打个比方,例如我们想要控制台输出1到1000之间的所有数字,如果单写输出语句,要写1000句代码,但是如果使用 for 循环,几句代码就能实现。总之,使用 for 循环能够让我们写代码更方便快捷(当然啦,否则要它干嘛)。for 循环语法语法如下所示:for(变量初始化; 条件表达式; 变量更新) { // 条件表达式为tru

2020-06-10 09:58:16

JavaScript中的switch语句

JavaScript语言中的条件语句,除了if 语句,还有switch 语句。switch 常用于根据不同的条件执行不同的操作。虽然它和 if 语句都是用来判断条件的语句,但是它们之间还是有不同。switch的语法语法如下所示:switch(expression) { case 变量x: // 语句1代码块 case 变量y: // 语句2代码块 case 变量z: // 语句3代码块 break; default: // 代码块}语法解释:表达式值计算一次,然后我们依次将表达

2020-06-08 09:38:04

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 1024勋章
    1024勋章
    #1024程序员节#活动勋章,当日发布原创博客即可获得
  • 勤写标兵Lv3
    勤写标兵Lv3
    授予每个自然周发布7篇到8篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。