2017年3月14日
webpack+vue2.0项目 （一） vue-cli脚手架
摘要： 很早以前就开始看vue2.0和webpack，但总是留不下深刻的印象，一直缺少一个可以贯通的项目，而且工作也没有时间，最近辞职在家，从网上找了个项目，写了大概八天，踩了无数的坑啊！！ 下载的项目包括，设计图，源码什么的都有，只不过是它基于vue1.0构建的，我用vue2.0从头写了一遍 先写下项目流 阅读全文
posted @ 2017-03-14 21:58 yaokunlun 阅读(2368) 评论(0) 推荐(0) 编辑
分享两个常用的rem布局方式
摘要： 关于rem 这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。 比如我们设置body，html的字体大小为10px；那么1rem就是10px, 这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。 1.手机淘宝一直用的方法：思路是通过js动态 阅读全文
posted @ 2017-03-14 11:47 yaokunlun 阅读(478) 评论(0) 推荐(1) 编辑
2017年3月13日
移动端border：1px问题解决方案
摘要： 了解设备像素和css像素的因该知道，通常我们在写移动端时，是按照设计稿标注的像素除以设备的DPR来写真实的像素， 比如在iPhone6上，我们写的20px字体世界上在视觉效应上有20px; 所以当我们写1px边框时，在手机上看起来会变粗变为2px； 对此有如下解决方案： 阅读全文
posted @ 2017-03-13 22:19 yaokunlun 阅读(3936) 评论(0) 推荐(1) 编辑
2017年3月10日
sticky footer 布局
摘要： 在开发中常遇见这种问题，我们需要将底部固定在页面的最下方；无论正文内容的高度是多少； 如果直接用fixed定位:bottom为0；那么当正文过多时，底部将会与正文重叠； 代码如下： html： css 对此，有以下解决方案，她有个很好听的名字，叫做‘sticky foote’ 效果如下：当正文内容少 阅读全文
posted @ 2017-03-10 11:01 yaokunlun 阅读(479) 评论(0) 推荐(0) 编辑
2017年3月6日
用js数组实现最原始的图片轮播实现
摘要： 上班以来看到了，写了很多的轮播图效果，实现方法大致有 1.将图片局对定位，利用z-index和opacity实现图片渐现 2.用css3 的transtion：Xx xx left/right,实现左右方向滑动轮播（淘宝） 3.在图片组的前后，各加一张图片，实现无缝连接 4.通过改变图片组外层的ma 阅读全文
posted @ 2017-03-06 17:40 yaokunlun 阅读(3968) 评论(1) 推荐(0) 编辑
2017年3月5日
分享按钮（QQ，微信，微博等）移入动画效果
摘要： ps：最近写的很多博客都是在以前在项目里写过的，之所以现在写出来，最大的目的就是希望自己以后用到的时候比较容易找，而且现在再写一遍，有助于加深印象！ 很简单的效果，说先实现方式： 1.图标来自 阿里巴巴矢量图标库 没用过的可以试下，各式各样的图标，非常好用 2.初始每个分享框左右两侧都有一个隐藏的图 阅读全文
posted @ 2017-03-05 15:51 yaokunlun 阅读(372) 评论(0) 推荐(0) 编辑
分享几个自适应布局方式（持续更新）
摘要： 1.上下高度固定 中间内容区域自适应 实现方式，上下固定高度，底部绝对定位，中间区域绝对定位，设置top,bottom值为上下部分高度。 效果图： （颜色辣眼睛。。。。） 2.左边宽度固定，右边宽度根据屏幕宽度自适应 实现方式，如下： 效果图： 当然，如果右边还有固定的部分，只需要给中间部分 加上 阅读全文
posted @ 2017-03-05 15:36 yaokunlun 阅读(340) 评论(0) 推荐(0) 编辑
2017年2月24日
flex布局
摘要： 一般我们传统的布局方式是，利用float，position等来实现页面效果，最近用了flex发现效果的实现非常方便，比如垂直居中，还有经常项目中遇到的这种效果： 如果用传统布局方式，虽然能够实现，但是会非常麻烦，如果三个元素的宽度不确定的话，会更加得复杂； 可是用flex就会非常方便： Flex是F 阅读全文
posted @ 2017-02-24 16:20 yaokunlun 阅读(163) 评论(0) 推荐(0) 编辑
css3 属性阴影效果--box-shadow,text-shadow
摘要： 1.text-shadow：h-shadow v-shadow blur color; h-shadow:水平阴影的位置，可以是负值，正值向右，负值向左 v-shadow:水平阴影的位置，可以是负值，正值向下，负值向上 blur:可选，模糊的程度。（单位px） color:可选，阴影颜色 2.box 阅读全文
posted @ 2017-02-24 10:53 yaokunlun 阅读(355) 评论(0) 推荐(0) 编辑
2017年2月23日
（三）用less+gulp+requireJs 搭建项目（requireJs）
摘要： 首先我想说下我在写js时经常遇到的问题，尤其是很大的项目： 1.我一般会把各个功能分块写在各个js文件中： 比如弹出框： dialog.js 然后在需要的文件中调用 b.js 此时会出现如下错误 2.我们经常会在页面上看到这种情况： 作为一个完美主义者，你受得了吗？而且这样写会极大降低加载速度 3. 阅读全文
posted @ 2017-02-23 17:24 yaokunlun 阅读(841) 评论(0) 推荐(0) 编辑