- 博客(37)
- 收藏
- 关注
RSS订阅原创 关于移动端踩过的坑
1.ios与android的标签表现不一致的问题ios和android的select标签还有input[type=”button”]在真机上的样式会有区别，所以我们可以加上这一条css来消除ios和android的样式差别：-webkit-appearance: none;2.ios上不支持new Date(yyyy-mm-dd)这个坑真的把我坑惨了，找了半天才找到这个原因，ios上你如果new D
2017-07-31 14:14:16
1702
原创 关于移动端布局
移动端布局的问题如今手机设备多种多样，屏幕大小各不相同，下面说一下如今的几种移动端布局. 1. 宽度百分比布局 + px布局. 先说一下，这种布局虽然我现在没有用，但是还是有见到过，这种布局如果你按照750设计图来做的话其实在主流手机屏幕上展示都挺不错的，但是如果屏幕非主流的话，那显示出来的效果就很差了，所以这种布局不建议使用. 2. 媒体查询 + px布局 这种布
2017-07-31 11:34:00
667
转载 Vue.js 和 MVVM 小细节
转载自http://www.cnblogs.com/onepixel/p/6034307.html Vue.js 和 MVVM 小细节 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewMode
2017-01-27 19:36:11
1604
原创 vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件：<parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰</parent>data(){ return { msg: [1,2,3] };}子组件通过props来接收数据: 方式1：props: ['chil
2017-01-20 23:46:06
107635
2
原创 细说vue的过渡动画
在vue中，实现过渡动画一般是下面这样:<transition name="fade"> <div></div></transition>用一个transition对元素或者组件进行封装. 在过渡的时候，会有 4 个(CSS)类名在 enter/leave 的过渡中切换。v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。v-enter-active: 定义
2017-01-20 22:59:39
31295
1
原创 vue2.0从入门到入坑
1.接触vue从原生js、jq到接触vue，刚开始感觉真的非常不习惯，写html的时候，我就不习惯标签上大量的class，这下到vue，感觉更爆炸了，标签上全是指令，甚至还有逻辑，一度感到很暴躁，但是，深入接触之后，才发现vue的魅力。 为什么感觉反差很大呢？因为以前用js、jq都是直接操作DOM来进行一系列的操作，基本上写js、jq最多的就是document.getElementById()或者
2017-01-20 22:04:42
4674
原创 如何处理单行文本和多行文本溢出
1.单行文本溢出处理代码如下:<style> .text2 { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }</style><div class="text2">Lorem ipsum dolor sit
2017-01-02 00:04:11
1292
原创 响应式设计概述
1.设置viewport移动端一般会有布局视口(layout viewport)，可视视口( visual viewport)，理想视口(idea viewport)，一般手机为了能够显示网页，会将布局视口设置为980px以上；可视视口就是浏览器的窗口大小；理想视口呢，就是不需要缩放就能查看网页的宽度，一般移动端都是采用理想视口，为了实现理想视口，我们会在head当中写这样一段代码：<meta na
2016-12-24 01:11:01
744
原创 深度解析&&，||以及for
&&一般都知道,&&是与的意思，只有当&&两边都为true时，则返回true，以前用&&和||只是简单的在if语句中进行判断,但是最近在做一个播放器时,我发现了&&竟然还可以这么用！：audio.readyState==4&&(buffered=audio.buffered.end(0));这段代码的意思是如果&&前面的代码的结果为false，则不会执行后面的代码，如果为true，则执行后面的代码，
2016-12-17 00:31:15
652
原创 window.onload和$(document).ready()的区别
window.onload必须等待网页中所有的内容加载完毕后(包括图片)才能执行,并且不能同时编写多个,如果写有多个window.onload,那么只会执行后面的window.onload。 window.onload=function(){}等价于$(window).load(function(){}).$(document).ready(function(){})可以简写成$(function(
2016-12-04 10:20:04
389
原创 jq中on()的用法
一般情况下,我们可以直接采用click(),hover()等等直接绑定事件,但是既然on()存在,那么肯定有它的意义:1.用来绑定多事件,并且为同一函数$('div').on('click mouseover',function(){ //do sth});2.多个事件绑定不同函数$('div').on({ 'click':function(){ //do sth
2016-12-03 21:59:16
6377
原创 jq中ajax跨域
$.ajax({//请求方式 type:'GET', //发送请求的地址以及传输的数据 url:'fzz.php?number'+=xxx, //服务器返回的数据类型 dataType:'jsonp', jsonp: 'callback', success:function(data){ //请求成功函数内容 },
2016-12-03 12:40:22
908
原创 js实现淡入淡出轮播图
1.图片淡入淡出自动轮播. 2.可以用按钮控制轮播. 效果图: 代码如下: html+scc:*{ margin: 0; padding: 0; } html,body{ width: 100%; } .container{ po
2016-11-23 21:07:02
3998
原创 js实现图片左右移动轮播
实现效果: 1.图片能够自动轮播. 2.移入图片时自动轮播停止,并且有左右两个箭头. 3.图片下方有一排按钮,可以点击进行切换，并且按钮的样式也随之切换.代码如下: html+css:*{ margin: 0; padding: 0; } html,body{ width: 100%;
2016-11-23 20:05:49
11518
原创 js、jq两种方法实现网页侧边导航
js第一种方法:实现的效果如下: 1.在侧栏滑动时背景颜色切换和字体颜色切换. 2.窗口滚动时，右边侧栏随之变化. 3.点击侧栏选项,跳动到当前选项对应的页面,并且侧栏也随之变化.代码如下: html+css:*{ margin: 0; padding: 0; } li{ list-sty
2016-11-23 17:52:03
6496
原创 Ajax基本概念以及JS实现Ajax的过程
Ajax基本概念Ajax全称为”Asynchronous JavaScript and XML”(异步JavaScript和XML),通过后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，可以在不重新加载整个网页的情况下，对网页的某部分进行更新. Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键-发送异步请求、接受响应以及执行回调。实现Ajax的过程:1.我们通
2016-11-21 11:30:42
5674
2
原创 关于button与submit的区别
最近我在表单中使用了button标签，我的本意并不是想要提交表单，但是很奇怪，我明明只是用了button,并没有创建submit啊，查阅资料之后，原来是这样的，这是w3school里的原话: 如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 与 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单
2016-11-20 21:17:55
610
原创 jq中的return false
今天做一个导航demo时，发现源码在each()中使用了return false跳出循环,然后想起了我前两天好像在表单操作的时候用到过return false,然后看了看锋利的jqury表单那一章，发现文中这样说到：阻止表单提交可以直接用”return false”语句.然后又查阅了下资料,发现return false并不只是阻止浏览器默认事件,return false=e.preventDefau
2016-11-18 15:53:37
993
原创 flex布局学习记录
推荐阮一峰写的flex布局博客,这里我只是说下自己的学习记录. flex布局可以实现响应式布局. 兼容性: 实现flex布局,要有父容器和子元素. 将父容器设置为display:flex. 父容器设置为display:flex之后，它的子元素的float,clear,vertical-align属性将失效。 flex容器有两个轴，一条为主轴，一条为交叉轴，主轴和交叉轴与x,y轴类似.
2016-11-09 15:52:23
451
原创 浅谈style.,currentStyle,getComputedStyle,getAttribute
xxx为属性. ele为元素.1.style.在前面的一篇博客中我也有说到,ele.style.xxx; 通常用于赋值,用它来取值的话，它只能取到内联样式.2.currentStyle这是ie用来获取样式的方法,通常这样使用:ele.currentStyle.xxx;3.getComputedStyle除了ie貌似都支持,使用方法:getComputedStyle(ele,false)[xxx];
2016-11-09 14:22:50
840
原创 利用translate()进行水平垂直居中
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中. 代码如下://html:<div class='wrap'> 我不知道宽高，但是我就是要水平垂直居中</div>//css.wrap{ padding:10px; background:green; color:#fff; position:abso
2016-11-08 13:49:47
28639
原创 style.left,style.width与offsetLeft,offsetWidth、scrollLeft，scrollWidth的区别
1.offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置.offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。2.style.left必须是节点设置了position属性 style.left、style.width等属性通过
2016-11-04 13:54:24
1950
原创 详解clientWidth，scrollWidth，offsetWidth,innerWidth的区别
详解clientWidth，scrollWidth，offsetWidth,innerWidth的区别
2016-11-04 13:32:06
11470
转载 css负边距
CSS布局奇淫巧计之-强大的负边距 css中的负边距(negative margin)是布局中的一个常用技巧，只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距，所以掌握它的用法对于前端的同学来说，那是必须的。本文非常基础，老鸟可以略过。 负边距在普通文档流中的作用和效果那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位
2016-11-04 10:49:56
529
转载 css子元素合并父元素的margin值
现象：当两个空的块级元素嵌套时，如果内部的块设置有margin-top属性，而且父元素没有下边解决方法所述的特征，那么内部块的margin-top属性会绑架父元素（即将margin-top传递凌驾给了父元素）。
2016-11-04 10:45:20
767
原创 各种居中问题总结
水平居中1.宽度确定的块状元素水平居中:margin:0 auto;2.不定宽块状元素水平居中:设置父元素为: position:relative; float:left; left:50%; 设置子元素(想要居中的元素)为: position:relative; left:
2016-11-01 13:00:10
596
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人