随笔分类 -  HTML & CSS

css3 实现动画
摘要：CSS3，我们可以创建动画，它可以取代许多网页动画图像，例如下面这个小球动画 使用css3关键帧动画可以轻松实现 请看下面代码 动画类型不仅仅局限于 translate（平移） 还可以是 scale（缩放）rotate（旋转）等 阅读全文
posted @ 2018-12-11 18:08 吃饭睡觉打豆豆o 阅读(387) 评论(0) 推荐(0)
CSS3中translate、transform和translation的区别和联系
摘要：translate:移动，transform的一个方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数： 用法transform: translate(50px, 100px); -ms-transform: transl 阅读全文
posted @ 2018-07-31 06:03 吃饭睡觉打豆豆o 阅读(888) 评论(0) 推荐(0)
[记录] 解决img的1px空白问题
摘要：第一种解决方案：把img变成块元素：display：block； 第二种解决方案：修改一下它的垂直对齐方式：vertical-align：middle； 第三种解决方案：使用浮动，让他漂浮起来：float：left； 第四种解决方案：把父元素的文字大小设置为0：font-size：0；这种方法不推荐 阅读全文
posted @ 2018-06-28 07:09 吃饭睡觉打豆豆o 阅读(870) 评论(0) 推荐(0)
CSS3 过渡动画
摘要：实现如下效果：当鼠标移动到图片上是图片有类似于放大镜放大的效果 常见二维变化除了放大 scale( ) 还有旋转 rotate(30deg) 阅读全文
posted @ 2018-06-27 06:00 吃饭睡觉打豆豆o 阅读(229) 评论(0) 推荐(0)
[记录] CSS 多行文本超出部分省略
摘要：如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览 但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号，如下。 适用范围：因使用了W 阅读全文
posted @ 2018-06-13 09:33 吃饭睡觉打豆豆o 阅读(167) 评论(0) 推荐(0)
[记录] CSS 左边元素定长，右边元素获得剩余长度
摘要：情景：左边元素定长，右边元素获得剩余长度 1. 左边设置浮动，右边元素宽度auto，可以不设置，默认auto，然后设置margin-left：左边元素宽度 2. 使用弹性盒子 （浏览器兼容性问题） 阅读全文
posted @ 2018-05-18 10:56 吃饭睡觉打豆豆o 阅读(686) 评论(0) 推荐(0)
THML DOM / Element 对象操作
摘要：随着Vue等MVVM框架流行，操作DOM已经不想之前那么频繁，因此很多DOM的操作已经陌生，特此回顾HTML中DOM操作 获取Element节点 熟悉的有 通过ID获取，返回element对象 document.getElementById(elementId) 通过Name获取，返回element 阅读全文
posted @ 2018-05-15 06:50 吃饭睡觉打豆豆o 阅读(614) 评论(0) 推荐(0)
Web移动端布局
摘要：说到移动端，不得不提适配问题，因为现如今市面上移动设备的分辨率大小不同，显然咱们常用的px单位在这个时候就有些不太灵光了，为此，css3出了一个新单位——rem，rem是移动端神器，它完美解决了分辨率的适配问题。 rem是根据HTML根目录font-size的大小为基准 用JS获得当前屏幕的分辨率， 阅读全文
posted @ 2018-01-26 01:10 吃饭睡觉打豆豆o 阅读(157) 评论(0) 推荐(0)