From 566f5b7c4fa18cd67298f93d2fc2c17aab12283c Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Fri, 23 Feb 2018 12:23:47 +0800 Subject: [PATCH] update --- ...SS3属性详解.md => 04-CSS3属性详解（一）.md} | 0 ...动画详解.md => 05-CSS3属性详解：动画详解.md} | 73 ++- 08-HTML5和CSS3/06-CSS3属性详解：伸缩布局.md | 602 ++++++++++++++++++ 08-HTML5和CSS3/07-CSS3属性详解：Web字体.md | 348 ++++++++++ ...的常见边框汇总.md => CSS3的常见边框汇总.md} | 0 5 files changed, 1021 insertions(+), 2 deletions(-) rename 08-HTML5和CSS3/{04-CSS3属性详解.md => 04-CSS3属性详解（一）.md} (100%) rename 08-HTML5和CSS3/{05-CSS3属性：动画详解.md => 05-CSS3属性详解：动画详解.md} (95%) create mode 100644 08-HTML5和CSS3/06-CSS3属性详解：伸缩布局.md create mode 100644 08-HTML5和CSS3/07-CSS3属性详解：Web字体.md rename 08-HTML5和CSS3/{04-CSS3的常见边框汇总.md => CSS3的常见边框汇总.md} (100%) diff --git a/08-HTML5和CSS3/04-CSS3属性详解.md b/08-HTML5和CSS3/04-CSS3属性详解（一）.md similarity index 100% rename from 08-HTML5和CSS3/04-CSS3属性详解.md rename to 08-HTML5和CSS3/04-CSS3属性详解（一）.md diff --git a/08-HTML5和CSS3/05-CSS3属性：动画详解.md b/08-HTML5和CSS3/05-CSS3属性详解：动画详解.md similarity index 95% rename from 08-HTML5和CSS3/05-CSS3属性：动画详解.md rename to 08-HTML5和CSS3/05-CSS3属性详解：动画详解.md index a427676..3e3e52b 100644 --- a/08-HTML5和CSS3/05-CSS3属性：动画详解.md +++ b/08-HTML5和CSS3/05-CSS3属性详解：动画详解.md @@ -1308,7 +1308,7 @@ PS：图片的url是，图片较大， 鱼在原地摆动并不是一张 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_1250.gif) -我们不妨把上面的动画的持续时间从`1s`改成 `8秒`，就可以看到动画的慢镜头： +我们不妨把上面的动画的持续时间从`1s`改成 `8s`，就可以看到动画的慢镜头： ![](http://img.smyhvae.com/20180209_1330.gif) @@ -1368,11 +1368,80 @@ PS：图片的url是，图片较大， 实现的原理也很简单，我们在上一步中已经让`shark`这个盒子实现了原地摇摆，现在，让 shark 所在的父盒子 `sharkBox`向前移动，即可。完整版代码是： +```html + + + + + + + + +
+
+
+ + + + +``` + + ![](http://img.smyhvae.com/20180209_1350.gif) 大功告成。 +工程文件如下： + +- [2018-02-09-fishes.rar](http://download.csdn.net/download/smyhvae/10255540) + + + +## 动画案例：太阳系 + +暂略。 + + + + ## 我的公众号 diff --git a/08-HTML5和CSS3/06-CSS3属性详解：伸缩布局.md b/08-HTML5和CSS3/06-CSS3属性详解：伸缩布局.md new file mode 100644 index 0000000..24cdb83 --- /dev/null +++ b/08-HTML5和CSS3/06-CSS3属性详解：伸缩布局.md @@ -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 + + + + + + + + +
+

传统布局

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

伸缩布局 display:flex

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

主轴方向 flex-direction:row

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

主轴方向 flex-direction:row-reverse

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

主轴方向 flex-direction:column

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

主轴方向 flex-direction:column-reverse

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ + +``` + + +**2、justify-content：**设置子元素在**主轴上的对齐方式**。 + + +- `justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是： + - `flex-start` 从主轴的起点对齐（默认值） + - `flex-end` 从主轴的终点对齐 + - `center` 居中对齐 + - `space-around` 在父盒子里平分 + - `space-between` 两端对齐 平分 + + +代码演示： + +```html + + + + + + + + +
+

主轴的对齐方式：justify-content:flex-start

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

主轴的对齐方式：justify-content:flex-end

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

主轴的对齐方式：justify-content:center

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

主轴的对齐方式：justify-content:space-round

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

主轴的对齐方式：justify-content:space-bettwen

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
+
+ + +``` + + +**3、align-items：**设置子元素在**侧轴上的对齐方式**。 + + +- `align-items:flex-start;` 设置子元素在**侧轴上的对齐方式**。属性值可以是： + - `flex-start` 从侧轴开始的方向对齐 + - `flex-end` 从侧轴结束的方向对齐 + - `baseline` 基线 默认同flex-start + - `center` 中间对齐 + - `stretch` 拉伸 + + +代码演示： + +```html + + + + + + + + +
+

侧轴的对齐方式:align-items ：flex-start

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

侧轴的对齐方式：align-items:flex-end

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

侧轴的对齐方式：align-items:center

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

侧轴的对齐方式：align-itmes:baseline

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

侧轴的对齐方式：align-itmes: stretch

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ + +``` + + +**4、`flex`属性**：设置子盒子的权重 + +代码演示： + +```html + + + + + + + + +
+

伸缩比例:flex

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ +
+

伸缩比例:flex

+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ + + + +``` + + + + + + + + + + + + + + + + + + + + diff --git a/08-HTML5和CSS3/07-CSS3属性详解：Web字体.md b/08-HTML5和CSS3/07-CSS3属性详解：Web字体.md new file mode 100644 index 0000000..239e4c0 --- /dev/null +++ b/08-HTML5和CSS3/07-CSS3属性详解：Web字体.md @@ -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+。 + +**总结：** + +了解了上面的知识后，**我们就需要为不同的浏览器准备不同格式的字体**。通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式之间的区别。 + + +下载字体的网站推荐： + +- + +- + + +## WebFont 的使用步骤 + +打开网站，如下： + +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 +这一分钟，你和我在一起，因为你，我会记得那一分钟。从现在开始，我们就是一分钟的朋友。这是事实，你改变不了，因为已经完成了。 +``` + +**举例：** + +我们按照上图中的步骤来，引入这个字体。完整版代码如下： + +```html + + + + + + + + + +

生命壹号，永不止步

+ + +``` + + +代码解释： + +（1）`my-web-font`这个名字是随便起的，只要保证第一步和第二步中的名字一样就行。 + +（2）因为我把字体文件单独放在了font文件夹中，所以在src中引用字体资源时，写的路径是 `font/...` + +工程文件： + +- [2018-02-20-WebFont举例.zip](http://download.csdn.net/download/smyhvae/10253565) + + +## 字体图标 + +我们其实可以把图片制作成字体。常见的做法是：把网页中一些小的图标，借助工具生成一个字体包，然后就可以像使用文字一样使用图标了。这样做的优点是： + +- 将所有图标打包成字体库，减少请求； + +- 具有矢量性，可保证清晰度； + +- 使用灵活，便于维护。 + +也就是说，我们可以把这些图标当作字体来看待，凡是字体拥有的属性（字体大小、颜色等），均适用于图标。 + +**使用步骤如下：**（和上一段的使用步骤是一样的） + +打开网站，找到想要的图标，加入购物车。然后下载下来： + +20180220_1750.png + +压缩包下载之后，解压，打开里面的demo.html，里面告诉了我们怎样引用这些图标。 + +20180220_1755.png + +**举例1**：（图标字体引用） + +```html + + + + + + + + + +

扫码付款

+ + + +``` + +效果如下： + +20180220_1800.png + + +**举例2**：（伪元素的方式使用图标字体） + +如果想要在文字的前面加图标字体，我们更习惯采用**伪元素**的方式进行添加。 + +代码如下： + +```html + + + + + + + + +

扫码付款

+ 我是span +
divvvvvvvvvvv
+ + + +``` + +效果如下： + +20180220_1815.png + + +工程文件： + +- 2018-02-20-图标字体demo.zip + + + +## 其他相相关网站介绍 + +- Font Awesome 使用介绍： + +定制自已的字体图标库： + +- + +- + +SVG素材： + +- + + + +## 360浏览器网站案例 + +暂略。 + +这里涉及到：jQuery fullPage 全屏滚动插件。 + +- 中文网址:http://www.dowebok.com + +- 相关说明:http://www.dowebok.com/77.html + + + + + + + + + + + + + + + + + + + + + + diff --git a/08-HTML5和CSS3/04-CSS3的常见边框汇总.md b/08-HTML5和CSS3/CSS3的常见边框汇总.md similarity index 100% rename from 08-HTML5和CSS3/04-CSS3的常见边框汇总.md rename to 08-HTML5和CSS3/CSS3的常见边框汇总.md