03 2017 档案

fix元素居中
摘要：今天的一个面试题，我是这么写的： 效果完全可以，可能今天面试官没有看清我写的吧-- 阅读全文
posted @ 2017-03-30 16:01 yaokunlun 阅读(850) 评论(0) 推荐(0)
link和@import引入css的区别
摘要：@import是在CSS2.1提出的，低版本的浏览器不支持。link支持良好； link引用CSS时，在页面载入时同时加载； @import需要页面网页完全载入以后加载。如果页面内容过多，会产生不好的效果； 现在一般用link而不是import； <link rel="stylesheet" hre 阅读全文
posted @ 2017-03-30 15:58 yaokunlun 阅读(289) 评论(0) 推荐(0)
Jquery拓展方法
摘要：拓展JQuery一般有两个方法： 1.全局拓展 比如 $.ajax()就是全局函数 拓展方法： Jquery.extend(); 比如： 拓展后只需在页面直接调用：$.hello("ykl")即可； 2.对象拓展 比如 $("div").height()就是根据对象拓展的函数 拓展方法： jQuer 阅读全文
posted @ 2017-03-29 16:31 yaokunlun 阅读(290) 评论(0) 推荐(0)
webpack+vue2.0项目 （二）热加载，vue-router
摘要：目录创建好之后，命令行输入 因为在配置文件config/index.js里： webpack会默认创建本地服务器监听8080端口，autoOpenBrowser为true，浏览器会自动打开，我一般会关掉，因为以后调试会运行很多次 npm run dev； 然后打开 下面看下几个主要的文件： inde 阅读全文
posted @ 2017-03-20 10:09 yaokunlun 阅读(6704) 评论(0) 推荐(0)
webpack+vue2.0项目 （一） vue-cli脚手架
摘要：很早以前就开始看vue2.0和webpack，但总是留不下深刻的印象，一直缺少一个可以贯通的项目，而且工作也没有时间，最近辞职在家，从网上找了个项目，写了大概八天，踩了无数的坑啊！！ 下载的项目包括，设计图，源码什么的都有，只不过是它基于vue1.0构建的，我用vue2.0从头写了一遍 先写下项目流 阅读全文
posted @ 2017-03-14 21:58 yaokunlun 阅读(2379) 评论(0) 推荐(0)
分享两个常用的rem布局方式
摘要：关于rem 这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。 比如我们设置body，html的字体大小为10px；那么1rem就是10px, 这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。 1.手机淘宝一直用的方法：思路是通过js动态 阅读全文
posted @ 2017-03-14 11:47 yaokunlun 阅读(481) 评论(0) 推荐(1)
移动端border：1px问题解决方案
摘要：了解设备像素和css像素的因该知道，通常我们在写移动端时，是按照设计稿标注的像素除以设备的DPR来写真实的像素， 比如在iPhone6上，我们写的20px字体世界上在视觉效应上有20px; 所以当我们写1px边框时，在手机上看起来会变粗变为2px； 对此有如下解决方案： 阅读全文
posted @ 2017-03-13 22:19 yaokunlun 阅读(3957) 评论(0) 推荐(1)
sticky footer 布局
摘要：在开发中常遇见这种问题，我们需要将底部固定在页面的最下方；无论正文内容的高度是多少； 如果直接用fixed定位:bottom为0；那么当正文过多时，底部将会与正文重叠； 代码如下： html： css 对此，有以下解决方案，她有个很好听的名字，叫做‘sticky foote’ 效果如下：当正文内容少 阅读全文
posted @ 2017-03-10 11:01 yaokunlun 阅读(490) 评论(0) 推荐(0)
用js数组实现最原始的图片轮播实现
摘要：上班以来看到了，写了很多的轮播图效果，实现方法大致有 1.将图片局对定位，利用z-index和opacity实现图片渐现 2.用css3 的transtion：Xx xx left/right,实现左右方向滑动轮播（淘宝） 3.在图片组的前后，各加一张图片，实现无缝连接 4.通过改变图片组外层的ma 阅读全文
posted @ 2017-03-06 17:40 yaokunlun 阅读(4046) 评论(1) 推荐(0)
分享按钮（QQ，微信，微博等）移入动画效果
摘要：ps：最近写的很多博客都是在以前在项目里写过的，之所以现在写出来，最大的目的就是希望自己以后用到的时候比较容易找，而且现在再写一遍，有助于加深印象！ 很简单的效果，说先实现方式： 1.图标来自 阿里巴巴矢量图标库 没用过的可以试下，各式各样的图标，非常好用 2.初始每个分享框左右两侧都有一个隐藏的图 阅读全文
posted @ 2017-03-05 15:51 yaokunlun 阅读(408) 评论(0) 推荐(0)
分享几个自适应布局方式（持续更新）
摘要：1.上下高度固定 中间内容区域自适应 实现方式，上下固定高度，底部绝对定位，中间区域绝对定位，设置top,bottom值为上下部分高度。 效果图： （颜色辣眼睛。。。。） 2.左边宽度固定，右边宽度根据屏幕宽度自适应 实现方式，如下： 效果图： 当然，如果右边还有固定的部分，只需要给中间部分 加上 阅读全文
posted @ 2017-03-05 15:36 yaokunlun 阅读(364) 评论(0) 推荐(0)