- 博客(76)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 五分钟带你了解获取el-upload上传图片的宽高
接到一个新要求：需要获取上传图片的尺寸等一些信息，并对上传元素进行一些限制。话不多说直接开撸！思路上传图片完成后，会获取到文件的基本信息。通过构造函数FilerReader将其转换成Base64。通过Image对象获取图片的宽高，下一步按照需求进行必要判断。实操html部分<el-upload action="" :http-request="uploadFile" :show-file-list="false" :disabled="loading"...
2022-05-07 17:14:06
3305
3
原创 JavaScript对象声明
对象的声明==创建object对象有两种方式==第一种方式：使用new操作符后跟object构造函数var person = new Object();person.name = "张三";person.age = 30;第二种方式：使用对象字面量表示法var person = { name ："张三", age ：29};使用对象字面量语法时，属性名也可以使用字符串，如下(=
2016-12-21 10:44:43
705
转载 动图展示16个Sublime Text快捷键用法
在我做了一次包含一些现场编码的演示后，一些观众问我是如何操作这么快。当然这里没有唯一的答案，答案是一堆简单的快捷键和大量的实践的组合。为了回应那些询问，我觉得有必要看看我每天想都不用想且使用的快捷键。这里有一个15 16 个快捷键的精选列表(1个自定义快捷键)，以gif动画展示，我每天使用。享受吧!(译者注：原文所列快捷键均为OS X环境，为了方便Windows和Linux环境童鞋
2014-12-25 16:31:34
1487
原创 关于inline-block的兼容测试
首先说下inline、block、inline-block的区别inline：行内元素显示前后无换行符block：块级元素inline-block： 行内块元素重点说下inline-block这个属性。经过测试当display：inline-block的时候，本身为块元素的HTML标签（比如 div等）应用此样式在IE8+、chrome、firefox 会将块元素转换成行内元素，但
2014-10-19 11:51:34
1473
2
原创 淘宝的reset css
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {margin:0;padding:0}body,button,input,select,textarea { font:12px/1.5 tahoma,arial,'Hirag
2014-07-25 11:41:25
4710
原创 引用外部CSS的link和import方式的分析与比较
多网页中的 CSS 链接与引用是这样写的： @import url("http://www.abaonet.com/abc.css"); 而很多网站使用的都是 link 而像 google 百度 163等网站它们都是直接写在网页中。 当然使用链接 link 和导入 import 的好处就是易于维护，但当网速比较慢的时候，会出 现
2014-07-14 14:21:47
859
转载 IE10 的一些前端有关的特性
.ie{color:red; /* for all browsers*/_color:green; /* hack for IE6*/*color:black; /* hack for IE6 IE7*/color:white\9; /* hack for IE6+(IE6 IE7 IE8 IE9 IE10)*/color:yellow\
2014-07-09 14:34:00
887
转载 css实现强制不换行/自动换行/强制换行
强制不换行 div{white-space:nowrap;}自动换行div{ word-wrap: break-word; word-break: normal; }强制英文单词断行div{word-break:break-all;} CSS设置不转行：overflow:hi
2014-07-08 10:12:59
740
原创 媒体查询
〈link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">〈link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css">//纵向放置的显示屏设备〈link r
2014-05-20 11:35:27
915
原创 前端高手也不能错过的css常识
1、不要实用过小的图片做背景平铺。举例宽高都是1px的图片用做背景平铺太耗费资源。1px 背景图。拼一个200*200像素的区域需要渲染40000次。耗费可不是一点半点2、无边框。推荐的写法是 border:none。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。不过有个特点border：0 占用空间比border：none 少三个字节3、慎用
2014-04-02 23:08:07
1224
原创 解决iphone横屏时字体变大问题最佳方法
前提修改文档声明，如有疑问，请看文章手机web2.0网页文档属性@media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:none}}@media screen and (max-device-width: 480px){body{-webkit-text-size-adjust:no
2014-03-31 17:25:44
2159
转载 WEBAPP开发技巧小结(手机网站开发注意事项)
1、要响应式开发web，也就是页面必须自适应屏幕大小，可以采用流体布局，如之前的文章（自适应宽度布局），其他具体的小问题可以采用media query解决（让IE支持CSS3 Media Query实现响应式Web设计和CSS3 Media Queries）； 2、因为手机大多是高级浏览器，可以使用html5+css3开发； 3、合理灵活的使用meta标签，具体如下；
2014-03-14 14:24:17
1173
原创 CSS reset & 闭合div 适用于HTML5
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr
2014-03-12 22:03:38
1884
转载 点九：避免Andriod平台图片失真的图片形式
“点九”是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。我们都知道android平台有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边角会模糊失真。O
2014-03-12 20:31:17
991
转载 APP界面设计指南|APP界面设计师必备信息图
013年，APP界面设计已经越来越受到大家的关注和热捧！作为一个接触APP界面设计的老鸟，网站设计师们。一定得记住：用户体验设计放在首位！信息图：移动端APP设计指南APP界面设计指南|APP界面设计师必备信息图
2014-03-11 14:15:00
3211
转载 iPhone、iPad等iOS系统界面设计字体规范
做移动UI设计的朋友们肯定都知道，移动客户端的界面上做效果的时候提前找所用的字体，特别注意在windows下设计的字体和实际UI界面上显示的效果很大的差别。博主谈到设计师可以提前和开发沟通好，就是告诉开发字体和字间距之类的需要自定义，请程序提前做好“准备”（一般字体和字的效果程序都是可以提前封装后，整个项目都可以导出自定义），如果提前沟通，这样会提高开发和设计的UI界面的效率。确实是这样啊
2014-03-11 13:45:53
14829
转载 ipad界面设计规范,新手设计iPad的必备宝典
平台特点1 大屏幕，分辨率 1024×7682 再次强调没有固定的方向，必须四个方向都支持。3 可以外接键盘4 可以放置设备，与台式机同步iPhone与iPad的共同特点- 内存有限- 同时运行单个程序- 在设置功能里放置程序选项- 设备方向可以改变- 最小化的帮助，让用户直接就能看懂- 程序响应手势而不是鼠标- 运行源生程序、W
2014-03-11 13:40:03
8180
转载 Android APPUI设计、切图的常用尺寸大全
今天在APPUI设计群里 ，不少朋友在问 android APPUI设计、切图的常用尺寸到底是多少？很不清楚，所以老谭在此跟大家分享下。Android 系统就被设计为一个可以在多种不同分辨率的设备上运行的操作系统。对于应用程序来说，系统平台向它们提供的是一个稳定的，跨平台的运行环境，而关于如何将程序以正确的方式显示到它所运行的平台上所需要的大部分技术细节，都由系统本身进行了处理，无需程序
2014-03-11 11:04:28
5887
转载 Android应用程序UI界面设计官方权威解读
据某媒体报道，2012年国内安卓手机市场占有率达到了36%！可以肯定是 Android 智能手机已经融入到了我们的生活。然而，Android 应用界面设计相对于iphone的界面设计来说，稍有逊色。于是，Android 团队宣布推出官方“安卓设计（ Android Design）网站，就 Android 的主要界面特征对开发者进行设计指导。Android的应用界面设计重点围绕三个总
2014-03-11 10:57:29
2043
转载 苹果iphone APP界面设计尺寸官方版
iphone界面设计尺寸（640*960）px该Iphone界面设计是从苹果官方网站帮助中心提取过来，这也是我第一次帮公司产品设计iphone版的UI使用的尺寸。由于之前接触的比较少，只知道苹果手机的界面尺寸是640*960，其实真正的大小是320*480，因为人的视网膜关系，苹果公司放大了2倍。所以，我们在设计的时候，需要按照该图上的尺寸来放大2倍作为我们设计的尺寸。
2014-03-11 10:51:57
5750
转载 APP设计尺寸规范大全，APP界面设计新手教程【官方版】
1.苹果iOS版本的iphone APP UI设计尺寸规范iphone 5： 设计尺寸是 640px * 1136pxiphone 4/4s： 设计尺寸是 640px * 960px设计软件的分辨率为：72 像素/英寸设计要点总结，我们在设计的时候，需要按照该图上的尺寸来放大2倍作为我们设计的尺寸。或者说，我们初学者可以模仿，可以借鉴苹果公司成熟的
2014-03-11 10:43:58
38566
转载 前端开发规范
基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.文件规范1. html, css, js, images文件均归档至约定的目录中;2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名,
2014-02-27 12:38:49
1282
转载 再谈清除浮动
清除浮动对于任何CSSer来说都是基本中的基本，但我不愿称其为基础，因为最近我浏览网页看到各种充斥的清除浮动的方法后，才彻底明白，虽然各种方法被大量的使用，却甚为混乱。最糟糕的是很多有问题的流传版本的搜索排名都非常靠前，用神大人的话说就是：“错误的知识是毫无意义的”。然而，坊间流传的很多方法其实也称不上错误，而只是有些偏差而已——往往使用中不会出现问题，但是严格地说，它们是不准确的，难道我们搞
2014-02-22 22:10:34
2143
原创 IE下css设置select的诸多问题
IE下设置select的无法实现的。先改变select的尺寸可以设置select的宽高示例代码 select{ height:20px; width:80px;}test1我想尝试使用css来模拟实现可改变高度，其实ie67下可以通过设置font-size来实现改变select的高度，但是这个是个不是很靠谱的方法，我说下我实现的原理：第一步：就是在
2014-02-20 12:50:06
6484
原创 css reset
/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css *//* ============================================================================= HTML5 display definitions ==
2014-02-20 10:13:05
1069
转载 十大CSS技巧
1. 用 firebug 或 console 来调试 在 Firefox 还没有推出 Developer Tools 时，大家一定是用 Firebug 来调试，2006 年 Firebug 第一版 release 出来，让 web 开发者可以更快速的了解网站调试，也可以通过 Firebug 来了解网站的性能。但是现今，Firefox 推出了自家 Develop
2014-01-10 16:18:52
6714
转载 清除浮动解决方案
两种情况清除浮动包括清除子元素的浮动和清除上级元素的浮动，其中清除上级元素的浮动，只需设置clear为both就可以了，而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。因清除上级元素的浮动比较简单，而空标签法清除子元素浮动会增加额外标签，所以在这里主要说clearfix方法、overflow方法及偶然发现的inline-block方法。为什么要清除浮
2013-11-21 16:09:23
885
转载 可以直接拿来用的15个jQuery代码片段
jQuery里提供了许多创建交互式网站的方法，在开发Web项目时，开发人员应该好好利用jQuery代码，它们不仅能给网站带来各种动画、特效，还会提高网站的用户体验。本文收集了15段非常实用的jQuery代码片段，你可以直接复制黏贴到代码里，但请开发者注意了，要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。1.预加载图片
2013-07-18 09:10:40
733
原创 css样式表中的样式覆盖顺序
有时候在写CSS的过程中，某些限制总是不起作用，这就涉及了CSS样式覆盖的问题，如下view plaincopy to clipboardprint?#navigator { height: 100%; width: 200; position: absolute; left: 0;
2013-06-16 09:22:07
1239
转载 一些布局的东西
全局样式采用 HTML5 DOCTYPEviewport 保证在手机上能撑满全屏。且转屏不会出现问题。CSSfont-awesome.css 包含了需要的字体图标。IE 8 及之前版本 IE 的支持需引用以下几个文件。 jQuery直接用 Google 托管的就可以。
2013-05-10 16:01:23
792
原创 浏览器私有属性——css前缀
.box_round { -webkit-border-radius: 12px; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */ border-radius: 12px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
2013-04-27 09:40:08
5828
转载 CSS教程:dashed和dotted的区别
最近的一个页面中碰到的，本来想用 border 来模拟设计图的虚线效果，但是很明显 border 效果不如设计图来的好看。顺便研究了下 dashed 和 dotted 的区别。首先，从字面上来理解，dashed 和 dotted 都是指“虚线”，他们的不同在于：dashed：来自 dash（破折号），由 dash 组成的虚线dotted：来自 dot （点），由 dot 组成的
2013-04-26 15:59:55
3325
转载 DD_belatedPNG,解决IE6不支持PNG绝佳方案
我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是expression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat.而我今天介绍DD_belatedPNG,只需要一个理
2013-04-10 11:46:10
840
转载 固定顶部导航栏完整解决方案
不少朋友想修改成新浪微博那种固定在浏览器窗口顶部的样子，其实很简单。第一步，固定顶部导航栏 其实只需要给导航栏的div增加一个position属性，编辑/theme/sample-blue/base.css文件，在.header{} 加入position: fixed;z-index:999999; position实现了固定，z-index 使导航
2013-03-20 10:00:33
10972
原创 万能闭合div（清除浮动float）推荐使用
关于清楚浮动下面这两篇可以参考。方法比较多了http://blog.sina.com.cn/s/blog_6c0785310100wwm9.htmlhttp://blog.sina.com.cn/s/blog_6c0785310100wwmg.html代码示例1.clearfix:after{content:”.”;display:block;height:0;clea
2013-03-19 16:31:17
1189
转载 让DIV块在页面的某个位置固定的css代码
首先，我们将目光投向了CSS规范，我想很多人和我一样很快就想到了position属性，说到定位，我们很容易想到这个属性。这个属性一共有四个选项：static、relative、absolute、fixed。很高兴，我们在阅读了相关的注释后，我们大概能看到fixed是比较符合我们的需求的： fixed: 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可
2013-03-18 10:25:09
1000
转载 jQuery性能优化指南
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了jQuery Performance Rules>这篇文章, 简单的摘译了一下:总是从ID选择器开始继承在class前使用tag
2013-01-25 09:18:47
469
转载 解决IE6下DIV无法实现1px高度问题
经过测试很好用，大家可以试试IE6.0下DIV不能实现1px高度的几种解决方法解决方法有如下几种：◆1,网上都说多加一个font-size=0px；的属性可以实现．以下为引用的内容： .a{ font-size:0px; height:1px; background-color:red; } 但经过我的测试，细是细了，但不是1px，有点像是2
2012-12-05 09:57:56
664
原创 css设置table边框技巧
好久不用table 在这备注一下这个技巧吧border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。示例代码 table{border-collapse: collapse;} td{ border:1px solid #000;} 1 2 3 4
2012-11-19 10:31:13
3124
转载 CSS清除浮动 万能float闭合
清除浮动，新手朋友往往不是很明白。如果不清除浮动对float进行闭合，在FF中往往会出错，本站有大量的文章进行过介绍。今天向大家推荐一个实例，非常简洁易用。给需要闭合的DIV（class为clearfix）加上如下的CSS样式即可：.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hid
2012-06-07 10:10:12
1261
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人