摘要: 在介绍有关transform相关的知识之前,先来讲一下transform-origin的用法以及关于<angle>角度的几种取值单位。另外,在使用时,为了兼容各个浏览器,可加上浏览器的私有前缀[-moz- -webkit -ms-]。 transform-origin 设置对象变换的原点,通常和ro 阅读全文
posted @ 2018-01-02 18:07 铭绘 阅读(2521) 评论(0) 推荐(0) 编辑
摘要: 第二版: 解决img元素底部会出现的空白 空白的出现 做网页设计就避免不了在网页中添加图片,一些炫酷的图片可以是你的网页增色不少。对于如何在网页里添加一个图片,大家都已经很清楚了,使用< img >标签就行了。今天我们来看看在添加图片过程中出现的一个小问题。为何图片的底部会出现一个空白间隙呢。请点击 阅读全文
posted @ 2018-01-02 17:52 铭绘 阅读(265) 评论(0) 推荐(0) 编辑
摘要: 1. 自适应的椭圆 背景知识:border-radius属性的基本用法 使用border-radius制作一个圆很简单,只要给任何正方形元素设置固定宽高及一半长度以上的border-radius,就可以得到圆形 1234background: #fb3;width: 200px;height: 20 阅读全文
posted @ 2018-01-02 17:46 铭绘 阅读(514) 评论(0) 推荐(0) 编辑
摘要: 首先我们有这样一张照片: 照片长度为1184px,高度为75px,共分为24格。 首先我们将DIV大小设置成单格照片的大小,49x75。这样在初始状态下看到的就是第一格的照片。 接下来定义的是最终状态也就是最后一格的状态,通过偏移量背景调整到最后一格。最后就是定义动画效果,在下面的设置中时长2秒,动 阅读全文
posted @ 2018-01-02 17:16 铭绘 阅读(236) 评论(0) 推荐(0) 编辑
摘要: 你肯定已经知道,对于一个 img 元素而言,你可以单独地修改它的 width 或者 height 属性来设置它的大小,同时图片的比例还能够保持不变。 如下图所示,最上面是原始大小的图片,下面两张则分别是设置了 width: 50% 和 height: 50% 属性后的样子。 可以看到把宽度设置为了原 阅读全文
posted @ 2018-01-02 17:15 铭绘 阅读(2068) 评论(0) 推荐(0) 编辑
摘要: 状态、属性、组件API、组件的生命周期 当react的状态改变时,自动执行this.render()方法更新组件ES6写React的时候,事件里不会自动绑定this,需要自己绑定,或者直接在constructor里写方法 状态 propsHelloMessage.jsx main.js props验 阅读全文
posted @ 2018-01-02 17:04 铭绘 阅读(3099) 评论(0) 推荐(0) 编辑
摘要: CSS函数attr()是用来获取被选中元素的属性值,并且在样式文件中使用。它也可以用在伪类元素里,在伪类元素里使用,它得到的是伪元素的原始元素的值。 attr()函数可以和任何CSS属性一起使用,但是除了content外,其余都还是试验性的(简单说就是不稳定,浏览器不一定支持)。 那具体怎么用呢,给 阅读全文
posted @ 2018-01-02 17:01 铭绘 阅读(11023) 评论(0) 推荐(0) 编辑
摘要: 箭头函数有两个好处。 1.他们比传统函数表达式简洁。 2.箭头函数不会绑定关键字this,我们不需要用bind()或者that = this这种方法了 和this同样没有被箭头函数绑定的参数有 arguments super this new.target 例如: =>箭头函数并没有绑定 argum 阅读全文
posted @ 2018-01-02 16:58 铭绘 阅读(1019) 评论(0) 推荐(0) 编辑
摘要: 整理了ES6常用的一些语法,跟大家分享(promise、generator什么的还没有梳理清楚,后续再更新。。。) 1⃣️ 变量声明-let 与 const (首先关于测试结果:这里有个小问题,如果用let/const声明的变量,在控制台调试的话,第一次输出结果后,第二次如果你还想用,要么把代码放入 阅读全文
posted @ 2018-01-02 16:48 铭绘 阅读(11226) 评论(0) 推荐(2) 编辑
摘要: Stateless function 无状态组件平时写组件用到比较多的就是无状态组件,不但优雅,也是优化react性能的一种手段。 const Greeting = ({ name, style }) => { return <div style={style}>{name}</div> }; Ar 阅读全文
posted @ 2018-01-02 16:24 铭绘 阅读(2272) 评论(1) 推荐(1) 编辑