2019年05月_hjy170314

12月 11月 10月 06月 05月 03月

原创混合app框架之uni-app---grid布局

uni-app中grid布局是九宫格布局，格式已经弄好了，可以直接拿出来使用，在使用的时候想要点击获取下标的话直接写点击事件就可以打印出对应的下标了。代码如下： <uni-grid @click="goToPage" :options="[ {image:'https://img-cdn-qiniu.dcloud.net....

2019-05-29 14:07:32 17243 1

原创纯css制作瀑布流样式

在制作瀑布流格式的时候，一开始没有发现这个问题，当我只有两行的时候，每相隔一个div的大小一样的时候，我发现我的第一列的div一小部分内容跑到第二列中去了，这使我很无解，目前我还没有想到解决的方法用瀑布流的写法，用js进行布局倒是可以解决这个问题。这是我的代码<!DOCTYPE html><html lang="en"><head> &...

2019-05-25 14:31:36 436

原创多行文本显示，溢出显示省略号

在制作是h商城的时候经常需要只显示两行文字，溢出部分需要用省略号表示，具体的css写法是 display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;-webkit-line-clamp：表示要显示多少行，我这里为一行，溢出部...

2019-05-25 14:05:31 110

原创 vue抽奖效果Demo

只做了简单的抽奖效果，没有给出弹框和中奖提示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

2019-05-25 12:01:50 5181 2

原创 css学习之animation

animation css动画效果使用animation 需要使用@keyframes{}Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe...

2019-05-17 17:34:06 314

原创 css学习之transition

transition 过渡效果Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。tra...

2019-05-17 16:24:10 229

原创 css学习之transform

transform 旋转效果Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。Opera 只支持 2D 转换。属性值：3D旋转Internet Explorer 10 和 Firefox 支...

2019-05-17 15:40:51 295