2018年10月_何迟

原创 CSS3案例黑马程序员—学成在线

要点：1.直接只用<header><nav>等CSS3新标签2.使用新的盒子模型border-box内减式模型，不用再来回设置盒子大小3.过渡效果和动画效果的联合使用，不考虑兼容base.css*{ box-sizing: border-box; /*全部定义为内减式盒子模型*/}a{ text-decoration: none;}bod...

2018-10-31 15:17:53 9073 11

原创 3D动画案例

要点：1.视距越大，看到的效果越小，跟小孔成像同样的原理2.给父元素添加透视，会作用于子元素3.backface-visibility设置背向浏览器是否可见html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>

2018-10-31 08:40:38 412

原创伸缩布局flex、背景缩放实例、字体阴影—携程网手机app

要点：1.将需要伸缩布局的父级元素添加display:flex显示效果，在子级元素中设置flex的值，然后按比例分。如一个子集元素是1，另一个是2，则一个占三分之一，另一个三分之二。2.字体阴影非常占内存，不建议使用3.背景图片的缩放，可以为px和百分比（如果自定义一个，另一个按原来图片的比例等比列缩放）另两个特殊的属性值，cover将图片等比例缩放，直到图片的高跟盒子的高一...

2018-10-30 21:50:15 709

原创多背景实例—冒泡图

要点：1.多背景使用时，如果背景图片后面还需要接着背景颜色，需要将背景颜色写在后面，以防被层叠，什么都不显示2.在多背景的使用时，一定要注意背景图片位置的错开，才能达到多背景图片的效果3.在使用多背景完成一定的转换动画时，一定要加上过渡，不然可能没有效果html代码：<!DOCTYPE html><html lang="en"><head&g...

2018-10-30 21:39:52 379

原创 css3动画案例—太阳大海跳动

要点：1.一个动画定义完成之后，任何元素只要调用这个动画的名字，都可以执行这个动画2.同一个动画，里面的多个效果也是有前后顺序的，注意效果的差别html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Docume

2018-10-30 10:26:07 2379 1

原创允儿相册—动画、过渡、结构伪类选择器

要点：1.结构伪类选择器，注意nth-child后面接括号，里面写数字，从0开始。特殊开头是first-child和last-child2.过渡属性有四个值，后面的效果时间曲线和延时设为默认3.旋转注意，正值为顺时针，负值为逆时针，单位是度（deg，千万不能与战队edg混，哈哈）4.后加载的图层权重更大，在上面（所以我们看到的，是最后加载的）html代码：<!D...

2018-10-28 21:24:56 163

原创京东图片过渡效果—了解transition属性

要点：1、transition有四个属性，注意时间曲线和延时可以省略，默认分别是ease和02、注意切换的原理类似滑动门，遮住一部分，图片的宽度比显示宽度要大html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&gt

2018-10-28 19:12:56 645

原创 css3伪元素选择器和box-sizing盒子模型

要点：1.伪元素选择器写法：E::before E::after （E代表元素，如下面的div元素为例）作用：在div中内容部分的最前面和最后面添加content属性，文本内容可以为空。但是注意，content是行类元素，自己本身也是一个盒子，所以我们这里可以使用相对定位。2.CSS3的border-box盒子模型传统的也是默认的盒子模型是content-box模型，它保证了W...

2018-10-25 16:10:34 409

原创 web字体图标的使用

方法：1.在icomoon字库网站上下载完了字体之后，将压缩包解压2.将压缩包中的font文件夹，拷贝到所需使用的样式表文件同路径下（下面引用的时候，没有加../到上级目录）就是@font-face的url地址要注意，他的作用就是找到导入的font文件夹3.将压缩包中的css文件内容部分拷贝到自己的样式表中（看源码）4通过font-family:"icomoon"引用，打...

2018-10-19 08:33:42 675

原创黑马程序员云道页面—巩固html和css（新特性没有使用）

注意：一.写的是黑马程序员跟着老师写的，有点小差别，主要看注释理解结构二.以前学thml和css没有深入理解到盒子的坍塌问题，注意理解外边距的合并。有两种情况，一个是两个盒子紧挨着一起，会进行外边距合并，只保留较大的外边距，注意就行。一个是盒子的嵌套，造成合并解决办法有两个，一是为父元素添加1px的外边距或内边距（可能会将盒子变大），而是在父元素中添加overf...

2018-10-18 19:56:15 3727 2

原创 vue—computed计算属性

要点：1.computed定义的属性，称为计算属性。本质是定义的方法，但是我们在使用时，直接当作属性使用，不用加()2.每次计算属性使用的数据发生改变时，计算属性调用其处理方法3.将计算属性的最新的值，放在缓存中。只有在计算属性的变量改变时，才会重新将缓存内容刷新。所以，别的方法调用计算函数结果时，如果没有触发变量的改变，不会调用对应的functionHTML代码：<!...

2018-10-09 11:00:10 357

原创 vue-watch监听非DOM元素的事件

注意：1.通过键盘监听事件完成姓名的拼写监听的是DOM元素中的事件，是用户操作直接的事件。而watch可以监视路由等非DOM元素的事件。2.watch监视非DOM元素事件，只需将本实例中的firstname2属性名字符串换成 '$route.path' 变量名即可，注意单引号3.单引号的使用规则：一、字符串中带有英文连字符使用，不能使用有些驼峰原则的时候二、本来都要使用单引号的，...

2018-10-09 10:34:05 935

原创 vue路由—实现经典布局（同一个路由，对应多个组件）

要点：1.router-view头部，侧边栏，主体内容区域三个区域，每个有一个占位符。2.占位符定义一个name属性，跟components的第一个属性对应，这里component使用复数，同一个路由下匹配多个组件。HTML代码：<!DOCTYPE html><html lang="en"><head> <meta chars...

2018-10-09 08:43:38 8676

原创 vue路由传参两种方式—分别操作query和parames

注意：1.第一种方式：通过在router-link中用？&等符号进行操作，操作的是query元素2.第二种方式：在routeer-link中给id赋值，将占位符的位置取代，操作的是parames元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

2018-10-07 20:56:40 985

原创 vue路由的定义、起始页面、切换、高亮显示

原理：1.浏览器持续监听着path属性的变换，从而使其对应的component组件发生变化，页面内同改变。2.理解router-view元素的占位符的作用HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&am

2018-10-07 15:45:25 1907

原创通过$ref来操作DOM元素和组件

要点：这里的$ref相关的操作就是为了避免操作DOM，Vue提供的方案。效果等同于原生的id，然后操作HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&amp

2018-10-07 11:08:16 1866

原创 vue组件之间的数据传递实例—评论留言自动刷新功能

注意：1.最重要理解这里的父组件的刷新功能，通过v-on事件绑定委托给子组件执行，因为子组件的提交按钮和父组件的刷新评论的功能是分开的。2.没有数据时直接点击提交按钮时会出bug，并且关闭后重新加载页面还是会存在。因为localStorage在浏览器中是永久缓存的，通过localStorage清除缓存，如下。最后的执行效果，会有演示，本来可以做出判断为空时，不给提交，这里为了说明这个问题...

2018-10-07 09:56:51 2004 1

Scrow1204的博客