一个炫酷、快速的PC网址导航站-百元导航

一个炫酷、快速的PC网址导航站-百元导航

2年前 (2015-12-29) 浏览: 128 评论: 0

前几天在一个网站上发现了一个炫酷的导航网页,界面美观大气,采用windows8磁贴风格、网站图标采用扁平化设计。后来发现这个导航网页是开放源码的,于是就下载了一份,并做了细微的修改与优化放在我的主机上,取名“百元导航”。之后我就自豪将“百元导航”设置为我所有浏览器的主页。因为我可以自信地告诉你,这个导航网页二次加载速度绝对快于任何导航网站(不服可亲测),包括主流的百度搜索、360导航。话不多说,百元导航的网址:http://wangbaiyuan.cn/daohang,欢迎大家将其设置为你的浏览器主页和提出宝贵意见。 0.3s的极速加载体验 百元导航的首次加载速度在我的15M宽带下、360极速浏览器谷歌内核下测试速度为851ms,二次加载速度260ms,并且支持第二次没有联网都可以访问。之所以能在不到0.3s的速度里完成加载,是因为网页内的所有资源包括CSS、js以及网页自身的html都缓存在本地。二次访问相当于你在本地硬盘上打开一个网页文件。 怎样实现浏览器资源缓存 一般来说,浏览器会将其访问过的一些资源文件进行保存,比如CSS,JS,这些存储在本地磁盘的网页文件称为缓存,在二次访问时,浏览器一般会优先访问本地缓存里面的内容,如果网页中还有些资源文件在缓存里没有找到或者缓存已经过时,才会通过网络连接向服务器上请求下载。这就是我们在上网时发现一个网站首次访问速度会特别慢、第二次就快很多的缘故。 浏览器缓存css、js是默认行为,缓存时间也是不确定的,为了让浏览器缓存所有的文件,甚至包括网页文件自身,并且让浏览器缓存的CSS、JS缓存的时间足够长,服务器可以做一个缓存文件类型设置和缓存超时设置。 在网站根目录或者当前资源文件目录中的htaccess中加入: 表示将扩展名为flv、gif、jpg、jpeg、png、ico、swf、js、css、pdf、eot 的文件缓存过期时间为2592000秒,30天。如下同理,将js、css过期时间设置为10天: 将txt、xml、html过期时间设置为10天   或者在PHP中使用@header函数发出响应头消息告诉浏览器资源过期时间: 上面实现了将放置此代码的PHP文件返回的文件类型是text/css)缓存过期时间为每天北京时间0点,GMT时间(格林尼治时间)16:00。 有自动提示、支持多引擎的搜索框 搜索框的代码是我在原有的导航网站源代码基础上加入的,支持百度、极客搜、谷歌、360、搜狗搜索,并使用了百度开放的百度搜索框提示代码“opensug.js”实现了自动提示功能。具体的实现方法可以参考我的下一篇博文:支持自动提示的多引擎的搜索框。  

让博客插入的视频宽度自适应

让博客插入的视频宽度自适应

2年前 (2015-10-14) 浏览: 129 评论: 0

好久没写技术类博文,这次暂且水一水上次在博客里发了一段个人制作的视频,使用的优酷提供的分享代码:就是一个embed视频标签,无奈优酷提供的代码视频长宽都是死的,600*400的样子,在电脑上还行,在手机上宽度太大直接撑爆了手机屏幕,用户体验很不好,下面的代码就是实现在不同设备自动适应宽度的。实现原理很简单,就是用js(jquery)动态设定视频的长宽度。 请将下面的代码加进主题的functions.php文件中,并且将代码中所有的#main-wrap-left换成显示文章的div的class名或者ID。  

安卓实现倒计时按钮效果

安卓实现倒计时按钮效果

2年前 (2015-08-20) 浏览: 225 评论: 5

