CSS3的使用及基本注意说明相关笔记（四）
1.使用CSS3来DIY图片i无缝轮播效果：图片大小：126*86
使用css3动画制作自动无缝轮播图
2.使用CSS3来DIY立体导航栏效果
使用css3中的transform制作立体导航栏
-
水晶女孩
-
水晶女孩
-
水晶女孩
-
水晶女孩
-
水晶女孩
3.CSS3新增的伸缩布局，主轴方向是从左到右，侧轴方向是从上到下：
◆
display：flex;默认从左到右，从上到下
◆设置主轴排列方向的方式：，
flex-direction:row;（默认属性，表示从左至右的排列），
flex-direction:row-reverse;（表示从右至左的排列），
flex-direction:column;（表示从上到下的排列），
flex-direction:column-reverse;（表示从下到的排列），
最重要的是横向排列时，当所有子元素的宽小于父容器的宽时，子元素多宽就是多宽，但是如果所有子元素的宽大于父容器了，那么就会自适应父容器的宽，于是子元素原来的宽就无效了，子元素的宽度就变成父容器除以子容器的个数的值了，当然如果有外边距也会加进去用来计算，纵向排列也是如此，但是如果父容器没有设置高，那就不会自适应父容器的高了
css3中的伸缩布局（主轴排列方向的方式）
传统布局方式
- 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
小总结
最重要的
是横向排列时，当所有子元素的宽小于父容器的宽时，子元素多宽就
是多宽，但是如果所有子元素的宽大于父容器了，那么就会自适应父
容器的宽，于是子元素原来的宽就无效了，子元素的宽度就变成父容
器除以子容器的个数的值了，当然如果有外边距也会加进去用来计算
，纵向排列也是如此，但是如果父容器没有设置高，那就不会自适应
父容器的高了。
◆设置主轴对齐的方式：
justify-content:flex-start（表示对齐方式是从主轴方向开始的地方对齐），
justify-content:flex-end（表示对齐方式是从主轴方向结束的地方对齐），
justify-content:center（表示对齐方式是从主轴方向中间的地方对齐），
justify-content:space-round（表示对齐方式是从主轴方向空间平分），
justify-content:space-between（表示对齐方式是从主轴方向两端对齐中间的居中）
css3中的伸缩布局（设置主轴对齐的方式）
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-between（表示对齐方式是从主轴方向两端对齐中间的居中）
- 1
- 2
- 3
◆侧轴对齐的方式：
align-items:flex-start（表示对齐方式是从侧轴方向开始的地方对齐），
align-items:flex-end（表示对齐方式是从侧轴方向结束的地方对齐），
align-items:center（表示对齐方式是从侧轴方向中间的地方对齐），
align-items:baseline（表示对齐方式是从侧轴方向基线的地方对齐，与flex-start一样），
align-items:stretch（表示对齐方式是从侧轴方向的以拉伸的方式对齐，只要子元素的高度为auto，那么会自适应父容器的高度，既拉伸）
css3中的伸缩布局（设置侧轴对齐的方式）
align-items:flex-start（表示对齐方式是从侧轴方向开始的地方对齐）
- 1
- 2
- 3
align-items:flex-end（表示对齐方式是从侧轴方向结束的地方对齐）
- 1
- 2
- 3
align-items:center（表示对齐方式是从侧轴方向中间的地方对齐）
- 1
- 2
- 3
align-items:baseline（表示对齐方式是从侧轴方向基线的地方对齐，与flex-start一样）
- 1
- 2
- 3
align-items:stretch（表示对齐方式是从侧轴方向的以拉伸的方式对齐，只要子元素的高度为auto，那么会自适应父容器的高度，既拉伸）
- 1
- 2
- 3
◆设置
display：flex;后，继续设置每个子盒子所占父盒子的比例，既伸缩比例，给子盒子设置
flex:number;，如果不参与伸缩比例的设置就不给那个子盒子写
flex:number;，当给一个子盒子设置
flex:auto;时，大小就是原来的大小 + flex:1。
css3中伸缩布局（设置伸缩比例）
设置display：flex;后，继续设置每个子盒子所占父盒子的比例，既
伸缩比例，给子盒子设置 flex:number;，如果不参与伸缩比例的设置
就不给那个子盒子写flex:number;
- 1
- 2
- 3
◆在移动端使用
box-sizing:border-box;非常的多
◆
meta:vp这个emmte表达式，用于告诉移动端浏览器，要自适应手机大小。
4.使用CSS3新增的伸缩布局来DIY：简单导航、移动端导航
◆简单导航
使用css3中的伸缩布局制作简单导航
- 消息
- 通信录
- 发现
- 我的
- 空间
◆移动端导航
使用css3中的伸缩布局制作移动端导航
5.CSS3的自定义字体、自定义字体图标
◆开发人员可以为自己的网页指定特殊的字体（web字体、图标字体），无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。支持程度比较好，甚至IE低版本浏览器也能支持。
◆那些字体都是通过svg文件转换而成的，你可以通过AI来生成svg文件，然后拿svg文件到一些字体生成网站去转换一些就可以了，你也可以直接下载免费的字体文件。
◆当需要为不同浏览器准备不同格式的字体时，需要通过字体生成工具来生成各种格式的字体，于是无需在意字体格式间的区别差异，推荐字体下载的网站http://www.zhaozi.cn/（找字网）、http://www.youziku.com/ （有字库）、http://iconfont.cn/（阿里妈妈）、http://www.iconsvg.com/（SVG素材）、http://fontawesome.dashgame.com/（Font Awesome一套绝佳的图标字体库和CSS框架）
6.使用自定义字体说明注意，不同浏览器所支持的字体格式是不一样的
◆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+；
7.引用特殊字体的语法
/* 如果要在网页中使用web字体（用户电脑上没有这种字体），*/
/* 声明字体*/
/* 告诉浏览器 去哪找这个字体*/
@font-fack{
font-family: 'webfont';
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: 'webfont';
}//使用
谁使用就给谁加上这个类
◆使用自定义的web字体
css3-使用自定义的web字体
贾文利
贾文丽
◆使用下载的字体图标
Title
欢迎扫码
8.css3查询各种浏览器兼容性问题的网站：https://caniuse.com/，通过http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题，需要知道每个属性，能被那个版本的浏览器支持即可。
9.鼠标滚轮滚动的事件：
window.onmousewheel=function(){}
鼠标滚轮滚动的事件（onmousewheel）
10.使用jQuery-fullPage全屏滚动插件来DIY
◆基本使用：jQuery fullPage全屏滚动插件：http://www.dowebok.com/77.html
使用jQuery-fullPage全屏滚动插件
第一屏
第二屏
第四屏
第五屏
◆360动画网页：这个很专业，很好看的，只不过素材有点多。
使用css3配合全屏滚动插件制作360动画网页
11.两点注意事项
◆
seTimeout(function(),100);表示隔个100毫秒再执行一次，setTimeout只会执行一次，setInterval会循环执行。
◆子代选择器只能够针对元素选择器，不能够针对类选择器，后代选择器可以针对元素原则器和类选择器，如
.section.first.current>.text{}//是无效的，它使用的是 子代选择器；
但是.section.first.current .text{}//是有效的 ，它使用的是后代选择器；
.section.first.current .text>img{}//是有效的。