摘要: 写在前面的话: 要实现下图的效果: 文字说明:中间字的部分是固定的,左右两边的线条是自适应的,同时还要实现底部的 1px 下边框~ 思路: 使用flex布局,使用媒体查询实现1px~ 做法: (1)HTML布局(1.html): (2)样式(这里使用的stylus,复制的时候要把注释给去掉~) 1. 阅读全文
posted @ 2017-03-04 10:24 Chrisreen 阅读(1019) 评论(0) 推荐(0) 编辑
摘要: 写在前面的话: 常见的自动构建工具有 grunt、gulp、webpack,把源码进行合并压缩,节省带宽等~ 一起来学习 gulp 的使用吧~ 三、gulp的使用( gulp 中文网): gulp 的优点:基于流、任务化 常用API: src 、dest 、watch 、task 、pipe (1) 阅读全文
posted @ 2017-03-03 22:55 Chrisreen 阅读(365) 评论(0) 推荐(0) 编辑
摘要: 写在前面的话: less 可以实现 编程化的css,之前用过stylus,现在来学习下 less 有什么不一样的地方吧~ 二、css 预编译处理less(less中文网 , 在线编译工具) .less 文件,经过 less 工具,最后再转变成 .css文件 基础使用介绍: (1)关于变量 (2)关于 阅读全文
posted @ 2017-03-03 22:54 Chrisreen 阅读(457) 评论(0) 推荐(0) 编辑
摘要: 写在前面的话: 前段时间一直在学vue, 近来机缘巧合又得到一个angular 项目实例,现试试angular 做一个项目 一、AngularJs 开发app之准备工作: (1)安装个开发调试工具先: batarang(https://github.com/angular/batarang 下载v0 阅读全文
posted @ 2017-03-03 22:54 Chrisreen 阅读(1691) 评论(0) 推荐(0) 编辑
摘要: 写在前面的话: 假设已经安装好啦,可参照 之前的一篇文章 那么接下来是一次性配好所需的工具: 一、下载相关依赖:在package.json中,加入以下内容: 再 npm install 再 npm run dev 二、配置文件夹 可参照 之前的一篇文章 (我用到了这篇文章的 reset.css, 以 阅读全文
posted @ 2017-03-03 22:54 Chrisreen 阅读(349) 评论(0) 推荐(0) 编辑
摘要: 写在前面的话: 在实际应用中,我们常常遇到背景图片与颜色叠加效果的设计图,如以下效果的: 这个我试过: background:URL(); background-color: rgba( ); 只要 color 写在后面是可以实现的: 效果图: 上图表示,直接给要实现效果的容器加是可以的,当然加上 阅读全文
posted @ 2017-03-03 10:21 Chrisreen 阅读(13172) 评论(0) 推荐(0) 编辑
摘要: 写在前面的话: 在一个项目中有许多地方用到了同一个组件时,可以将其抽象出来,定义成一个大家都能用的组件,实现复用~ 六、复用组件的创建以及使用 实例: 课程中提到一部分是关于星星评价的,在多处都使用到了,格式一样,只是大小不同,如: 1. 2. 3. ………… 做法: (1)首先在component 阅读全文
posted @ 2017-03-03 09:42 Chrisreen 阅读(3091) 评论(0) 推荐(0) 编辑
摘要: 写在前面的话: 在 w3cplus 上可以看到相关学习资料,本文就是参考了这篇,写下的笔记~,原文 链接 五、css sticky footers布局 一般来说,常会遇到这样的布局:在一个页面的内容不确定的情况下,始终得实现 footer 部分位于页面的底部~ 实现这种布局的方式有很多,据说css 阅读全文
posted @ 2017-03-03 00:37 Chrisreen 阅读(565) 评论(0) 推荐(0) 编辑
摘要: 写在前面的话: 上一篇文章实现了滑动效果,这部分来试试左右联动效果的实现方法吧 九、better-scroll + vue2.0 实现移动端滑动2——左右联动 效果:滑动右侧时,左侧也能有相应的变化;点击左侧时,右侧也能自动定位到相应的位置。 如下图所示界面,左侧为分栏,右侧为分栏详情。 滑动右边使 阅读全文
posted @ 2017-03-02 11:56 Chrisreen 阅读(10725) 评论(3) 推荐(2) 编辑
摘要: 写在前面的话: 额,原因是啥来着?忘咯,后补~ 八、better-scroll + vue2.0 实现移动端滑动1 1. 首先引入依赖库(better-scroll),并安装: 再 npm install 再 npm run dev 小备注:第一次安装的时候报错: 然后我就换成 better-scr 阅读全文
posted @ 2017-03-01 16:47 Chrisreen 阅读(14278) 评论(0) 推荐(2) 编辑