安卓手机管家类软件,在对手机的应用权限进行管理时常常会跳出这样的弹出框。 这样的按钮出现在很多场合,系统会给一定时间比如30s提示用户选择操作“禁止”还是“允许”,并设置倒计时,并在倒计时为零后系统会为用户选择默认行为执行。这个设计十分智能化,在无人使用手机时实现了自动化处理。下面介绍使用handler和Runnable实现这样的按钮是效果: 安卓实现倒计时按钮效果 在极客人的一篇转载文章《Android使用线程更新UI的几种方法》中,提到了用在Android里使用 Runnable和 Handler.PostDelayed(Runnable,Time) 定时更新界面。下面我讲解的便是使用Runnable和 Handler.PostDelayed(Runnable,Time) 实现倒计时效果的按钮。 假设点击倒计时按钮的动作为运行函数 function(),按钮变量名为forbiddenBtn下面是实现的代码: 原理 上面代码实现的原理是使用timeHander.postDelayed(context,int)函数定时调用一个Runnable呢,这里是延时1000ms执行一下timerRunnable。调用上述倒计时的代码为: 即立即执行timerRunnable;当执行timerRunnable时,由于second初始化为30s,if语句执行else部分,second在button上显示出来后执行减1,然后通过timerHandler.postDelayed(this, 1000); 在1秒后再次执行timerRunnable,此时second=29……依此类推,当second=0时,就会执行function(),执行倒计时归零后的默认操作,

自己动手制作图标字体

自己动手制作图标字体

2年前 (2015-07-13) 浏览: 139 评论: 2

位图和矢量图 世界上不是所有的事物都适合用审慎的眼光来看待,有的东西只可远观、不可近看。一张图片,放大放大再放大,不论是单反的拍摄的巨照,还是几十兆的数码相片,放大之后便如同大量马赛克一样,显露出图像的本质——点(也就是像素)。我们看到的丰富多彩的照片实际上就是由一个个点组会而成,存储图片只要描述出每一个像素点的颜色,将把像素汇聚一体,抽身远观之下,就是一幅绚丽的图片。 如上图所讲,我们会想到数学课本上举世公认的定理:面由点组成。这似乎也没什么错,但是今天我说面是由线组成的,你可能会觉得我只是玩一个文字游戏。其实我想讲的是,这两种表述其实代表两种计算机图片格式的思路——位图和矢量图。如果说“面是由点组成的”,我说的是“位图”;如果说“面是由线组成的”,我说的是矢量图。这两种表述在表面上没什么大区别,其实在表示图像上与很大的区别。 位图使用我们称为像素的一格一格的小点来描述图像.您的计算机屏幕其实就是一张包含大量像素点的网格.在位图中,上面我们看到的树叶图像将会由每一个网格中的像素点的位置和色彩值来决定.每一点的色彩是固定的,当我们在更高分辨率下观看图像时,每一个小点看上去就像是一个个马赛克色块。 矢量图使用线段和曲线描述图像,所以称为矢量,同时图形也包含了色彩和位置信息.下面例子中的树叶,就是利用大量的点连接成曲线来描述树叶的轮廓线.然后根据轮廓线,在图像内部填充一定的色彩。 图标字体 矢量图你之前也许闻所未闻,甚至直到看到这篇文章你才惊悉它的存在。实际上你一直就在矢量图的“此山中”,你所看见的计算机字体其实就是矢量图,证明的途径就是:你不管把word的字体调多大,它都是那么清晰,字的轮廓边缘还是那么圆滑平整。 使用wordpress让我有缘结识了图标字体,诚如你所见,王柏元的博客导航菜单上所用的图标就是图标字体,因为你会发现它和文字无异可以和文字一样改变颜色、设置大小还永远都是高保真。 wordpress上fontawesome用的极为广泛,国内也有阿里巴巴矢量图标库。图标字体的使用为网站开发省去许多美工的工作。初见图标字体你一定会惊叹它的神奇,进而你可能追本溯源想知道它究竟是怎么做出来的。 使用icomoon制作个性图标字体 当你设计出一个很美观的图形、头像,或者当你对自己的毛笔字很自信,同时你又对书法家字体用到枯燥乏味的时候——你想在网站中使用自己的图案或者甚至将PPT的通篇文字都设置你自己的毛笔字体。那么,使用icomoon制作个性图标字体就是不错的选择。 制作图标字体的第一步是制作矢量图 要制作矢量图,一个简便的方法就是将位图转换为矢量图。因为得到位图的方式很简单,你只需要用手机将你设计的图案或者毛笔书法作品拍摄下来就得到位图了。  

Android开发使用FontAwesome图标字体

Android开发使用FontAwesome图标字体

2年前 (2015-06-11) 浏览: 193 评论: 0

