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

update

Browse Source
This commit is contained in:
qianguyihao 2018-02-23 12:23:47 +08:00
parent 52581c82ea
commit 566f5b7c4f
5 changed files with 1021 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
08-HTML5和CSS3/04-CSS3属性详解.md → 08-HTML5和CSS3/04-CSS3属性详解（一）.md
View File

73
08-HTML5和CSS3/05-CSS3属性：动画详解.md → 08-HTML5和CSS3/05-CSS3属性详解：动画详解.md
View File

@ -1308,7 +1308,7 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
鱼在原地摆动并不是一张 gif动图，她其实是由很多张静态图间隔地播放，一秒钟播放完毕，就可以了：
20180209_shark.png
![](http://img.smyhvae.com/20180209_shark.png)
上面这张大图的尺寸是：宽 509 px、高 2160 px。
@ -1357,7 +1357,7 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
![](http://img.smyhvae.com/20180209_1250.gif)
我们不妨把上面的动画的持续时间从`1s`改成 `8秒`，就可以看到动画的慢镜头：
我们不妨把上面的动画的持续时间从`1s`改成 `8s`，就可以看到动画的慢镜头：
![](http://img.smyhvae.com/20180209_1330.gif)
@ -1368,11 +1368,80 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
实现的原理也很简单，我们在上一步中已经让`shark`这个盒子实现了原地摇摆，现在，让 shark 所在的父盒子 `sharkBox`向前移动，即可。完整版代码是：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.shark {
width: 509px;
height: 270px; /* 盒子的宽高是一帧的宽高 */
border: 1px solid #000;
margin: 100px auto;
background: url(images/shark.png) left top; /* 让图片一开始位于 0 px的位置 */
animation: sharkRun 1s steps(8) infinite; /* 一秒之内，从顶部移动到底部，分八帧 */
}
/* 鱼所在的父盒子 */
.sharkBox {
width: 509px;
height: 270px;
animation: sharkBoxRun 20s linear infinite;
}
@keyframes sharkRun {
0% {
}
/* 270 * 8 = 2160 */
100% {
background-position: left -2160px; /* 动画结束时，让图片位于最底部 */
}
}
@keyframes sharkBoxRun {
0% {
transform: translateX(-600px);
}
100% {
transform: translateX(3000px);
}
}
</style>
</head>
<body>
<div class="sharkBox">
<div class="shark"></div>
</div>
</div>
</body>
</html>
```
![](http://img.smyhvae.com/20180209_1350.gif)
大功告成。
工程文件如下：
- [2018-02-09-fishes.rar](http://download.csdn.net/download/smyhvae/10255540)
## 动画案例：太阳系
暂略。
## 我的公众号

602
08-HTML5和CSS3/06-CSS3属性详解：伸缩布局.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这标题位于整个文本的标题，而不是处在某一列之中*/
-webkit-column-span: all;
text-align: center;
}
```
备注：上面这几个属性涉及到兼容性问题，需要加私有前缀。
## flex：伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对**块级元素**的布局排列变得十分灵活，适应性非常强。其强大的伸缩性，在响应式开中可以发挥极大的作用。
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>
```

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

@ -0,0 +1,348 @@
## 前言
开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。
支持程度比较好，甚至 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>，如下：
20180220_1328.png
上图中，比如我想要「思源黑体-粗」这个字体，那我就点击红框中的「本地下载」。
下载完成后是一个压缩包，压缩包链接：http://download.csdn.net/download/smyhvae/10253561
解压后如下：
20180220_1336.png
上图中， 我们把箭头处的html文件打开，里面告诉了我们 webfont 的**使用步骤**：
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)
## 字体图标
我们其实可以把图片制作成字体。常见的做法是：把网页中一些小的图标，借助工具生成一个字体包，然后就可以像使用文字一样使用图标了。这样做的优点是：
- 将所有图标打包成字体库，减少请求；
- 具有矢量性，可保证清晰度；
- 使用灵活，便于维护。
也就是说，我们可以把这些图标当作字体来看待，凡是字体拥有的属性（字体大小、颜色等），均适用于图标。
**使用步骤如下：**（和上一段的使用步骤是一样的）
打开网站<http://iconfont.cn/>，找到想要的图标，加入购物车。然后下载下来：
20180220_1750.png
压缩包下载之后，解压，打开里面的demo.html，里面告诉了我们怎样引用这些图标。
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>
```
效果如下：
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>
```
效果如下：
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

0
08-HTML5和CSS3/04-CSS3的常见边框汇总.md → 08-HTML5和CSS3/CSS3的常见边框汇总.md
View File