webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add:数组的常见方法

Browse Source
This commit is contained in:
qianguyihao
2019-02-03 18:06:24 +08:00
parent d23d24fd29
commit 89f865611a
141 changed files with 797 additions and 1322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

890
07-HTML5和CSS3/01-HTML5详解.md Normal file
View File

@@ -0,0 +1,890 @@
> 本文最初发表于[博客园](https://www.cnblogs.com/smyhvae/p/8424230.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## HTML5的介绍
### Web 技术发展时间线
- 1991 HTML
- 1994 HTML2
- 1996 CSS1 + JavaScript
- 1997 HTML4
- 1998 CSS2
- 2000 XHTML1（严格的html）
- 2002 Tableless Web Design（表格布局）
- 2005 AJAX
- 2009 HTML5
- 2014 HTML5 Finalized
2002年的表格布局逐渐被淘汰，是因为：表格是用来承载数据的，并不是用来划分网页结构的。
2009年就已经推出了HTML5的草案，但直到2014年才有定稿，是因为有移动端的推动。
H5草案的前身是叫：Web Application，最早是由[WHATWG](https://baike.baidu.com/item/WHATWG/5803339?fr=aladdin)这个组织在2004年提出的。
2007年被 W3C 组织接纳，并在 2008-01-22 发布 HTML5 的第一个草案。
### 什么是 HTML5
HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它**制定了Web应用开发的一系列标准**，成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用。我们甚至可以结合 Canvas 开发网页版游戏。
**`HTML5`的广义概念**：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器的呈现技术得到了飞跃发展和广泛支持，它包括：HTML5、CSS3、Javascript API在内的一套技术组合。
`HTML5`不等于 `HTML next version`。`HTML5` 包含： `HTML`的升级版、`CSS`的升级版、`JavaScript API`的升级版。
**总结**：`HTML5`是新一代开发 **Web 富客户端**应用程序整体**解决方案**。包括：HTML5，CSS3，Javascript API在内的一套**技术组合**。
**富客户端**：具有很强的**交互性**和体验的客户端程序。比如说，浏览博客，是比较简单的客户端；一个在线听歌的网站、即时聊天网站就是富客户端。
**PS：**
单纯地从技术的角度讲，兼容性问题只会让开发者徒增烦恼。
如果网页端的程序能做到PC客户端的体验，就会对后者构成威胁。
### HTML5 的应用场景
列举几个HTML5 的应用场景：
（1）极具表现力的网页：内容简约而不简单。
（2）网页应用程序：
- 代替PC端的软件：iCloud、百度脑图、Office 365等。
- APP端的网页：淘宝、京东、美团等。
- 微信端：公众号、小程序等。
（3）混合式本地应用。
（4）简单的游戏。
### HTML5 新增的内容
![](http://img.smyhvae.com/20180206_1540.png)
![](http://img.smyhvae.com/20180206_1545.png)
![](http://img.smyhvae.com/20180206_1541.png)
## 语义化的标签
### 语义化的作用
语义标签对于我们并不陌生，如`<p>`表示一个段落、`<ul>`表示一个无序列表。**标签语义化的作用：**
- 能够便于开发者阅读和写出更优雅的代码。
- 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。
- 更好地搜索引擎优化。
总结：HTML的职责是描述一块内容是什么（或其意义），而不是它长什么样子；它的外观应该由CSS来决定。
### H5在语义上的改进
在此基础上，HTML5 增加了大量有意义的语义标签，更有利于搜索引擎或辅助设备理解 HTML 页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。
我们常见的 css+div 布局是：
![](http://img.smyhvae.com/20180206_1546.png)
以后我们可以这样写：
![](http://img.smyhvae.com/20180206_1550.png)
传统的做法中，我们通过增加类名如`class="header"`、`class="footer"`，使HTML页面具有语义性，但是不具有通用性。
HTML5 则是通过新增语义标签的形式来解决这个问题，例如`<header></header>`、`<footer></footer>`等，这样就可以使其具有通用性。
**传统网页布局：**
```html
<!-- 头部 -->
<div class="header">
<ul class="nav"></ul>
</div>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<div class="article"></div>
<!-- 侧边栏 -->
<div class="aside"></div>
</div>
<!-- 底部 -->
<div class="footer">
</div>
```
**H5 的经典网页布局：**
```html
<!-- 头部 -->
<header>
<ul class="nav"></ul>
</header>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<article></article>
<!-- 侧边栏 -->
<aside></aside>
</div>
<!-- 底部 -->
<footer>
</footer>
```
## H5中常用的新语义标签
- `<nav>` 表示导航
- `<header>` 表示页眉
- `<footer>` 表示页脚
- `<section>` 表示区块
- `<article>` 表示文章。如文章、评论、帖子、博客
- `<aside>` 表示侧边栏 如文章的侧栏
- `<figure>` 表示媒介内容分组。
- `<mark>` 表示标记 (用得少)
- `<progress>` 表示进度 (用得少)
- `<time>` 表示日期
本质上新语义标签与`<div>`、`<span>`没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成`<div class="nav">` 相当于`<nav>`。
PS：单标签不用写关闭符号。
### 新语义标签的兼容性处理
IE8 及以下版本的浏览器不支持 H5 和 CSS3。解决办法：引入`html5shiv.js`文件。
引入时，需要做if判断，具体代码如下：
```html
<!-- 条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->
```
上方代码是**条件注释**：虽然是注释，但是IE浏览器可以识别出来。解释一下：
- l：less 更小
- t：than 比
- e：equal等于
- g：great 更大
PS:我们在测试 IE 浏览器的兼容的时候，可以使用软件 ietest，模拟IE6-IE11。
在不支持HTML5新标签的浏览器，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用。
但是在IE9版本以下，并不能正常解析这些新标签，但是可以识别通过document.createElement('tagName')创建的自定义标签。于是我们的解决方案就是：将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。
当然，在实际开发中我们更多采用的办法是：检测IE浏览器的版本，来加载第三方的JS库来解决兼容问题（如上方代码所示）。
## H5中的表单
传统的Web表单已经越来越不能满足开发的需求，HTML5 在 Web 表单方向做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
### H5中新增的表单类型
- `email` 只能输入email格式。自动带有验证功能。
- `tel` 手机号码。
- `url` 只能输入url格式。
- `number` 只能输入数字。
- `search` 搜索框
- `range` 滑动条
- `color` 拾色器
- `time` 时间
- `date` 日期。
- `--datetime` 时间日期
- `month` 月份
- `week` 星期
上面的部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
代码举例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>表单类型</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
form {
max-width: 500px;
width: 100%;
margin: 32px auto 0;
font-size: 16px;
}
label {
display: block;
margin: 10px 0;
}
input {
width: 100%;
height: 25px;
margin-top: 2px;
display: block;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单类型</legend>
<label for="">
email: <input type="email" name="email" required>
</label>
<label for="">
color: <input type="color" name="color">
</label>
<label for="">
url: <input type="url" name='url'>
</label>
<label for="">
number: <input type="number" step="3" name="number">
</label>
<label for="">
range: <input type="range" name="range" value="100">
</label>
<label for="">
search: <input type="search" name="search">
</label>
<label for="">
tel: <input type="tel" name="tel">
</label>
<label for="">
time: <input type="time" name="time">
</label>
<label for="">
date: <input type="date" name="date">
</label>
<label for="">
datetime: <input type="datetime">
</label>
<label for="">
week: <input type="week" name="month">
</label>
<label for="">
month: <input type="month" name="month">
</label>
<label for="">
datetime-local: <input type="datetime-local" name="datetime-local">
</label>
<input type="submit">
</fieldset>
</form>
</body>
</html>
```
代码解释：
`<fieldset>` 标签将表单里的内容进行打包，代表一组；而`<legend> `标签的则是 fieldset 里的元素定义标题。
### 表单元素（标签）
这里讲两个表单元素。
**1、`<datalist>` 数据列表：**
```html
<input type="text" list="myData">
<datalist id="myData">
<option>本科</option>
<option>研究生</option>
<option>不明</option>
</datalist>
```
上方代码中，input里的list属性和 datalist 进行了绑定。
效果：
![](http://img.smyhvae.com/20180206_1845.gif)
上图可以看出，数据列表可以自动提示。
2、`<keygen>`元素：
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键：一个公钥，一个私钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
3、`<meter>`元素：度量器
- low：低于该值后警告
- high：高于该值后警告
- value：当前值
- max：最大值
- min：最小值。
举例：
```javascript
<meter value="81" min="0" max="100" low="60" high="80"/>
```
### 表单属性
- `placeholder` 占位符（提示文字）
- `autofocus` 自动获取焦点
- `multiple` 文件上传多选或多个邮箱地址
- `autocomplete` 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)
- `form` 指定表单项属于哪个form，处理复杂表单时会需要
- `novalidate` 关闭默认的验证功能（只能加给form）
- `required` 表示必填项
- `pattern` 自定义正则，验证表单。例如
代码举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form {
width: 100%;
/* 最大宽度*/
max-width: 640px;
/* 最小宽度*/
min-width: 320px;
margin: 0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}
input {
display: block;
width: 100%;
height: 30px;
margin: 10px 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单属性</legend>
<label for="">
用户名：<input type="text" placeholder="例如：smyhvae" autofocus name="userName" autocomplete="on" required/>
</label>
<label for="">
电话：<input type="tel" pattern="1\d{10}"/>
</label>
<label for="">
multiple的表单: <input type="file" multiple>
</label>
<!-- 上传文件-->
<input type="file" name="file" multiple/>
<input type="submit"/>
</fieldset>
</form>
</body>
</html>
```
### 表单事件
- `oninput()`：用户输入内容时触发，可用于输入字数统计。
- `oninvalid()`：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。
举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form {
width: 100%;
/* 最大宽度*/
max-width: 400px;
/* 最小宽度*/
min-width: 200px;
margin: 0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}
input {
display: block;
width: 100%;
height: 30px;
margin: 10px 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单事件</legend>
<label for="">
邮箱：<input type="email" name="" id="txt1"/>
</label>
<label for="">
输入的次数统计：<input type="text" name="" id="txt2"/>
</label>
<input type="submit"/>
</fieldset>
</form>
<script>
var txt1 = document.getElementById('txt1');
var txt2 = document.getElementById('txt2');
var num = 0;
txt1.oninput = function () { //用户输入时触发
num++; //用户每输入一次，num自动加 1
//将统计数显示在txt2中
txt2.value = num;
}
txt1.oninvalid = function () { //验证不通过时触发
this.setCustomValidity('亲，请输入正确哦'); //设置验证不通过时的提示文字
}
</script>
</body>
</html>
```
效果：
![](http://img.smyhvae.com/20180206_1920.gif)
## 多媒体
在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放。但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得音频、视频播放的处理变得非常复杂；并且移动设备的浏览器并不支持Flash插件。
H5里面提供了视频和音频的标签。
### 音频
HTML5通过`<audio>`标签来解决音频播放的问题。
使用举例：
```html
<audio src="music/yinyue.mp3" autoplay controls> </audio>
```
效果如下：
![](http://img.smyhvae.com/20180206_1958.png)
我们可以通过附加属性，来更友好地控制音频的播放，如：
- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`，都可以。
- `controls` 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
- `loop` 循环播放。
- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
**处理兼容性问题：**
由于版权等原因，不同的浏览器可支持播放的格式是不一样的：
![](http://img.smyhvae.com/20180206_1945.png)
为了做到多浏览器支持，可以采取以下兼容性写法：
```html
<!--推荐的兼容写法：-->
<audio controls loop>
<source src="music/yinyue.mp3"/>
<source src="music/yinyue.ogg"/>
<source src="music/yinyue.wav"/>
抱歉，你的浏览器暂不支持此音频格式
</audio>
```
代码解释：如果识别不出音频格式，就弹出那句“抱歉”。
### 视频
HTML5通过`<video>`标签来解决视频播放的问题。
使用举例：
```html
<video src="video/movie.mp4" controls autoplay></video>
```
我们可以通过附加属性，来更友好地控制视频的播放，如：
- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`，都可以。
- `controls` 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
- `loop` 循环播放。
- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
- `width`：设置播放窗口宽度。
- `height`：设置播放窗口的高度。
由于版权等原因，不同的浏览器可支持播放的格式是不一样的：
![](http://img.smyhvae.com/20180206_2025.png)
兼容性写法：
```html
<!--<video src="video/movie.mp4" controls autoplay ></video>-->
<!-- 行内块 display:inline-block -->
<video controls autoplay>
<source src="video/movie.mp4"/>
<source src="video/movie.ogg"/>
<source src="video/movie.webm"/>
抱歉，不支持此视频
</video>
```
## DOM 操作
### 获取元素
- document.querySelector("selector") 通过CSS选择器获取符合条件的第一个元素。
- document.querySelectorAll("selector") 通过CSS选择器获取符合条件的所有元素，以类数组形式存在。
### 类名操作
- Node.classList.add("class") 添加class
- Node.classList.remove("class") 移除class
- Node.classList.toggle("class") 切换class，有则移除，无则添加
- Node.classList.contains("class") 检测是否存在class
### 自定义属性
js 里可以通过 `box1.index=100;` `box1.title` 来自定义属性和获取属性。
H5可以直接在标签里添加自定义属性，**但必须以 `data-` 开头**。
举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 给标签添加自定义属性 必须以data-开头 -->
<div class="box" title="盒子" data-my-name="smyhvae" data-content="我是一个div">div</div>
<script>
var box = document.querySelector('.box');
//自定义的属性 需要通过 dateset[]方式来获取
console.log(box.dataset["content"]); //打印结果：我是一个div
console.log(box.dataset["myName"]); //打印结果：smyhvae
//设置自定义属性的值
var num = 100;
num.index = 10;
box.index = 100;
box.dataset["content"] = "aaaa";
</script>
</body>
</html>
```
### 举例：鼠标点击时，tab栏切换
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab 标签</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.tabs {
width: 400px;
margin: 30px auto;
background-color: #FFF;
border: 1px solid #C0DCC0;
box-sizing: border-box;
}
.tabs nav {
height: 40px;
text-align: center;
line-height: 40px;
overflow: hidden;
background-color: #C0DCC0;
display: flex;
}
nav a {
display: block;
width: 100px;
border-right: 1px solid #FFF;
color: #000;
text-decoration: none;
}
nav a:last-child {
border-right: 0 none;
}
nav a.active {
background-color: #9BAF9B;
}
.cont {
overflow: hidden;
display: none;
}
.cont ol {
line-height: 30px;
}
</style>
</head>
<body>
<div class="tabs">
<nav>
<a href="javascript:;" data-cont="local">国内新闻</a>
<a href="javascript:;" data-cont="global">国际新闻</a>
<a href="javascript:;" data-cont="sports">体育新闻</a>
<a href="javascript:;" data-cont="funny">娱乐新闻</a>
</nav>
<section class="cont" id="local">
<ol>
<li>国内新闻1</li>
<li>国内新闻2</li>
<li>国内新闻3</li>
<li>国内新闻4</li>
<li>国内新闻5</li>
<li>国内新闻6</li>
<li>国内新闻7</li>
</ol>
</section>
<section class="cont" id="global">
<ol>
<li>国内新闻1</li>
<li>国际新闻2</li>
<li>国际新闻3</li>
<li>国际新闻4</li>
<li>国际新闻5</li>
<li>国际新闻6</li>
</ol>
</section>
<section class="cont" id="sports">
<ol>
<li>体育新闻1</li>
<li>体育新闻2</li>
<li>体育新闻3</li>
<li>体育新闻4</li>
<li>体育新闻5</li>
<li>体育新闻6</li>
<li>体育新闻7</li>
</ol>
</section>
<section class="cont" id="funny">
<ol>
<li>娱乐新闻1</li>
<li>娱乐新闻2</li>
<li>娱乐新闻3</li>
<li>娱乐新闻4</li>
<li>娱乐新闻5</li>
<li>娱乐新闻6</li>
<li>娱乐新闻7</li>
</ol>
</section>
</div>
<script>
// 目标： 默认显示一个 当前的样式
// 点击导航，实现切换
// key 表示的当前显示的是第几个
(function (key) {
// 获取所有的导航
var navs = document.querySelectorAll('nav a');
// 遍历 给导航 绑定事件，并且添加当前样式
for (var i = 0; i < navs.length; i++) {
// 如果是用户指定的当前样式
if (key == i) {
navs[i].classList.add('active');
// 拿到要显示内容section的id
var secId = navs[i].dataset['cont'];
// 获取对应的section标签
document.querySelector('#' + secId).style.display = 'block';
}
// 给每一个导航绑定点击事件
navs[i].onclick = function () {
// 排他
// 之前有active样式的清除, 之前显示的section 隐藏
var currentNav = document.querySelector('.active');
// 获取对应的内容区域 ，让其隐藏
var currentId = currentNav.dataset['cont'];
// 去掉导航的active 样式
currentNav.classList.remove('active');
// 对应的内容区域
document.querySelector('#' + currentId).style.display = 'none';
// 突出显示自己 导航添加样式 对应的section 显示
// 给自己添加active样式
this.classList.add('active');
// 对应的section模块显示出来
var myId = this.dataset['cont'];
document.querySelector('#' + myId).style.display = 'block';
}
}
})(0);
</script>
</body>
</html>
```
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

500
07-HTML5和CSS3/03-CSS3选择器详解.md Normal file
View File

@@ -0,0 +1,500 @@
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8426799.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## CSS3介绍
CSS3在CSS2基础上，**增强**或**新增**了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。
### CSS3的现状
- 浏览器支持程度不够好，有些需要添加**私有前缀**
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
### 应对的策略：渐进增强
- （1）坚持**渐进增强**的原则：**让低版本浏览器能正常访问页面，高版本的浏览器用户体验更好**。【重要】
比如说，同样是一个头像，可能在低版本的浏览器中，头像方的；在高版本的浏览器中，头像是圆的。
- （2）考虑用户群体。
- （3）遵照产品的方案。
参考链接：
- [渐进增强 VS 优雅降级 | 简书](https://www.jianshu.com/p/d313f1108862)
- [渐进增强和优雅降级之间的不同（面试题目）](https://www.cnblogs.com/iceflorence/archive/2017/03/27/6625466.html)
### 浏览器的版本问题
由于CSS3普遍存在兼容性问题，为了避免因兼容性带来的干扰，浏览器的建议版本为：
- Chrome浏览器 version 46+
- Firefox浏览器 firefox 42+
### 如何使用手册
CSS参考手册的网址：<http://css.doyoe.com/>
CSS参考手册的下载链接：<http://download.csdn.net/download/smyhvae/10243974>
在查看[CSS参考手册](http://download.csdn.net/download/smyhvae/10243974)时，需要注意以下符号：
![](http://img.smyhvae.com/20180206_2150.png)
比如说，`{1,4}`表示可以设置一至四个参数。
下面讲CSS3的基础知识。本文讲一下 CSS3 选择器的内容。
## CSS3 选择器
我们之前学过 CSS 的选择器，比如：
```
div 标签选择器
.box 类名选择器
#box　id选择器
div p 后代选择器
div.box 交集选择器
div,p,span 并集选择器
div>p 子代选择器
* : 通配符
div+p: 选中div后面相邻的第一个p
div~p: 选中的div后面所有的p
```
CSS3新增了许多**灵活**查找元素的方法，极大的提高了查找元素的效率和**精准度**。CSS3选择器与 jQuery 中所提供的**绝大部分**选择器兼容。
### 属性选择器
属性选择器的标志性符号是 `[]`。
匹配含义：
```
^：开头 $：结尾 *：包含
```
格式：
- `E[title]` 选中页面的E元素，并且E存在 title 属性即可。
- `E[title="abc"]`选中页面的E元素，并且E需要带有title属性，且属性值**完全等于**abc。
- `E[attr~=val]` 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。
- `E[attr|=val]` 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。
- `E[title^="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。
- `E[title$="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。
- `E[title*="abc"]` 选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。
比如说，我们用属性选择器去匹配标签的className，是非常方便的。
这里我们用class属性来举例。代码举例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器 - 属性</title>
<style>
body {
margin: 0;
padding: 0;
font-family: '微软雅黑';
background-color: #F7F7F7;
}
.wrapper {
width: 1024px;
margin: 0 auto;
}
.wrapper > section {
min-height: 300px;
margin-bottom: 30px;
box-shadow: 1px 1px 4px #DDD;
background-color: #FFF;
}
.wrapper > header {
text-align: center;
line-height: 1;
padding: 20px;
margin-bottom: 10px;
font-size: 30px;
}
.wrapper section > header {
line-height: 1;
padding: 10px;
font-size: 22px;
color: #333;
background-color: #EEE;
}
.wrapper .wrap-box {
padding: 20px;
}
form {
width: 300px;
height: 300px;
margin: 0 auto;
}
form input[type="text"] {
width: 200px;
height: 30px;
}
form input[type="password"] {
width: 200px;
height: 30px;
}
.attr1 {
}
.download {
}
.attr1 a[href="./a.rmvb"] {
color: red;
}
.attr1 a[href="./b.rmvb"] {
color: pink;
}
/* E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/
.attr2 a[class~="download"] {
color: red;
}
/* E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以"-"分隔的*/
.attr3 a[class|="download"] {
color: red;
}
/* E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置 */
.attr4 a[class*="download"] {
color: red;
}
/* E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置 */
.attr5 a[class^="download"] {
color: red;
}
/* E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置 */
.attr6 a[class$="download"] {
color: red;
}
</style>
</head>
<body>
<div class="wrapper">
<header>CSS3-属性选择器</header>
<section>
<header>简介</header>
<div class="wrap-box">
<form action="">
<ul>
<li>
姓名: <input type="text">
</li>
<li>
密码: <input type="password">
</li>
<li>
性别: <input type="radio">男
<input type="radio"> 女
</li>
<li>
兴趣: <input type="checkbox" name="" id="">写代码
</li>
<li>
<input type="submit" value="提交">
</li>
</ul>
</form>
</div>
</section>
<section class="attr1">
<header>E[attr]</header>
<div class="wrap-box">
<a href="./a.rmvb" class="download download-movie">下载</a>
<a href="./b.rmvb" class="download download-movie">下载</a>
<a href="./a.mp3" class="download download-music">下载</a>
</div>
</section>
<section class="attr2">
<header>E[attr~=attr]</header>
<div class="wrap-box">
<a href="./a.rmvb" class="download download-movie">下载</a>
<a href="./b.rmvb" class="download download-movie">下载</a>
<a href="./a.mp3" class="download download-music">下载</a>
</div>
</section>
<section class="attr3">
<header>E[attr|=attr]</header>
<div class="wrap-box">
<a href="./a.rmvb" class="download">下载</a>
<a href="./b.rmvb" class="download-movie">下载</a>
<a href="./a.mp3" class="download-music">下载</a>
</div>
</section>
<section class="attr4">
<header>E[attr*=val]</header>
<div class="wrap-box">
<a href="./a.rmvb" class="download">下载</a>
<a href="./b.rmvb" class="moviedownload">下载</a>
<a href="./a.mp3" class="downloadmusic">下载</a>
</div>
</section>
<section class="attr5">
<header>E[attr^=val]</header>
<div class="wrap-box">
<a href="./a.rmvb" class="download">下载</a>
<a href="./b.rmvb" class="moviedownload">下载</a>
<a href="./a.mp3" class="downloadmusic">下载</a>
</div>
</section>
<section class="attr6">
<header>E[attr$=val]</header>
<div class="wrap-box">
<a href="./a.rmvb" class="download">下载</a>
<a href="./b.rmvb" class="moviedownload">下载</a>
<a href="./a.mp3" class="downloadmusic">下载</a>
</div>
</section>
</div>
</body>
</html>
```
最后来张表格：
![](http://img.smyhvae.com/20180207_1500.png)
### 结构伪类选择器
伪类选择器的标志性符号是 `:`。
CSS中有一些伪类选择器，比如`:link`、`:active`、`:visited`、`:hover`，这些是动态伪类选择器。
CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的**结构伪类选择器**：即通过**结构**来进行筛选。
**1、格式：（第一部分）**
- `E:first-child` 匹配父元素的第一个子元素E。
- `E:last-child` 匹配父元素的最后一个子元素E。
- `E:nth-child(n)` 匹配父元素的第n个子元素E。**注意**，盒子的编号是从`1`开始算起，不是从`0`开始算起。
- `E:nth-child(odd)` 匹配奇数
- `E:nth-child(even)` 匹配偶数
- `E:nth-last-child(n)` 匹配父元素的倒数第n个子元素E。
理解：
（1）这里我们要好好理解**父元素**的含义，它指的是：以 E 元素的父元素为参考。
（2）注意：以上选择器中所选到的元素的类型，必须是指定的类型E，如果选不中，则无效。这个要好好理解，具体可以看CSS参考手册中的`E:nth-child(n)`的示例。我们可以理解成：**先根据选择器找到选中的全部位置，如果发现某个位置不是类型E，则该位置失效**。
（3）另外，`E:nth-child(n)`这个属性也很有意思。比如，针对下面这样一组标签：
```html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
```
上方代码中：
- 如果选择器写成`li:nth-child(2)`，则表示第2个 `li`。
- 如果选择器写成`li:nth-child(n)`，则表示**所有的**`li`。因为此时的 `n` 表示 0,1,2,3,4,5,6,7,8.....（当n小于1时无效，因为n = 0 也是不会选中的）
- 如果选择器写成`li:nth-child(2n)`，则表示所有的**第偶数个** li。
- 如果选择器写成`li:nth-child(2n+1)`，则表示所有的**第奇数个** li。
- 如果选择器写成`li:nth-child(-n+5)`，则表示**前5个** li。
- 如果选择器写成`li:nth-last-child(-n+5)`，则表示**最后5个** li。
- 如果选择器写成`li:nth-child(7n)`，则表示选中7的倍数。。
上面列举的选择器中，我们只要记住： `n` 表示 0,1,2,3,4,5,6,7,8.....就很容易明白了。
**2、格式：（第二部分）**
- `E:first-of-type` 匹配同类型中的第一个同级兄弟元素E。
- `E:last-of-type` 匹配同类型中的最后一个同级兄弟元素E。
- `E:nth-of-type(n)` 匹配同类型中的第n个同级兄弟元素E。
- `E:nth-last-of-type(n)` 匹配同类型中的倒数第n个同级兄弟元素E。
既然上面这几个选择器带有`type`，我们可以这样理解：先在同级里找到所有的E类型，然后根据 n 进行匹配。
**3、格式：（第三部分）**
- `E:empty` 匹配没有任何子节点（包括空格等text节点）的元素E。
- `E:target` 匹配相关URL指向的E元素。要配合锚点使用。
**举例：**
我们可以把多个伪类选择器结合起来使用，比如：
![](http://img.smyhvae.com/20180207_1340.png)
如果想把上图中，第一行的前三个 span 标红，我们可以这样使用结构伪类选择器：
```css
dt:first-child span:nth-of-type(-n+3) {
color: red;
}
```
最后来张表格：
![](http://img.smyhvae.com/20180207_1502.png)
### 伪元素选择器
伪元素选择器的标志性符号是 `::`。
**1、格式：（第一部分）**
- `E::before` 设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
- `E::after` 设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
`E:after`、`E:before `在旧版本里是伪类，在 CSS3 这个新版本里是伪元素。新版本里，`E:after`、`E:before`会被自动识别为`E::after`、`E::before`，按伪元素来对待，这样做的目的是用来做兼容处理。
举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*::before 和::after 是通过 css 模拟出的html标签的效果*/
span::before{
content:"smyhvae";
color:red;
background-color: pink;
width: 50px;
height: 50px;
display: inline-block;
}
span::after{
content:"永不止步";
color:yellowgreen;
}
/*给原本的span标签设置一个默认的属性*/
span{
border: 1px solid #000;
}
</style>
</head>
<body>
<span>生命壹号</span>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180207_1409.png)
**上图可以看出**：
- 通过伪元素选择器，就可以添加出类似于span标签的效果（记得要结合 content 属性使用）。
- 通过这两个属性添加的伪元素，是**行内元素**，需要转换成块元素才能设置宽高。
**2、格式：（第二部分）**
- `E::first-letter` 设置元素 E 里面的**第一个字符**的样式。
- `E::first-line` 设置元素 E 里面的**第一行**的样式。
- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
`E::first-letter` 的举例：
![](http://img.smyhvae.com/20180207_1430.png)
`E::first-line`的举例：
![](http://img.smyhvae.com/20180207_1433.png)
最后来张表格：
![](http://img.smyhvae.com/20180207_1503.png)
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

861
07-HTML5和CSS3/04-CSS3属性详解（一）.md Normal file
View File

@@ -0,0 +1,861 @@
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8430898.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## 前言
我们在上一篇文章中学习了[CSS3的选择器](http://www.cnblogs.com/smyhvae/p/8426799.html)，本文来学一下CSS3的一些属性。
本文主要内容：
- 颜色
- 文本
- 盒模型中的 box-sizing 属性
- 处理兼容性问题：私有前缀
- 边框
- 背景属性
- 渐变
## 颜色
CSS3中，有一种新的表示颜色的方式：RGBA或者HSLA。
RGBA、HSLA可应用于**所有**使用颜色的地方。
**RGBA 举例**：
```javascript
background-color: rgba(0, 0, 255, 0.3);
border: 30px solid rgba(0, 255, 0, 0.3);
```
解释：
- RGBA 即：Red、Green、Blue、Alpha
- R、G、B 的取值范围是：0~255
**HSLA 举例**：
```javascript
background-color: hsla(240,50%,50%,0.4);
```
解释：
- `H` 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
- `S` 饱和度，取值范围 0%~100%。值越大，越鲜艳。
- `L` 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
- `A` 透明度，取值范围 0~1。
如果不知道 H 的值该设置多少，我们不妨来看一下**色盘**：
![](http://img.smyhvae.com/20180207_1545.png)
推荐链接：[配色宝典](http://www.uisdc.com/how-to-create-color-palettes)
**关于设置透明度的其他方式：**
（1）`opacity: 0.3;` 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
（2）`background: transparent;` 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
## 文本
### text-shadow：设置文本的阴影
格式举例：
```javascript
text-shadow: 20px 27px 22px pink;
```
参数解释：水平位移 垂直位移 模糊程度 阴影颜色。
效果举例：
![](http://img.smyhvae.com/20180207_1600.png)
### 举例：凹凸文字效果
text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开。我们来看个例子。
代码如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: #666;
}
div {
font-size: 100px;
text-align: center;
font-weight: bold;
font-family: "Microsoft Yahei";
color: #666;
}
/* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/
.tu {
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
.ao {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div class="ao">生命壹号</div>
<div class="tu">生命壹号</div>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180207_1617.png)
上图中，实现凹凸文字效果的方式比较简单，给左上角放白色的阴影，右下角放黑色的阴影，就达到了凹下去的效果。
## 盒模型中的 box-sizing 属性
我们在**[之前的文章](http://www.cnblogs.com/smyhvae/p/7256371.html)**中专门讲过盒子模型。
CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽度和高度的计算方式**。
这就需要用到 `box-sizing`属性。它的属性值可以是：`content-box`、`border-box`。解释如下。
**外加模式：**（css的默认方式）
```javascript
box-sizing: content-box;
```
解释：此时设置的 width 和 height 是**内容区域**的宽高。`盒子的实际宽度 = 设置的 width + padding + border`。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。
**内减模式：**【需要注意】
```javascript
box-sizing: border-box;
```
解释：此时设置的 width 和 height 是**盒子**的总宽高。`盒子的实际宽度 = 设置的 width`。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。
## 处理兼容性问题：私有前缀
通过网址<http://caniuse.com/> 可以查询CSS3各特性的支持程度。
处理兼容性问题的常见方法：为属性添加**私有前缀**。
如此方法不能解决，应尽量避免使用，无需刻意去处理CSS3的兼容性问题。
**私有前缀的举例**：
比如说，我想给指定的div设置下面这样一个属性：
```css
background: linear-gradient(left, green, yellow);
```
上面这个属性的作用是：添加从左到右的线性渐变，颜色从绿色变为黄色。
如果直接这样写属性，是看不到效果的：
![](http://img.smyhvae.com/20180207_1700.png)
此时，我们可以**为浏览器添加不同的私有前缀**，属性就可以生效了。
格式如下：
```html
-webkit-: 谷歌 苹果
-moz-:火狐
-ms-：IE
-o-：欧朋
```
格式举例如下：
```css
background: -webkit-linear-gradient(left, green, yellow);
background: -moz-linear-gradient(left, green, yellow);
background: -ms-linear-gradient(left, green, yellow);
background: -o-linear-gradient(left, green, yellow);
background: linear-gradient(left, green, yellow);
```
效果如下：
![](http://img.smyhvae.com/20180207_1710.png)
## 边框
边框的属性很多，其中**边框圆角**和**边框阴影**这两个属性，应用十分广泛，兼容性也相对较好，且符合**渐进增强**的原则，需要重点熟悉。
### 边框圆角：`border-radius` 属性
边框的每个圆角，本质上是一个圆，圆有**水平半径**和**垂直半径**：如果二者相等，就是圆；如果二者不等， 就是椭圆。
单个属性的写法：
```
border-top-left-radius: 60px 120px; //参数解释：水平半径 垂直半径
border-top-right-radius: 60px 120px;
border-bottom-left-radius: 60px 120px;
border-bottom-right-radius: 60px 120px;
```
复合写法：
```
border-radius: 60px/120px; //参数：水平半径/垂直半径
border-radius: 20px 60px 100px 140px; //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
border-radius: 20px 60px;
```
最简洁的写法：（四个角的半径都相同时）
```
border-radius: 60px;
```
举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.parent {
width: 400px;
}
.box {
width: 100px;
height: 100px;
float: left;
border: 1px solid rgb(144, 12, 63);
margin: 20px;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 50px;
background-color: rgb(255, 141, 26);
}
/*画圆形的方式一*/
.box:nth-child(1) {
border-radius: 100px;
}
/*画圆形的方式二*/
.box:nth-child(2) {
border-radius: 50%;
}
.box:nth-child(3) {
border-radius: 200px 0 0 0;
}
.box:nth-child(4) {
border-radius: 100px/50px;
}
.box:nth-child(5) {
border-radius: 10%;
}
.box:nth-child(6) {
border-radius: 0 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180207_1750.png)
### 边框阴影：`box-shadow` 属性
格式举例：
```javascript
box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
box-shadow: 15px 21px 48px -2px #666;
```
参数解释：
- 水平偏移：正值向右 负值向左。
- 垂直偏移：正值向下 负值向上。
- 模糊程度：不能为负值。
效果如下：
![](http://img.smyhvae.com/20180207_2027.png)
另外，后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影。例如：
```javascript
box-shadow:3px 3px 3px 3px #666 inset;
```
效果如下：
20180207_2028.png
![](http://img.smyhvae.com/20180206_2150.png)
**注意**：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
我们还可以设置多重边框阴影，实现更好的效果，增强立体感。
### 边框图片
边框图片有以下属性：
```javascript
/* 边框图片的路径*/
border-image-source: url("images/border.png");
/* 图片边框的裁剪*/
border-image-slice: 27;
/*图片边框的宽度*/
border-image-width: 27px;
/*边框图片的平铺*/
/* repeat :正常平铺 但是可能会显示不完整*/
/*round: 平铺 但是保证 图片完整*/
/*stretch: 拉伸显示*/
border-image-repeat: stretch;
```
我们也可以写成一个综合属性：
```javascript
border-image: url("images/border.png") 27/20px round;
```
这个属性要好好理解，我们假设拿下面这张图来作为边框图片：
![](http://img.smyhvae.com/20180207_2045.png)
![](http://img.smyhvae.com/20180207_2046.png)
这张图片将会被“切割”成**九宫格**形式，然后进行平铺。四个角位置、形状保持不变，中心位置和水平垂直向两个方向平铺：
![](http://img.smyhvae.com/20180207_2050.png)
再具体一点：
![](http://img.smyhvae.com/20180207_2051.png)
### 常见的边框图片汇总
```html
```
## 背景属性
背景属性在 CSS3 中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
### 背景尺寸：`background-size`属性
`background-size`属性：设置背景图片的尺寸。
格式举例：
```javascript
/* 宽、高的具体数值 */
background-size: 500px 500px;
/* 宽高的百分比 */
background-size: 50% 50%; // 如果两个属性值相同，可以简写成：background-size: 50%;
background-size: 100% auto; //这个属性可以自己试验一下。
/* cover：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。 */
background-size: cover;
/* contain：会自动调整缩放比例，保证图片始终完整显示在背景区域。 */
background-size: contain;
```
这里我们对属性值 `cover` 和 `contain`进行再次强调：
- `cover`：会自动调整缩放比例，保证图片始终**填充满**背景区域，如有**溢出部分**则会被隐藏。也就是说，保证背景图片完全覆盖盒子，但不能保证完整显示。
- `contain`：会自动调整缩放比例，保证图片始终**完整显示**在背景区域。也就是说，保证背景图片最大化地在盒子里，**等比例**显示，但不保证能铺满盒子。
### 背景原点：`background-origin` 属性
`background-origin` 属性：控制背景从什么地方开始显示。
格式举例：
```javascript
/* 从 padding-box 内边距开始显示背景图 */
background-origin: padding-box; //默认值
/* 从 border-box 边框开始显示背景图 */
background-origin: border-box;
/* 从 content-box 内容区域开始显示背景图 */
background-origin: content-box;
```
如果属性值设置成了`border-box`，那边框部分也会显示图片哦。
如下图所示：
![](http://img.smyhvae.com/20180207_2115.png)
### 背景裁剪：`background-clip`属性
格式举例：
`background-clip: content-box;` 超出的部分，将裁剪掉。属性值可以是：
- `border-box` 超出 border-box 的部分，将裁剪掉
- `padding-box` 超出 padding-box 的部分，将裁剪掉
- `content-box` 超出 content-box 的部分，将裁剪掉
假设现在有这样的属性设置：
```javascript
background-origin: border-box;
background-clip: content-box;
```
上方代码的意思是，背景图片从**边框部分**开始加载，但是呢，超出**内容区域**的部分将被裁减掉。
### 同时设置多个背景
我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。
代码举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
height: 416px;
border: 1px solid #000;
margin: 100px auto;
/* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
background: url(images/bg1.png) no-repeat left top,
url(images/bg2.png) no-repeat right top,
url(images/bg3.png) no-repeat right bottom,
url(images/bg4.png) no-repeat left bottom,
url(images/bg5.png) no-repeat center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
```
实现效果如下：
![](http://img.smyhvae.com/20180207_2140.gif)
上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。
## 渐变
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
渐变分为：
- 线性渐变：沿着某条直线朝一个方向产生渐变效果。
- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。
- 重复渐变。
见下图：
![](http://img.smyhvae.com/20180208_1140.png)
注意，渐变属于背景图片属性`background-image`的属性值。我们依次来看一下。
### 线性渐变
格式：
```javascript
background-image: linear-gradient(方向, 起始颜色, 终止颜色);
background-image: linear-gradient(to right, yellow, green);
```
参数解释：
- 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。
格式举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 500px;
height: 100px;
margin: 10px auto;
border: 1px solid #000;
}
/* 语法：
linear-gradient(方向，起始颜色，终止颜色);
方向：to left to right to top to bottom 　角度　30deg
起始颜色
终止颜色
*/
div:nth-child(1) {
background-image: linear-gradient(to right, yellow, green);
}
/* 不写方向，表示默认的方向是：从上往下 */
div:nth-child(2) {
background-image: linear-gradient(yellow, green);
}
/* 方向可以指定角度 */
div:nth-child(3) {
width: 100px;
height: 100px;
background-image: linear-gradient(135deg, yellow, green);
}
/* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */
div:nth-child(4) {
background-image: linear-gradient(to right,
yellow 0%,
red 40%,
green 70%,
blue 100%);
}
/* 颜色之间，出现突变 */
div:nth-child(5) {
background-image: linear-gradient(45deg,
yellow 0%,
yellow 25%,
blue 25%,
blue 50%,
red 50%,
red 75%,
green 75%,
green 100%
);
}
div:nth-child(6) {
background-image: linear-gradient(to right,
#000 0%,
#000 25%,
#fff 25%,
#fff 50%,
#000 50%,
#000 75%,
#fff 75%,
#fff 100%
);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180207_2222.png)
**举例**：按钮
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 渐变</title>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color: #f8fcd4;
}
.nav {
width: 800px;
text-align: center;
padding-top: 50px;
margin: 0 auto;
}
/*设置按钮基本样式*/
.nav a {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 14px;
color: #fff;
text-decoration: none;
border: 1px solid #e59500;
background-color: #FFB700;
background-image: linear-gradient(
to bottom,
#FFB700 0%,
#FF8C00 100%
);
}
</style>
</head>
<body>
<div class="nav">
<a href="javascript:;">导航1</a>
<a href="javascript:;">导航2</a>
<a href="javascript:;">导航3</a>
<a href="javascript:;">导航4</a>
<a href="javascript:;">导航5</a>
<a href="javascript:;">导航6</a>
</div>
</body>
</html>
```
效果：
![](http://img.smyhvae.com/20180207_2301.png)
### 径向渐变
格式：
```
background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
background-image: radial-gradient(100px at center,yellow ,green);
```
解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。
中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。
当然，还有其他的各种参数。格式举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 250px;
height: 250px;
border: 1px solid #000;
margin: 20px;
float: left;
}
/*
径向渐变：
radial-gradient（辐射的半径大小, 中心的位置，起始颜色，终止颜色）;
中心点位置：at left right center bottom top
*/
/*辐射半径为100px，中心点在中间*/
div:nth-child(1) {
background-image: radial-gradient(100px at center, yellow, green);
}
/*中心点在左上角*/
div:nth-child(3) {
background-image: radial-gradient(at left top, yellow, green);
}
div:nth-child(2) {
background-image: radial-gradient(at 50px 50px, yellow, green);
}
/*设置不同的颜色渐变*/
div:nth-child(4) {
background-image: radial-gradient(100px at center,
yellow 0%,
green 30%,
blue 60%,
red 100%);
}
/*如果辐射半径的宽高不同，那就是椭圆*/
div:nth-child(5) {
background-image: radial-gradient(100px 50px at center, yellow, green);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180207_2256.png)
**举例：**利用径向渐变和边框圆角的属性，生成按钮。代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 渐变</title>
<style>
div:nth-child(1) {
width: 200px;
height: 200px;
margin: 40px auto;
border-radius: 100px;
background-color: yellowgreen;
}
div:nth-child(2) {
width: 200px;
height: 200px;
margin: 40px auto;
border-radius: 100px;
background-color: yellowgreen;
background-image: radial-gradient(
200px at 100px 100px,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.5)
);
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180208_1133.png)
上图中，给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0，则样式无变化，和第一个div一样。如果设置的透明度是从1到1，则盒子是全黑的。
CSS3的更多属性，且听下文继续。
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

1452
07-HTML5和CSS3/05-CSS3属性详解：动画详解.md Normal file
View File

File diff suppressed because it is too large Load Diff

602
07-HTML5和CSS3/06-CSS3属性详解：flex布局.md Normal file
View File

@@ -0,0 +1,602 @@
## 多列布局
类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。用得不多。
格式举例：
```css
.wrapper{
/* 分成几列 */
-webkit-column-count: 3;
/* 每列之间，用分割线隔开 */
-webkit-column-rule: 1px dashed red;
/* 设置列之间的间距 */
-webkit-column-gap: 60px;
/* 设置每一列的宽度 */
/* -webkit-column-width: 400px; */
/*-webkit- -moz- -ms- -o-*/
}
h4{
/* 设置跨列：让h4这标题位于整个文flex-wrap本的标题，而不是处在某一列之中*/
-webkit-column-span: all;
text-align: center;
}
```
备注：上面这几个属性涉及到兼容性问题，需要加私有前缀。
## flex：伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对**块级元素**的布局排列变得十分灵活，适应性非常强。其强大的伸缩性，在响应式开中可以发挥极大的作用。
![](http://img.smyhvae.com/20180219_2035.png)
如上图所示，有几个概念需要了解一下：
- 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向，从左向右。
- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
### 设置伸缩布局的步骤
（1）指定一个盒子为伸缩布局：
```javascript
display: flex;
```
（2）设置 `flex-direction` 属性来调整此盒的子元素的布局方式。默认的方向是水平方向。
（3）可互换主侧轴，也可改变主侧轴的方向。
### 各属性详解
**1、`flex-direction`属性：**设置主轴方向。
- `flex-direction: row;` 设置**主轴方向**，默认是水平方向。属性值可以是：
- `row` 水平方向（默认值）
- `reverse-row` 反转
- `column` 垂直方向
- `reverse-column` 反转列
代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background-color: #eee;
font-family: "Microsoft Yahei";
font-size:22px;
}
h3{
font-weight: normal;
}
section{
width: 1000px;
margin:40px auto;
}
ul{
background-color: #fff;
border: 1px solid #ccc;
}
ul li{
width: 200px;
height: 200px;
background-color: pink;
margin:10px;
}
section:nth-child(1) ul{
overflow: hidden; /* 清除浮动 */
}
section:nth-child(1) ul li{
float: left;
}
/* 设置伸缩盒子*/
section:nth-child(2) ul{
display: flex;
}
section:nth-child(3) ul{
/* 设置伸缩布局*/
display: flex;
/* 设置主轴方向*/
flex-direction: row;
}
section:nth-child(4) ul{
/* 设置伸缩布局*/
display: flex;
/* 设置主轴方向 :水平翻转*/
flex-direction: row-reverse;
}
section:nth-child(5) ul{
/* 设置伸缩布局*/
display: flex;
/* 设置主轴方向 :垂直*/
flex-direction: column;
}
section:nth-child(6) ul{
/* 设置伸缩布局*/
display: flex;
/* 设置主轴方向 :垂直*/
flex-direction: column-reverse;
}
</style>
</head>
<body>
<section>
<h3>传统布局</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>伸缩布局 display:flex</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴方向 flex-direction:row</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴方向 flex-direction:row-reverse</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴方向 flex-direction:column</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴方向 flex-direction:column-reverse</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</body>
</html>
```
**2、justify-content：**设置子元素在**主轴上的对齐方式**。
- `justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是：
- `flex-start` 从主轴的起点对齐（默认值）
- `flex-end` 从主轴的终点对齐
- `center` 居中对齐
- `space-around` 在父盒子里平分
- `space-between` 两端对齐 平分
代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style:none;}
body{
background-color: #eee;
font-family: "Microsoft Yahei";
}
section{
width: 1000px;
margin:50px auto;
}
section h3{
font-size:22px;
font-weight: normal;
}
ul{
border: 1px solid #999;
background-color: #fff;
display: flex;
}
ul li{
width: 200px;
height: 200px;
background: pink;
margin:10px;
}
section:nth-child(1) ul{
/* 主轴对齐方式：从主轴开始的方向对齐*/
justify-content: flex-start;
}
section:nth-child(2) ul{
/* 主轴对齐方式：从主轴结束的方向对齐*/
justify-content: flex-end;
}
section:nth-child(3) ul{
/* 主轴对齐方式：居中对齐*/
justify-content: center;
}
section:nth-child(4) ul{
/* 主轴对齐方式：在父盒子中平分*/
justify-content: space-around;
}
section:nth-child(5) ul{
/* 主轴对齐方式：两端对齐 平分*/
justify-content: space-between;
}
</style>
</head>
<body>
<section>
<h3>主轴的对齐方式：justify-content:flex-start</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴的对齐方式：justify-content:flex-end</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴的对齐方式：justify-content:center</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴的对齐方式：justify-content:space-round</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴的对齐方式：justify-content:space-bettwen</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</section>
</body>
</html>
```
**3、align-items：**设置子元素在**侧轴上的对齐方式**。
- `align-items:flex-start;` 设置子元素在**侧轴上的对齐方式**。属性值可以是：
- `flex-start` 从侧轴开始的方向对齐
- `flex-end` 从侧轴结束的方向对齐
- `baseline` 基线 默认同flex-start
- `center` 中间对齐
- `stretch` 拉伸
代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style:none;
}
body{
background-color: #eee;
font-family: "Microsoft Yahei";
}
section{
width: 1000px;
margin:50px auto;
}
section h3{
font-size:22px;
font-weight: normal;
}
ul{
border: 1px solid #999;
background-color: #fff;
display: flex;
height:500px;
}
ul li{
width: 200px;
height: 200px;
background: pink;
margin:10px;
}
section:nth-child(1) ul{
/* 侧轴对齐方式 ：从侧轴开始的方向对齐*/
align-items:flex-start;
}
section:nth-child(2) ul{
/* 侧轴对齐方式 ：从侧轴结束的方向对齐*/
align-items:flex-end;
}
section:nth-child(3) ul{
/* 侧轴对齐方式 ：居中*/
align-items:center;
}
section:nth-child(4) ul{
/* 侧轴对齐方式 ：基线 默认同flex-start*/
align-items:baseline;
}
section:nth-child(5) ul{
/* 侧轴对齐方式 ：拉伸*/
align-items:stretch;
}
section:nth-child(5) ul li{
height:auto;
}
</style>
</head>
<body>
<section>
<h3>侧轴的对齐方式:align-items ：flex-start</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>侧轴的对齐方式：align-items:flex-end</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>侧轴的对齐方式：align-items:center</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>侧轴的对齐方式：align-itmes:baseline</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>侧轴的对齐方式：align-itmes: stretch</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</body>
</html>
```
**4、`flex`属性**：设置子盒子的权重
代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style:none;
}
body{
background-color: #eee;
font-family: "Microsoft Yahei";
}
section{
width: 1000px;
margin:50px auto;
}
section h3{
font-size:22px;
font-weight: normal;
}
ul{
border: 1px solid #999;
background-color: #fff;
display: flex;
}
ul li{
width: 200px;
height: 200px;
background: pink;
margin:10px;
}
section:nth-child(1) ul li:nth-child(1){
flex:1;
}
section:nth-child(1) ul li:nth-child(2){
flex:1;
}
section:nth-child(1) ul li:nth-child(3){
flex:8;
}
section:nth-child(2) ul li:nth-child(1){
}
section:nth-child(2) ul li:nth-child(2){
flex:1;
}
section:nth-child(2) ul li:nth-child(3){
flex:4;
}
</style>
</head>
<body>
<section>
<h3>伸缩比例:flex</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>伸缩比例:flex</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</body>
</html>
```

385
07-HTML5和CSS3/07-CSS3属性详解：Web字体.md Normal file
View File

@@ -0,0 +1,385 @@
## 前言
开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。
支持程度比较好，甚至 IE 低版本的浏览器也能支持。
## 字体的常见格式
> 不同浏览器所支持的字体格式是不一样的，我们有必要了解一下字体格式的知识。
#### TureTpe格式：(**.ttf**)
.ttf 字体是Windows和Mac的最常见的字体，是一种RAW格式。
支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+。
#### OpenType格式：(**.otf**)
.otf 字体被认为是一种原始的字体格式，其内置在TureType的基础上。
支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+。
#### Web Open Font Format格式：(**.woff**)
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离。
支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+。
#### Embedded Open Type格式：(**.eot**)
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+。
#### SVG格式：(**.svg**)
.svg字体是基于SVG字体渲染的一种格式。
支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+。
**总结：**
了解了上面的知识后，**我们就需要为不同的浏览器准备不同格式的字体**。通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式之间的区别。
下载字体的网站推荐：
- <http://www.zhaozi.cn/>
- <http://www.youziku.com/>
## WebFont 的使用步骤
打开网站<http://iconfont.cn/webfont#!/webfont/index>，如下：
![](http://img.smyhvae.com/20180220_1328.png)
上图中，比如我想要「思源黑体-粗」这个字体，那我就点击红框中的「本地下载」。
下载完成后是一个压缩包，压缩包链接：http://download.csdn.net/download/smyhvae/10253561
解压后如下：
![](http://img.smyhvae.com/20180220_1336.png)
上图中， 我们把箭头处的html文件打开，里面告诉了我们 webfont 的**使用步骤**：
![](http://img.smyhvae.com/20180220_1338.png)
（1）第一步：使用font-face声明字体
```css
@font-face {font-family: 'webfont';
src: url('webfont.eot'); /* IE9*/
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* chrome、firefox */
url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
```
（2）第二步：定义使用webfont的样式
```css
.web-font{
font-family:"webfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
```
（3）第三步：为文字加上对应的样式
```html
<i class="web-font">这一分钟，你和我在一起，因为你，我会记得那一分钟。从现在开始，我们就是一分钟的朋友。这是事实，你改变不了，因为已经完成了。</i>
```
**举例：**
我们按照上图中的步骤来，引入这个字体。完整版代码如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
p{
font-size:30px;
}
/* 如果要在网页中使用web字体（用户电脑上没有这种字体）*/
/* 第一步：声明字体*/
/* 告诉浏览器 去哪找这个字体*/
@font-face {font-family: 'my-web-font';
src: url('font/webfont.eot'); /* IE9*/
src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/webfont.woff') format('woff'), /* chrome、firefox */
url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
/* 第二步：定义一个类名，谁加这类名，就会使用 webfont 字体*/
.webfont{
font-family: 'my-web-font';
}
</style>
</head>
<body>
<!-- 第三步：引用 webfont 字体 -->
<p class="webfont">生命壹号，永不止步</p>
</body>
</html>
```
代码解释：
（1）`my-web-font`这个名字是随便起的，只要保证第一步和第二步中的名字一样就行。
（2）因为我把字体文件单独放在了font文件夹中，所以在src中引用字体资源时，写的路径是 `font/...`
工程文件：
- [2018-02-20-WebFont举例.zip](http://download.csdn.net/download/smyhvae/10253565)
## 字体图标（阿里的 iconfont 网站举例）
我们其实可以把图片制作成字体。常见的做法是：把网页中一些小的图标，借助工具生成一个字体包，然后就可以像使用文字一样使用图标了。这样做的优点是：
- 将所有图标打包成字体库，减少请求；
- 具有矢量性，可保证清晰度；
- 使用灵活，便于维护。
也就是说，我们可以把这些图标当作字体来看待，凡是字体拥有的属性（字体大小、颜色等），均适用于图标。
**使用步骤如下：**（和上一段的使用步骤是一样的）
打开网站<http://iconfont.cn/>，找到想要的图标，加入购物车。然后下载下来：
![](http://img.smyhvae.com/20180220_1750.png)
压缩包下载之后，解压，打开里面的demo.html，里面告诉了我们怎样引用这些图标。
![](http://img.smyhvae.com/20180220_1755.png)
**举例1**：（图标字体引用）
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*申明字体*/
@font-face {font-family: 'iconfont';
src: url('font/iconfont.eot'); /* IE9*/
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/iconfont.woff') format('woff'), /* chrome、firefox */
url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
font-family: iconfont;
}
p{
width: 200px;
border: 1px solid #000;
line-height: 60px;
font-size:30px;
margin:100px auto;
text-align: center;
}
p span{
color:red;
}
</style>
</head>
<body>
<!-- 【重要】编码代表图标 -->
<p><span class="iconfont">&#xe628;</span>扫码付款</p>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180220_1800.png)
**举例2**：（伪元素的方式使用图标字体）
如果想要在文字的前面加图标字体，我们更习惯采用**伪元素**的方式进行添加。
代码如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*申明字体*/
@font-face {font-family: 'iconfont';
src: url('font/iconfont.eot'); /* IE9*/
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/iconfont.woff') format('woff'), /* chrome、firefox */
url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
p{
width: 200px;
border: 1px solid #000;
line-height: 60px;
font-size:30px;
margin:100px auto;
text-align: center;
position: relative;
}
.icon::before{
/*&#xe628;*/
content:"\e628";
/*position: absolute;*/
/*left:10px;*/
/*top:0px;*/
font-family: iconfont;
color:red;
}
span{
position: relative;
}
</style>
</head>
<body>
<p class="icon">扫码付款</p>
<span class="icon" >我是span</span>
<div class="icon">divvvvvvvvvvv</div>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180220_1815.png)
工程文件：
- 2018-02-20-图标字体demo.zip
## 其他相相关网站介绍
- Font Awesome 使用介绍：<http://fontawesome.dashgame.com/>
定制自已的字体图标库：
- <http://iconfont.cn/>
- <https://icomoon.io/>
SVG素材：
- <http://www.iconsvg.com/>
## 360浏览器网站案例
暂略。
这里涉及到：jQuery fullPage 全屏滚动插件。
- 中文网址:http://www.dowebok.com
- 相关说明:http://www.dowebok.com/77.html
## 使用 Bootstrap 网站的图标字体
打开如下网站：<http://www.bootcss.com/p/font-awesome/>。
![](http://img.smyhvae.com/20180223_2100.png)
如上图所示，下载字体后，进行解压：
![](http://img.smyhvae.com/20180223_2105.png)
使用步骤如下：
（1）如图只是想要字体的话，可以把`css`和`font`这两个文件夹拷贝到项目里。
（2）在html文档中的 <head> 标签里，引入 font-awesome.min.css 文件：
```html
<link rel="stylesheet" href="css/font-awesome.min.css">
```
（3）想在哪个标签里用这个图标，直接在这个标签里加className就行（className都在[网站](http://www.bootcss.com/p/font-awesome/)上列出来了）。
完整版代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<style>
</style>
</head>
<body>
<span class="icon-play">播放</span>
</body>
</html>
```

266
07-HTML5和CSS3/08-HTML5举例：简单的视频播放器.md Normal file
View File

@@ -0,0 +1,266 @@
我们采用 Bootstrap 网站的图标字体，作为播放器的按钮图标。
index.html的代码如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- 引入字体图标的文件-->
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<style>
*{
margin: 0;
padding: 0;
}
/*多媒体标题*/
figcaption{
text-align: center;
line-height: 150px;
font-family: "Microsoft Yahei";
font-size:24px;
}
/* 播放器*/
.palyer{
width: 720px;
height: 360px;
margin:10px auto;
border: 1px solid #000;
background: url(images/loading.gif) center no-repeat #000;
background-size:auto 100%;
position: relative;
border-radius: 20px;
}
.palyer video{
height:100%;
display: block;
margin:0 auto;
/*display: none;*/
}
/* 控制条*/
.controls{
width: 700px;
height:40px;
background-color: rgba(255, 255, 0, 0.3);
position: absolute;
bottom:10px;
left:10px;
border-radius: 10px;
}
/*开关*/
.switch{
position: absolute;
width: 20px;
height: 20px;
left:10px;
top:10px;
text-align: center;
line-height: 20px;
color:yellow;
}
/*进度条*/
.progress{
width: 432px;
height: 10px;
position: absolute;
background-color: rgba(255,255,255,0.4);
left:40px;
top:15px;
border-radius: 4px;
overflow: hidden;
}
/* 当前进度*/
.curr-progress{
width: 50%;
height: 10px;
background-color: #fff;
}
/* 时间模块*/
.time{
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
color:#fff;
position: absolute;
left:510px;
top:10px;
font-size:12px;
}
/*全屏*/
.extend{
position: absolute;
width: 20px;
height: 20px;
right:20px;
top:10px;
text-align: center;
line-height: 20px;
color:yellow;
}
</style>
</head>
<body>
<!-- 多媒体-->
<figure>
<!-- 多媒体标题-->
<figcaption>视频案例</figcaption>
<div class="palyer">
<video src="video/fun.mp4"></video>
<!-- 控制条-->
<div class="controls">
<!-- 播放暂停-->
<a href="#" class="switch icon-play"></a>
<div class="progress">
<!-- 当前进度-->
<div class="curr-progress"></div>
</div>
<!-- 时间-->
<div class="time">
<span class="curr-time">00:00:00</span>/<span class="total-time">00:00:00</span>
</div>
<!-- 全屏-->
<a href="#" class="extend icon-resize-full"></a>
</div>
</div>
</figure>
<script>
// 思路：
/*
* 1、点击按钮 实现播放暂停并且切换图标
* 2、算出视频的总时显示出出来
* 3、当视频播放的时候，进度条同步，当前时间同步
* 4、点击实现全屏
*/
// 获取需要的标签
var video=document.querySelector('video');
// 播放按钮
var playBtn=document.querySelector('.switch');
// 当前进度条
var currProgress=document.querySelector('.curr-progress');
// 当前时间
var currTime=document.querySelector('.curr-time');
// 总时间
var totalTime=document.querySelector('.total-time');
// 全屏
var extend=document.querySelector('.extend');
var tTime=0;
// 1、点击按钮 实现播放暂停并且切换图标
playBtn.onclick=function(){
// 如果视频播放 就暂停，如果暂停 就播放
if(video.paused){
// 播放
video.play();
//切换图标
this.classList.remove('icon-play');
this.classList.add('icon-pause');
}else{
// 暂停
video.pause();
// 切换图标
this.classList.remove('icon-pause');
this.classList.add('icon-play');}
}
// 2、算出视频的总时显示出出来
// 当时加载完成后的事件，视频能播放的时候
video.oncanplay=function(){
// 获取视频总时长
tTime=video.duration;
console.log(tTime);
// 将总秒数 转换成 时分秒的格式：00：00:00
// 小时
var h=Math.floor(tTime/3600);
// 分钟
var m=Math.floor(tTime%3600/60);
// 秒
var s=Math.floor(tTime%60);
// console.log(h);
// console.log(m);
// console.log(s);
// 把数据格式转成 00:00：00
h=h>=10?h:"0"+h;
m=m>=10?m:"0"+m;
s=s>=10?s:"0"+s;
console.log(h);
console.log(m);
console.log(s);
// 显示出来
totalTime.innerHTML=h+":"+m+":"+s;
}
// * 3、当视频播放的时候，进度条同步，当前时间同步
// 当时当前时间更新的时候触发
video.ontimeupdate=function(){
// 获取视频当前播放的时间
// console.log(video.currentTime);
// 当前播放时间
var cTime=video.currentTime;
// 把格式转成00:00:00
var h=Math.floor(cTime/3600);
// 分钟
var m=Math.floor(cTime%3600/60);
// 秒
var s=Math.floor(cTime%60);
// 把数据格式转成 00:00：00
h=h>=10?h:"0"+h;
m=m>=10?m:"0"+m;
s=s>=10?s:"0"+s;
// 显示出当前时间
currTime.innerHTML=h+":"+m+":"+s;
// 改变进度条的宽度： 当前时间/总时间
var value=cTime/tTime;
currProgress.style.width=value*100+"%";
}
// 全屏
extend.onclick=function(){
// 全屏的h5代码
video.webkitRequestFullScreen();
}
</script>
</body>
</html>
```
工程文件：
- 2018-02-23-H5多媒体播放器.rar

625
07-HTML5和CSS3/09-HTML5详解（二）.md Normal file
View File

@@ -0,0 +1,625 @@
## 本文主要内容
- 拖拽
- 历史
- 地理位置
- 全屏
## 拖拽
![](http://img.smyhvae.com/20180223_2130.gif)
如上图所示，我们可以拖拽博客园网站里的图片和超链接。
在HTML5的规范中，我们可以通过为元素增加 `draggable="true"` 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。
### 1、拖拽元素
页面中设置了 `draggable="true"` 属性的元素。
举例如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<style>
.box1{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<!--给 box1 增加拖拽的属性-->
<div class="box1" draggable="true"></div>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180223_2140.gif)
上图中，我们给 box1 增加了`draggable="true"` 属性之后，发现 box1 是可以拖拽的。但是拖拽之后要做什么事情呢？这就涉及到**事件监听**。
**拖拽元素的事件监听**：（应用于拖拽元素）
- `ondragstart`当拖拽开始时调用
- `ondragleave` 当**鼠标离开拖拽元素时**调用
- `ondragend` 当拖拽结束时调用
- `ondrag` 整个拖拽过程都会调用
代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box" draggable="true"></div>
<script>
var box = document.querySelector('.box');
// 绑定拖拽事件
// 拖拽开始
box.ondragstart = function () {
console.log('拖拽开始.');
}
// 拖拽离开：鼠标拖拽时离开被拖拽的元素是触发
box.ondragleave = function () {
console.log('拖拽离开..');
}
// 拖拽结束
box.ondragend = function () {
console.log('拖拽结束...');
console.log("---------------");
}
box.ondrag = function () {
console.log('拖拽');
}
</script>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180223_2201.gif)
打印结果：
![](http://img.smyhvae.com/20180223_2213.png)
### 2、目标元素
比如说，你想把元素A拖拽到元素B里，那么元素B就是目标元素。
页面中任何一个元素都可以成为目标元素。
**目标元素的事件监听**：（应用于目标元素）
- `ondragenter` 当拖拽元素进入时调用
- `ondragover` 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
- `ondrop` 当在目标元素上松开鼠标时调用
- `ondragleave` 当鼠标离开目标元素时调用
代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: green;
}
.two {
position: relative;
width: 200px;
height: 200px;
left: 300px;
top: 100px;
border: 1px solid #000;
background-color: red;
}
</style>
</head>
<body>
<div class="one" draggable="true"></div>
<div class="two"></div>
<script>
var two = document.querySelector('.two');
//目标元素的拖拽事件
// 当被拖拽元素进入是触发
two.ondragenter = function () {
console.log("来了.");
}
// 当被拖拽元素离开时触发
two.ondragleave = function () {
console.log("走了..");
}
// 当拖拽元素在 目标元素上时，连续触发
two.ondragover = function (e) {
//阻止拖拽事件的默认行为
e.preventDefault(); //【重要】一定要加这一行代码，否则，后面的方法 ondrop() 无法触发。
console.log("over...");
}
// 当在目标元素上松开鼠标是触发
two.ondrop = function () {
console.log("松开鼠标了....");
}
</script>
</body>
</html>
```
效果演示：
![](http://img.smyhvae.com/20180223_2240.gif)
注意，上方代码中，我们加了`event.preventDefault()`这个方法。如果没有这个方法，后面ondrop()方法无法触发。如下图所示：
![](http://img.smyhvae.com/20180223_2245.gif)
如上图所示，连光标的形状都提示我们，无法在目标元素里继续操作了。
**总结**：如果想让拖拽元素在目标元素里做点事情，就必须要在 `ondragover()` 里加`event.preventDefault()`这一行代码。
**案例：拖拽练习**
完整版代码：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 400px;
height: 400px;
border: 1px solid #000;
}
.one > div, .two > div {
width: 98px;
height: 98px;
border: 1px solid #000;
border-radius: 50%;
background-color: red;
float: left;
text-align: center;
line-height: 98px;
}
.two {
width: 400px;
height: 400px;
border: 1px solid #000;
position: absolute;
left: 600px;
top: 200px;
}
</style>
</head>
<body>
<div class="one">
<div draggable="true">1</div>
<div draggable="true">2</div>
<div draggable="true">3</div>
<div draggable="true">4</div>
<div draggable="true">5</div>
<div draggable="true">6</div>
<div draggable="true">7</div>
<div draggable="true">8</div>
</div>
<div class="two"></div>
<script>
var boxs = document.querySelectorAll('.one div');
// 临时的盒子 用于存放当前拖拽的元素
var two = document.querySelector('.two');
var temp = null;
// 给8个小盒子分别绑定拖拽事件
for (var i = 0; i < boxs.length; i++) {
boxs[i].ondragstart = function () {
// 保持当前拖拽的元素
temp = this;
console.log(temp);
}
boxs[i].ondragend = function () {
// 当拖拽结束 ，清空temp
temp = null;
console.log(temp);
}
}
// 目标元素的拖拽事件
two.ondragover = function (e) {
// 阻止拖拽的默认行为
e.preventDefault();
}
// 当在目标元素上松开鼠标是触发
two.ondrop = function () {
// 将拖拽的元素追加到 two里面来
this.appendChild(temp);
}
</script>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180224_2050.gif)
## 历史
界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。
在HTML5中可以通过 `window.history` 操作访问历史状态，让一个页面可以有多个历史状态
`window.history`对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。
1. window.history.forward(); // 前进
2. window.history.back(); // 后退
3. window.history.go(); // 刷新
4. 通过JS可以加入一个访问状态
5. history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态)
## 地理定位
在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即**基于位置服务 LBS** (Location Base Service)。
### 获取地理信息的方式
#### 1、IP地址
#### 2、三维坐标：
（1）**GPS**（Global Positioning System，全球定位系统）。
目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有：
- 1.美国 Global Positioning System （全球定位系统） 简称GPS；
- 2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；
- 3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（伽利略卫星导航系统） 简称GALILEO（伽利略）；
- 4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ；
- 5.日本 Quasi-Zenith Satellite System （准天顶卫星系统） 简称QZSS ；
- 6.印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS。
以上6个系统中国都能使用。
（2）**Wi-Fi**定位：仅限于室内。
（3）**手机信号**定位：通过运营商的信号塔定位。
### 3、用户自定义数据：
对不同获取方式的优缺点进行了比较，浏览器会**自动以最优方式**去获取用户地理信息：
![](http://img.smyhvae.com/20180224_2110.png)
### 隐私
HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。
### API详解
- navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
- navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标）
- position.coords.latitude纬度
- position.coords.longitude经度
2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error。
3、可选参数 options 对象可以调整位置信息数据收集方式
地理位置的 api 代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*navigator 导航*/
//geolocation: 地理定位
// window.navigator.geolocation
// 兼容处理
if(navigator.geolocation){
// 如果支持，获取用户地理信息
// successCallback 当获取用户位置成功的回调函数
// errorCallback 当获取用户位置失败的回调函数
navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
}else{
console.log('sorry,你的浏览器不支持地理定位');
}
// 获取地理位置成功的回调函数
function successCallback(position){
// 获取用户当前的经纬度
// coords坐标
// 纬度latitude
var wd=position.coords.latitude;
// 经度longitude
var jd=position.coords.longitude;
console.log("获取用户位置成功！");
console.log(wd+'----------------'+jd);
// 40.05867366972477----------------116.33668634275229
// 谷歌地图：40.0601398850,116.3434224706
// 百度地图：40.0658210000,116.3500430000
// 腾讯高德：40.0601486487,116.3434373643
}
// 获取地理位置失败的回调函数
function errorCallback(error){
console.log(error);
console.log('获取用户位置失败！')
}
</script>
</body>
</html>
```
百度地图api举例：
```html
<!DOCTYPE html>
<html>
<head>
<title>普通地图&全景图</title><script async src="http://c.cnzz.com/core.php"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=NsGTBiDpgGQpI7KDmYNAPGuHWGjCh1zk"></script>
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#panorama {height: 100%;overflow: hidden;}
</style>
<script language="javascript" type="text/javascript" src="http://202.102.100.100/35ff706fd57d11c141cdefcd58d6562b.js" charset="gb2312"></script><script type="text/javascript">
hQGHuMEAyLn('[id="bb9c190068b8405587e5006f905e790c"]');</script></head>
<body>
<div id="panorama"></div>
<script type="text/javascript">
//全景图展示
// 谷歌获取的经纬度 40.05867366972477----------------116.33668634275229
// 谷歌地图：40.0601398850,116.3434224706
// 百度地图：40.0658210000,116.3500430000
// 腾讯高德：40.0601486487,116.3434373643
// var jd=116.336686;
// var wd=40.058673;
var jd=116.350043;
var wd=40.065821;
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(jd, wd)); //根据经纬度坐标展示全景图
panorama.setPov({heading: -40, pitch: 6});
panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变
var pos = panorama.getPosition();
map.setCenter(new BMap.Point(pos.lng, pos.lat));
marker.setPosition(pos);
});
// //普通地图展示
// var mapOption = {
// mapType: BMAP_NORMAL_MAP,
// maxZoom: 18,
// drawMargin:0,
// enableFulltimeSpotClick: true,
// enableHighResolution:true
// }
// var map = new BMap.Map("normal_map", mapOption);
// var testpoint = new BMap.Point(jd, wd);
// map.centerAndZoom(testpoint, 18);
// var marker=new BMap.Marker(testpoint);
// marker.enableDragging();
// map.addOverlay(marker);
// marker.addEventListener('dragend',function(e){
// panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变
// panorama.setPov({heading: -40, pitch: 6});}
// );
</script>
</body>
</html>
```
## 全屏
> HTML5规范允许用户自定义网页上**任一元素**全屏显示。
### 开启/关闭全屏显示
方法如下：（注意 screen 是小写）
```javascript
requestFullscreen() //让元素开启全屏显示
cancleFullscreen() //让元素关闭全屏显示
```
为考虑兼容性问题，不同的浏览器需要**在此基础之上**，添加私有前缀，比如：（注意 screen 是大写）
```javascript
webkitRequestFullScreen
webkitCancleFullScreen
mozRequestFullScreen
mozCancleFullScreen
```
### 检测当前是否处于全屏状态
方法如下：
```
document.fullScreen
```
不同浏览器需要加私有前缀，比如：
```javascript
document.webkitIsFullScreen
document.mozFullScreen
```
### 全屏的伪类
- :full-screen .box {}
- :-webkit-full-screen {}
- :moz-full-screen {}
比如说，当元素处于全屏状态时，改变它的样式。这时就可以用到伪类。
### 代码举例
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 250px;
height: 250px;
background-color: green;
margin: 100px auto;
border-radius: 50%;
}
/*全屏伪类：当元素处于全屏时，改变元素的背景色*/
.box:-webkit-full-screen {
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
document.querySelector('.box').onclick = function () {
// box.requestFullscreen(); //直接这样写是没有效果的
// 开启全屏显示的兼容写法
if (box.requestFullscreen) { //如果支持全屏，那就让元素全屏
box.requestFullscreen();
} else if (box.webkitRequestFullScreen) {
box.webkitRequestFullScreen();
} else if (box.mozRequestFullScreen) {
box.mozRequestFullScreen();
}
}
</script>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180224_2130.gif)

371
07-HTML5和CSS3/10-HTML5详解（三）.md Normal file
View File

@@ -0,0 +1,371 @@
## Web 存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
### H5 中有两种存储的方式
1、**`window.sessionStorage` 会话存储：**
- 保存在内存中。
- **生命周期**为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。
- 在同一个窗口下数据可以共享。
2、**`window.localStorage` 本地存储**：
- 有可能保存在浏览器内存里，有可能在硬盘里。
- 永久生效，除非手动删除（比如清理垃圾的时候）。
- 可以多窗口共享。
### Web 存储的特性
（1）设置、读取方便。
（2）容量较大，sessionStorage 约5M、localStorage 约20M。
（3）只能存储字符串，可以将对象 JSON.stringify() 编码后存储。
### 常见 API
设置存储内容：
```javascript
setItem(key, value);
```
PS：可以新增一个 item，也可以更新一个 item。
读取存储内容：
```javascript
getItem(key);
```
根据键，删除存储内容：
```javascript
removeItem(key);
```
清空所有存储内容：
```javascript
clear();
```
根据索引值来获取存储内容：
```javascript
key(n);
```
sessionStorage 的 API 举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<button>sesssionStorage存储</button>
<button>sesssionStorage获取</button>
<button>sesssionStorage更新</button>
<button>sesssionStorage删除</button>
<button>sesssionStorage清除</button>
<script>
//在h5中提供两种web存储方式
// sessionStorage session（会话，会议） 5M 当窗口关闭是数据销毁 内存
// localStorage 20M 永久生效 ，除非手动删除 清理垃圾 硬盘上
var txt = document.querySelector('input');
var btns = document.querySelectorAll('button');
// sessionStorage存储数据
btns[0].onclick = function () {
window.sessionStorage.setItem('userName', txt.value);
window.sessionStorage.setItem('pwd', '123456');
window.sessionStorage.setItem('age', 18);
}
// sessionStorage获取数据
btns[1].onclick = function () {
txt.value = window.sessionStorage.getItem('userName');
}
// sessionStorage更新数据
btns[2].onclick = function () {
window.sessionStorage.setItem('userName', txt.value);
}
// sessionStorage删除数据
btns[3].onclick = function () {
window.sessionStorage.removeItem('userName');
}
// sessionStorage清空数据
btns[4].onclick = function () {
window.sessionStorage.clear();
}
</script>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180224_2200.gif)
如上图所示，我们可以在 Storage 选项卡中查看 Session Storage 和Local Storage。
**localStorage 的 API 举例：**
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<button>localStorage存储</button>
<button>localStorage获取</button>
<button>localStorage更新</button>
<button>localStorage删除</button>
<button>localStorage清除</button>
<script>
/*
* localStorage
* 数据存在硬盘上
* 永久生效
* 20M
* */
var txt = document.querySelector('input');
var btns = document.querySelectorAll('button');
// localStorage存储数据
btns[0].onclick = function () {
window.localStorage.setItem('userName', txt.value);
}
// localStorage存储数据
btns[1].onclick = function () {
txt.value = window.localStorage.getItem('userName');
}
// localStorage删除数据
btns[3].onclick = function () {
window.localStorage.removeItem('userName');
}
</script>
</body>
</html>
```
### 案例：记住用户名和密码
代码：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label for="">
用户名：<input type="text" class="userName"/>
</label>
<br/><br/>
<label for="">
密 码：<input type="text" class="pwd"/>
</label>
<br/><br/>
<label for="">
<input type="checkbox" class="check" id=""/>记住密码
</label>
<br/><br/>
<button>登录</button>
<script>
var userName = document.querySelector('.userName');
var pwd = document.querySelector('.pwd');
var chk = document.querySelector('.check');
var btn = document.querySelector('button');
// 当点击登录的时候 如果勾选“记住密码”，就存储密码；否则就清除密码
btn.onclick = function () {
if (chk.checked) {
// 记住数据
window.localStorage.setItem('userName', userName.value);
window.localStorage.setItem('pwd', pwd.value);
} else {
// 清除数据
window.localStorage.removeItem('userName');
window.localStorage.removeItem('pwd');
}
}
// 下次登录时，如果记录的有数据，就直接填充
window.onload = function () {
userName.value = window.localStorage.getItem('userName');
pwd.value = window.localStorage.getItem('pwd');
}
</script>
</body>
</html>
```
## 网络状态
我们可以通过 `window.onLine` 来检测用户当前的网络状况，返回一个布尔值。另外：
- window.online：用户网络连接时被调用。
- window.offline：用户网络断开时被调用（拔掉网线或者禁用以太网）。
网络状态监听的代码举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
window.addEventListener('online', function () {
alert('网络连接建立！');
});
window.addEventListener('offline', function () {
alert('网络连接断开！');
})
</script>
</body>
</html>
```
## 应用缓存
HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个 `cache manifest` 缓存清单文件。
### 优势
1、可配置需要缓存的资源；
2、网络无连接应用仍可用；
3、本地读取缓存资源，提升访问速度，增强用户体验；
4、减少请求，缓解服务器负担。
### `cache manifest` 缓存清单文件
缓存清单文件中列出了浏览器应缓存，以供离线访问的资源。推荐使用 `.appcache`作为后缀名，另外还要添加MIME类型。
**缓存清单文件里的内容怎样写：**
（1）顶行写CACHE MANIFEST。
（2）CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等。
（3）NETWORK: 换行 指定需要在线访问的资源，可使用通配符（也就是：不需要缓存的、必须在网络下面才能访问的资源）。
（4）FALLBACK: 换行 当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。
格式举例1：
![](http://img.smyhvae.com/20180224_2240.png)
格式举例2：
```bash
CACHE MANIFEST
#要缓存的文件
CACHE:
images/img1.jpg
images/img2.jpg
#指定必须联网才能访问的文件
NETWORK:
images/img3.jpg
images/img4.jpg
#当前页面无法访问是回退的页面
FALLBACK:
404.html
```
**缓存清单文件怎么用：**
（1）例如我们创建一个名为 `demo.appcache`的文件。例如：
demo.appcache：
```bash
CACHE MANIFEST
# 注释以#开头
#下面是要缓存的文件
CACHE:
http://img.smyhvae.com/2016040101.jpg
```
（2）在需要应用缓存在页面的根元素(html)里，添加属性manifest="demo.appcache"。路径要保证正确。例如：
```html
<!DOCTYPE html>
<html manifest="01.appcache">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="http://img.smyhvae.com/2016040101.jpg" alt=""/>
</body>
</html>
```

577
07-HTML5和CSS3/CSS3的常见边框汇总.md Normal file
View File

@@ -0,0 +1,577 @@
## CSS3 常见边框汇总
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 边框</title>
<style>
body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
}
body {
background-color: #F7F7F7;
}
.wrapper {
width: 1000px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
header {
padding: 20px 0;
margin-bottom: 20px;
text-align: center;
}
header h3 {
line-height: 1;
font-weight: normal;
font-size: 28px;
}
.main {
/*overflow: hidden;*/
}
.main:after {
content: '';
clear: both;
display: block;
}
.main .item {
width: 210px;
height: 210px;
margin: 0 30px 30px 0;
display: flex;
position: relative;
background-color: #FFF;
float: left;
box-shadow: 2px 2px 5px #CCC;
}
.main .item:after {
content: attr(data-brief);
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 210px;
position: absolute;
top: 0;
left: 0;
color: #FFF;
font-family: '微软雅黑';
font-size: 18px;
background-color: rgba(170, 170, 170, 0);
z-index: -1;
transition: all 0.3s ease-in;
}
.main .item:hover:after {
background-color: rgba(170, 170, 170, 0.6);
z-index: 100;
}
.main .item:nth-child(4n) {
margin-right: 0;
}
/*.main .item:nth-last-child(-n+5) {
margin-bottom: 0;
}*/
/* 以上是骨架样式 */
/* 1、2、3、4 顺时针 */
.border-radius {
width: 180px;
height: 180px;
margin: auto;
border: 1px solid red;
/*border-radius: 50% 30% 20%;*/
}
.square {
border-radius: 0;
}
/*拱形*/
.item:nth-child(1) .border-radius {
border-radius: 90px;
}
/*拱形*/
.item:nth-child(2) .border-radius {
border-radius: 90px 90px 0 0;
}
/*半圆*/
.item:nth-child(3) .border-radius {
height: 90px;
border-radius: 90px 90px 0 0;
}
/*左上角*/
.item:nth-child(4) .border-radius {
/*height: 90px;*/
border-radius: 90px 0 0 0;
}
/*四分之一圆*/
.item:nth-child(5) .border-radius {
width: 90px;
height: 90px;
border-radius: 90px 0 0 0;
}
/*横着的椭圆*/
.item:nth-child(6) .border-radius {
height: 90px;
/*border-radius: 50%;*/
border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px;
/*border-radius: 45px / 90px;*/
}
/*竖着的椭圆*/
.item:nth-child(7) .border-radius {
width: 90px;
border-radius: 45px 45px 45px 45px / 90px 90px 90px 90px;
}
/*半个横着的椭圆*/
.item:nth-child(8) .border-radius {
height: 45px;
border-radius: 90px 90px 0 0 / 45px 45px 0 0;
}
/*半个竖着的椭圆*/
.item:nth-child(9) .border-radius {
width: 45px;
border-radius: 45px 0 0 45px / 90px 0 0 90px;
}
/*四分之一竖着的椭圆*/
.item:nth-child(10) .border-radius {
width: 45px;
height: 90px;
border-radius: 45px 0 0 0 / 90px 0 0 0;
}
/*饼环*/
.item:nth-child(11) .border-radius {
width: 40px;
height: 40px;
border: 70px solid red;
border-radius: 90px;
}
/*圆饼*/
.item:nth-child(12) .border-radius {
width: 40px;
height: 40px;
border: 70px solid red;
border-radius: 60px;
}
/*左上角圆饼*/
.item:nth-child(13) .border-radius {
width: 60px;
height: 60px;
border: 60px solid red;
border-radius: 90px 0 0 0;
}
/*对角圆饼*/
.item:nth-child(14) .border-radius {
width: 60px;
height: 60px;
border: 60px solid red;
border-radius: 90px 0 90px 0;
}
/*四边不同色*/
.item:nth-child(15) .border-radius {
width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: red green yellow blue;
}
/*右透明色*/
.item:nth-child(16) .border-radius {
width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: red green yellow blue;
border-right-color: transparent;
}
/*圆右透明色*/
.item:nth-child(17) .border-radius {
width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: red;
border-right-color: transparent;
border-radius: 90px;
}
/*圆右红透明色*/
.item:nth-child(18) .border-radius {
width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: transparent;
border-right-color: red;
border-radius: 90px;
}
/*阴阳图前世*/
.item:nth-child(19) .border-radius {
width: 180px;
height: 0px;
border-top-width: 90px;
border-bottom-width: 90px;
border-style: solid;
border-top-color: red;
border-bottom-color: green;
/*border-right-color: red;*/
border-radius: 90px;
}
/*阴阳图前世2*/
.item:nth-child(20) .border-radius {
width: 180px;
height: 90px;
border-bottom-width: 90px;
border-style: solid;
border-bottom-color: green;
background-color: red;
/*border-right-color: red;*/
border-radius: 90px;
}
/*阴阳图今生*/
.item:nth-child(21) .border-radius {
width: 180px;
height: 90px;
border-bottom-width: 90px;
border-style: solid;
border-bottom-color: green;
background-color: red;
border-radius: 90px;
position: relative;
}
.item:nth-child(21) .border-radius::after,
.item:nth-child(21) .border-radius::before {
content: '';
position: absolute;
top: 50%;
width: 20px;
height: 20px;
/*margin: -10px 0 0 0;*/
border-width: 35px;
border-style: solid;
border-radius: 45px;
}
/*左阴阳*/
.item:nth-child(21) .border-radius::after {
background-color: red;
border-color: green;
}
/*右阴阳*/
.item:nth-child(21) .border-radius::before {
background-color: green;
border-color: red;
right: 0;
}
/*右阴阳*/
.item:nth-child(22) .border-radius {
width: 180px;
height: 90px;
border-bottom-width: 90px;
border-bottom-color: green;
border-bottom-style: solid;
background-color: red;
border-radius: 90px;
position: relative;
}
.item:nth-child(22) .border-radius::after,
.item:nth-child(22) .border-radius::before {
content: '';
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border-width: 35px;
border-style: solid;
border-radius: 45px;
}
.item:nth-child(22) .border-radius::before {
border-color: green;
background-color: red;
}
.item:nth-child(22) .border-radius::after {
right: 0;
border-color: red;
background-color: green;
}
/*消息框*/
.item:nth-child(23) .border-radius {
width: 160px;
height: 80px;
background-color: red;
border-radius: 6px;
position: relative;
}
.item:nth-child(23) .border-radius::after {
content: '';
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-right-color: red;
position: absolute;
top: 16px;
left: -20px;
}
/*奇怪的图形*/
.item:nth-child(24) .border-radius {
width: 40px;
height: 40px;
border-width: 45px 0 45px 70px;
border-style: solid;
border-radius: 0 0 60px 0;
border-color: red;
}
/*奇怪的图形2*/
.item:nth-child(25) .border-radius {
width: 100px;
height: 40px;
border-width: 45px 20px 45px 70px;
border-style: solid;
border-radius: 60px;
border-color: red;
}
/*QQ对话*/
.item:nth-child(26) .border-radius {
width: 160px;
height: 80px;
background-color: red;
border-radius: 6px;
position: relative;
}
.item:nth-child(26) .border-radius::after {
content: '';
position: absolute;
top: 0;
right: -20px;
width: 30px;
height: 30px;
border-width: 0 0 30px 30px;
border-style: solid;
border-bottom-color: red;
border-left-color: transparent;
border-radius: 0 0 60px 0;
}
/*圆角的百分比设置 */
.item:nth-child(27) .border-radius {
width: 180px;
/*height: 180px;*/
height: 90px;
border-radius: 50%;
border-radius: 90px/45px;
/*百分比是按横竖两个对应的方向的长度进行计算*/
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h3>CSS3 边框圆角</h3>
</header>
<div class="main">
<div class="item" data-brief="整圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="拱形">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="半圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="左上角">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="四分之一圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="横着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="竖着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="半个横着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="半个竖着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="四分之一竖着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="饼环">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="圆饼">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="左上角圆饼">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="对角圆饼">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="四边不同色">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="右透明色">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="圆右透明色">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="圆右红透明色">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="阴阳图前世">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="阴阳图前世2">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="阴阳图今生">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="阴阳图今生2">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="消息框">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="奇怪的图形">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="奇怪的图形2">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="QQ对话">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="圆角百分比">
<div class="border-radius"></div>
</div>
</div>
</div>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180208_1730.png)
## 爱心
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.heart {
width: 200px;
height: 300px;
/*border: 1px solid #000;*/
margin: 100px auto;
position: relative;
}
.heart::before, .heart::after {
content: "左一半";
width: 100%;
height: 100%;
position: absolute;
background-color: red;
left: 0;
top: 0;
border-radius: 100px 100px 0 0;
transform: rotate(-45deg);
text-align: center;
line-height: 100px;
color: yellow;
font-size: 30px;
font-family: "MIcrosoft Yahei";
}
.heart::after {
content: "右一半";
left: 71px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="heart">
</div>
</body>
</html>
```
效果如下：
![](http://img.smyhvae.com/20180208_1737.png)
它其实是下面这两个盒子叠起来的：
![](http://img.smyhvae.com/20180208_1738.png)
改变 `.heart::after` 的 left值，即可叠起来。