英文原文参考:https://github.com/liltof/font-awsome-for-android 在前面一篇文章中我向大家介绍了在WEB前端中使用FontAwesome字体。 Font-Awesome 是为Bootstrap设计的一个图标集合字体,里面包含了300多个常用图标。使用Font-Awesome还具有如下优点: 1. 减少了图标的绘制工作 2. 可以设置图标的颜色和大小 3. 减少了图标的大小并且可以减少apk的大小,只需要一个图标字体文件即可,不需要各种尺寸的图标文件了,比如 HDPI、XHDPI等各种尺寸的图标。 Android开发使用FontAwesome图标字体 到Font-Awesome主页下载Font-Awesome字体(fontawesome-webfont.ttf)文件并放到项目的assets目录下,找到需要用的图标对应的字符串(font-awsome-for-android 包含了一份图标和字符串的对应文件,最新的对应关系在下载的Font-Awesome字体中的css目录中的font-awesome.css文件中查找),在TextView中设置需要使用的图标文字,然后设置TextView的字体为自定义的Font-Awesome字体。   xml布局文件代码   java代码 另外如果需要在使用Drawable的地方使用Font-Awesome图标,则可以自定义一个Drawable,然后在代码中使用该Drawable,详细使用方式请参考fonticon这个示例项目:https://github.com/shamanland/fonticon 另外除了Font-Awesome图标字体以外,还有其他的图标字体,例如 http://icomoon.io/

安卓开发实现沉浸式状态栏

安卓开发实现沉浸式状态栏

2年前 (2015-05-27) 浏览: 698 评论: 1

自android4.4出来以后,沉浸式状态栏莫名地就火了起来,而最近,极客人的安卓手机无意中更新完几个常用软件,比如天天动听、wps office,发现这些软件大体上没什么改动,不过都陆续实现了沉浸式状态栏效果。极客人当初第一次见到这个名词时,以为这是个很高大上的技术,不知道你也是否也觉得。不过真正知晓以后所谓的、传说中的沉浸式状态栏是什么东西时,才发现真是“见面不如闻名”。 不管沉浸式是否高大上,但它就是很火,也成为刷机论坛各个刷机包炒作的看点。极客人在此还是向大家介绍怎么在安卓开发中实现安卓4.4及以上的手机应用实现沉浸式状态栏效果。 安卓开发实现沉浸式状态栏的代码相当简单。在activity代码中加入以下代码即可: 安卓开发实现沉浸式状态栏代码:   代码解析: Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT这句是获取当前手机SDK版本号大于或等于Build.VERSION_CODES.KITKAT(安卓4.4,详情请看附录)时及即执行如下代码: Build.VERSION_CODES类:目前已知的SDK版本号的枚举类,这些值可以在SDK中找到,每次官方发布,这些值都是单调递增。 SDK版本号附录: 第一版: Build.VERSION_CODES.BASE 1.1版: Build.VERSION_CODES.BASE_1_1 1.5版: Build.VERSION_CODES.CUPCAKE 此版官方未发布: Build.VERSION_CODES.CUR_DEVELOPMENT 1.6版: Build.VERSION_CODES.DONUT 2.0版: Build.VERSION_CODES.ECLAIR 2.0.1版: Build.VERSION_CODES.ECLAIR_0_1 2.1版: Build.VERSION_CODES.ECLAIR_MR1 2.2版: Build.VERSION_CODES.FROYO 2.3版: Build.VERSION_CODES.GINGERBREAD 2.3.3版: Build.VERSION_CODES.GINGERBREAD_MR1 3.0版: Build.VERSION_CODES.HONEYCOMB 3.1版: Build.VERSION_CODES.HONEYCOMB_MR1 3.2版: Build.VERSION_CODES.HONEYCOMB_MR2 4.0版: Build.VERSION_CODES.ICE_CREAM_SANDWICH 4.0.3版: Build.VERSION_CODES.ICE_CREAM_SANDWICH_MR1 4.1版: Build.VERSION_CODES.JELLY_BEAN 4.2版: Build.VERSION_CODES.JELLY_BEAN_MR1 4.3版:Build.VERSION_CODES.JELLY_BEAN_MR2+NEWLINE); 4.4版:Build.VERSION_CODES.KITKAT); 注意: ①加入如下代码的界面,所有控件都会向上移,但是标题栏“actionbar”除外,极客人鼓捣了好久代码也没解决怎么把actionbar放在手机界面的顶部,所以建议大家将activity的主题theme设置为:“noactionbar”。实现方法如下: 在清单文件中activity标签中添加: ②你可能需要自己写个标题栏在布局的顶部 如果你有更好的方法,欢迎留言共同学习!

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册