显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Aramey

前端开发

 
 
 
 
 
 

less开发指南(一)- 小牛试刀(转)

2016-4-21 17:28:40 阅读14 评论0 212016/04 Apr21

【一】less简介

  LESS(是.less后缀名的文件) 包含一套自定义的语法及一个解析器,我们根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性,如变量、继承、运算、嵌套等,更方便CSS的编写和维护。

  先看下段less代码片段,感受下它的魅力: 

@url:'../images/'; .box-a{ .hd-a{ height: 25px; background:url('@{url}bg.png'); } }

  编译后的css文件代码:

.box-a .hd-a { height: 25px; background: url('../images/bg.png'); }

  在上面的less代码中,我们看到了css语法的缩影(选择器,属性的写法),LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。我们在前端页面开发时依然引入css文件地址,而less文件则是你维护的代码文件,这过程中,我们只是多了一个步骤 -- 编译

作者  | 2016-4-21 17:28:40 | 阅读(14) |评论(0) | 阅读全文>>

Sublime Text 2 安装Package Control和插件的两种方法(转)

2016-4-21 17:22:29 阅读14 评论0 212016/04 Apr21

缘起

前几天系统刚刚还原了,重装完Sublime Text2再安装插件的时候可能是由于公司的网络环境的问题,各种报错,将解决方法记录下来。系统环境:Win7 x64 + Sublime Text2。

Package Control

方法一:在线安装,首先打开 Ctrl + ~,输入如下的代码:

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

安装完了之后重启软件即可。

ps:输入Ctrl + Shift + P 然后输入Install Package看是否可以调出来Install Package验证下安装是否成功。

方法二:离线安装,前提是需要一个

作者  | 2016-4-21 17:22:29 | 阅读(14) |评论(0) | 阅读全文>>

关于Echarts提示框tooltip高度问题

2016-4-20 11:26:13 阅读10 评论0 202016/04 Apr20

在使用Echarts的数据图表时,如果容器太小,提示框tooltip就会出现问题,比如tooltip的高度不受控制,在触发时会有一半被遮到了,让人很不舒服。

这是Echarts在容器较小情况下的显示。

这是tooltip高度不受控制的状况

这是tooltip在触发时有一半被遮到的状况

要想解决问题,就必须要找出问题原因!

首先,在Echarts中的tooltip是DIV容器,上图为证:

我们会发现这个tooltip是div标签,而且里面有js生成Class,那也就是说,这个tooltip是能继承行高line-height属性的,而这个tooltip的高度是继承了父容器才导致的现在这种状况的!

既然是标签,那就好办了,我们通过生成的Class为他定义一个样式:

.echarts-tooltip {

line-height: 18px;

}

这样就重置了tooltip的样式!

效果图:

但是我们会发现,tooltip在触发时有一半被遮到了!!

这该怎么办呢?

这时候我们查找tooltip父容器这个标签会发现,原来它自带 overflow: hidden; 这个样式!!

那我们可以通过改变这容器的 overflow 来调整!但是这个容器没生成的Class,那也没问题,我们可以通过父容器!

.Echarts-box > div{

作者  | 2016-4-20 11:26:13 | 阅读(10) |评论(0) | 阅读全文>>

关于A链接模拟点击

2016-4-11 10:45:40 阅读8 评论0 112016/04 Apr11

$(' a').eq(0).click();

$('a')[0].click();

此两者的区别在哪?

$(' a').eq(0).click();  是通过jQuery对象进行模拟点击,不能产生对应的A链接跳转事件。

$('a')[0].click(); 是通过DOM对象进行模拟点击,会产生对应的A链接跳转事件。

作者  | 2016-4-11 10:45:40 | 阅读(8) |评论(0) | 阅读全文>>

百度BlendUI小图标对应代码

2016-2-29 16:21:23 阅读20 评论0 292016/02 Feb29

最近百度推出了移动端的web开发框架,在样式里面添加了自定义的字体图标,但是在百度文档内却没有找到对应的ICON图标代码,

比如:

 

这个代码就代表电话小图标,但当我想找其它对应的小图标却无处可查。

于是我自己通过脚本把所有的ICON代码导出来,制作成图片,以方便查询:

尊重劳动成果,转载请注明出处!

原文链接:http://aramey.blog.163.com/blog/static/13900607620161294183859/

作者  | 2016-2-29 16:21:23 | 阅读(20) |评论(0) | 阅读全文>>

查看所有日志>>

 
 
 
 
 
 我要留言
 
 
 
留言列表加载中...
 
 
 
 
 
 
 
 

广东省 广州市

 发消息  写留言

 
莫失己道,勿扰他心。
 
近期心愿贵有恒,何必三更眠五更起,最无益,莫过一日曝十日寒。
博客等级加载中...
今日访问加载中...
总访问量加载中...
最后登录加载中...
 
 
 
 
 
 
 
博友列表加载中...
 
 
 
 
 

日志分类

 
 
日志分类列表加载中...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016

GACHA-当前最火的女人

二次元同好交流新大陆

扫码下载App

LOFTER-最美图片社交

汇聚2000万达人的兴趣社区
下载即送20张免费照片冲印

注册 登录  
 加关注