2020年07月_书和咖啡

原创 Less 转义

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

2020-07-27 09:58:56 569 1

原创 Less 运算

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

2020-07-23 09:46:15 534

原创 Less 作用域

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

2020-07-20 09:45:23 722

原创 Less 变量

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

2020-07-17 09:57:18 378

原创 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 658

原创 Less 安装

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

2020-07-13 10:01:49 1660 2

原创 HTML5 拖放

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

2020-07-08 10:33:07 128

原创 HTML5 视频和音频的常用方法

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

2020-07-06 09:59:24 426

原创 HTML5 向网页嵌入视频和音频

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

2020-07-02 09:52:56 5474 1

ivenqin的博客