前端技术学习
rockyxia 4年前 (2019-02-26) 7511浏览
Vue-SuperSlide Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封装版本，API 配置及使用方法与 SuperSlide 几乎一致，让你能够便捷的在 Vue 工程中使用 SuperSlide。 简介 关于 SuperSlide 的详细介绍可以到 SuperSlide 官方网站 – 大话主席 进行查看。 大话主席的 SuperSlide 是多年以前...
rockyxia 4年前 (2018-11-08) 6983浏览
由于工作原因，我这博客我也很久没有更新过了，只是偶尔打开一下网址看看是否能正常打开，今天过来更新一个命令的记录，尽然发现文章详情页有很多广告，一看发现是我使用的搜狐快站畅言评论插件强行插入的，你插入的小一点温柔一点也好啊，可是却插入的直接影响博客文章阅读了，对于评论列表里面插入的横幅广告我其实不反对，你免费提供了服务带一点广告我可以接受，但是你却在页面右下角插入一个贼恶心的置顶浮动广告，面积还挺大，这有点过...
rockyxia 4年前 (2018-11-08) 6793浏览
最近一直在对CentOS 进行初体验，各种学习命令肿么用，不过其实大多和DOS是一样的，只是命令的表达上可能有点儿不一样，毕竟这些都不是一家出来的嘛~ 废话不多说，直接上命令和解析！ 常用命令 文件与目录操作 命令 解析 cd /home 进入 ‘/home’ 目录 cd .. 返回上一级目录 cd ../.. 返回上两级目录 cd – 返回上次所在目录 cp fi...
rockyxia 5年前 (2018-08-31) 10585浏览
最近在使用webpack4搭建一个多页面项目开发的过程中遇到一个问题，谷歌百度了很久也没有能够解决，不知道同行们有没有遇到的，就是webpack4通过mini-css-extract-plugin分离css文件再通过optimize-css-assets-webpack-plugin压缩，导致sourcemaps不可用，在github上貌似也有人遇到过，好像也没有很好的解决掉，尝试了各种配置都没有成功。 看...
rockyxia 6年前 (2017-06-01) 7475浏览
摘要 收集整理了15个常用的javaScript正则表达式，其中包括用户名、密码强度、整数、数字、电子邮件地址（Email）、手机号码、身份证号、URL地址、 IPv4地址、 十六进制颜色、 日期、 QQ号码、 微信号、车牌号、中文正则。表单验证处理必备，赶紧收藏吧！ 1 用户名正则 //用户名正则，4到16位（字母，数字，下划线，减号） var uPattern = /^[a-zA-Z0-9_-]{...
rockyxia 6年前 (2017-01-11) 7290浏览
写在前面 随着1月9日微信小程序的正式上线，小程序的热度达到了一个顶峰，虽然我不并不是太看好小程序的发展，但是新的事物的诞生，去了解下也是没有坏处的吗。近日尝试了一个小程序的开发，了解下小程序的开发过程，非常的简洁的一个页面，里面有三个tab页，内容都是静态的，引入了微信提供的WEUI样式库。 如果，我是说如果后续还有兴趣的话，我会把数据变成动态的，从博客上开个接口来取数据。 下面来简单介绍下这个简单的小...
rockyxia 6年前 (2016-11-16) 5996浏览
写在前面 对于前端来说，CSS Zen Garden这个网站相信大家都是不陌生的，当年我刚接触网页制作（对，那时还不叫前端）的时候，CSS Zen Garden经常会出现在我的视野中，有些年头了，现在前端工程师不知道还会不会看到这个网站。翻译成中文就是“CSS禅意花园”，同一套html结构，仅通过不同的css来改变网站的样子。 2007年出版的一本名叫《CSS禅意花园》的书，主要讲解 http://cssz...
rockyxia 7年前 (2016-10-18) 5761浏览
DOCTYPE 的诞生 DOCTYPE，或者称为 Document Type Declaration（文档类型声明，缩写 DTD）。通常情况下，DOCTYPE 位于一个 HTML 文档的最前面的位置，位于根元素 HTML 的起始标签之前。因为浏览器必须在解析 HTML 文档正文之前就确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本...
rockyxia 7年前 (2016-10-18) 5782浏览
写在前面 浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间，这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是，由于浮动特性，容器如果没有明确设定高度，会依照普通流内元素高度设置，这样就会导致脱离普通流的浮动元素溢出容器，影响其后元素布局。 我们将现有已知的清除浮动元素方法罗列下： 采用一个HTML标签，以及cs...
rockyxia 7年前 (2016-09-12) 5844浏览
判断手机是否是ios和Android客户端 通过判断浏览器的userAgent，用正则来判断手机是否是ios和Android客户端。网上搜索来的，比较简单： var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !...
rockyxia 7年前 (2016-08-30) 12911浏览
写在前面 css sprite是广大页面仔（前端开发攻城狮）在页面制作经常使用到的一种图片拼合技术，又称css雪碧图或css精灵，能够减少页面请求数、减小图片尺寸，从而达到提升页面访问速度的效果。但是这种技术的缺点也是相当的明显，就是拼图和后期维护的成本比较大，所以经常的使用的时候需要非常的注意，还要保留拼图的psd文件。虽然svg以及iconfont等新技术的出现改善了一些，但是svg和iconfont的...
rockyxia 7年前 (2016-07-19) 9751浏览
写在前面 页面中CSS居中的问题我们经常能遇到，有简单的行内元素水平居中、块级元素水平居中，也有较为复杂的未知高度宽度的垂直居中问题，下面我们来把所有有关CSS居中的情况都总结一下，欢迎补充。 曾经的一篇文章：DIV未知高度垂直居中的CSS解决方法（2011-09-29） 水平居中 行内元素 把行内元素嵌套在一个DIV中，并且在DIV中设置以下样式 div { text-align: cen...
rockyxia 7年前 (2016-05-30) 16928浏览
写在前面 背景颜色半透明在网页中经常会用到，在用到半透明时一般立马会想到opacity，为兼容IE可能还会用到filter，如： filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; 上面的写法是可以达到半透明的效果，但同时也会影响里面的子元素也半透明，例如DIV里面的文字也半透明了，这并不是我想要的。 有没有什么方法能实现只有背景透明...
rockyxia 7年前 (2016-05-04) 6169浏览
写在前面 这套规范是我目前所在团队使用的规范，在此分享给大家。再一次来看这套规范发现我在日常的工作中有很多地方并没有按照规范来，确实有些大意，没有重视这块，可能团队中其他人也没有重视，缺少相互间的监督与互查，现在分享一下，希望我自己能严格遵守起来。后续我还会分享一个更详细的命名方法，与本套规范也属一脉相承，来自与IMWeb的一个建议。 下面就将规范内容直接贴出，希望能给新人一些帮助，若有意见及建议可以在文章...
rockyxia 7年前 (2016-04-20) 23581浏览
概要 现在手机端页面上的上拉刷新、下拉加载更多页面的效果可以说屡见不鲜了，app开发里面都是有集成的控件的，很容易就实现这样的效果。今天给大家分享一个js实现的，能适用与所有web页面的。 相关说明 关于上拉刷新、下拉加载更多的效果从百度上一搜也是玲琅满目，各种的插件、js也是一堆，我所分享的这个也是从网上参考来的，属于非常简洁好用的，可以很好的运用到项目中去。 一个DEMO给大家瞅一瞅，点我！手机可以直...
rockyxia 7年前 (2016-03-21) 6865浏览
继上篇WIN7成功安装SASS记录之后，本周又把SASS如果使用在项目中研究了一番，本次内容是将之前的一个普通的静态页面转化为一个使用SASS的项目，体验了一些基础的SASS规则，像变量、嵌套、判断以及运算等基本的规则，走通了在项目中从scss文件到css文件的流程，没有使用专门的SASS编辑工具和引用第三方SASS库，都是原生态的做法。下面说下我的操作过程： 1、确定项目文件架构 与正常的项目差不多，看我...
rockyxia 7年前 (2016-03-15) 5865浏览
网上有很多sass安装的文章，今天安装sass也是参考的这些文章，总结下来就是两步： 1、安装ruby 2、安装sass 网上教程比较清晰的一篇文章分享给大家：http://www.w3cplus.com/sassguide/install.html 其中ruby部分安装没有问题，但是sass安装时却遭遇到了问题，无论是默认的RubyGems安装还是淘宝RubyGems镜像安装 都不成功，最终还是让我找到一...
rockyxia 7年前 (2016-01-21) 7830浏览
写在前面 querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。 目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。 IE6、IE7怎么办 querySelector 和 querySelectorAll ...
rockyxia 9年前 (2014-10-30) 5958浏览
写在前面 inline-block元素在布局时会给我们带来很多方便，但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙（有的浏览器可能是8px）。废话不多说了，直接讲解决方法吧。 几种尝试 总体来时可分为两种方法，一种是改变html结构法,另一种是css法。 先说第一种，比如下面这段代码: <ol> <li>首页</li> ...
rockyxia 9年前 (2014-08-31) 7457浏览
正文直接开始 现在经常会遇到让输入身份证号码的需求，那么我们应该如何验证身份证号码的合法性呢？今天我们来分享一个js验证的方法。 function checkIdcard(num){ num = num.toUpperCase(); //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。 if (!(/(^\d{15...