博客

  • 制作固定定位的导航栏

    固定的边栏或者导航栏貌似现在很流行,特别是边栏的广告位,老是跟着你走。这几天大修了一下主题,把顶部缩到只剩导航栏的位置,固定不动,考虑到边栏内容太小,于是边栏一起修改了,比导航栏稍微复杂一点。

    效果:导航栏和边栏固定,不随页面滚动。CSS关键代码:

    #header{
         width:825px;     //宽度需要确定
         position:fixed;     //固定定位
         z-index:999;     //解决某些情况下固定定位的内容被其他内容遮盖,值越大,表示放的位置越“上”
    }
    
    #sidebar{
         width:162px;
         position:fixed;
         margin-right:-411px;     //配合下一条right:50%,使边栏定位在页面之内,值应为网页主题宽度的一半
         right:50%
    }

    其他说明:可以看到以上代码并没有声明定位常用的 top,因为测试发现,当声明了 top,元素就会相对于整个窗口定位,而不是父元素。例如,如果博客开启了顶部的工具栏,而导航栏在工具栏下面,当声明了 top,导航栏就会忽略工具栏所占的位置,和整个浏览器窗口坐标作定位。当然,关闭了工具栏可以临时解决,但是当垂直方向有连续的固定定位是,那就出问题了,就像导航栏和边栏同时固定定位。

    附加效果(JS):导航栏遮盖正文时80%透明,鼠标选中导航栏时不透明。效果预览参照本博

    jQuery 代码:

    $('#header').hover(function(){     //hover函数,括号内,逗号前的函数是选中时的效果,逗号后的函数是移开时的效果
         if ($(window).scrollTop()>0){     //页面有滚动,也就是说导航栏遮盖住主体内容
              $(this).css("opacity","1")     //透明度1,就是不透明
         }},function(){     //这一行的逗号就是第一行所提到的
         if ($(window).scrollTop()>0){     //无论选中还是移开,首先判断时候有滚动
              $(this).css("opacity","0.8")}     //非透明度80%
         });

    这是鼠标选中移开的效果,还有滚动时自动透明的效果

    $(window).scroll(function(){     //页面滚动时自动执行
         if ($(window).scrollTop() > 0 ){     //页面有滚动,也就是说导航栏遮盖住主体内容
              $('#header').css("opacity","0.8");     //透明度80%
         }else{
              $('#header').css("opacity","1");     //非透明度100%
         }});
  • 这几天的糊弄

    别以为我要告诉你怎样仿站,我是真的在问怎样仿站!最近帮一个师兄用 WordPress 仿一个站,感觉无从下手,我要从哪里开始呢?我要照搬 html,然后 copy 整份 css 文档呢,还是重建一个 html 档再逐个套 css 呢?尼玛,答案已经很明显了,我已经搬了 html,还没整理!因为我一开始弄这个,我就情不自禁弄自己的博客(-_-‘)。是的,我已经连续几天上班时间偷偷打开博客自个弄了,正如你现在所见的,我感觉我已经开始反感弄主题了,看到代码我就有想吐的感觉了……看到照片博文的同学,有什么好的方法介绍一下吗?

    说说这几天的成果吧,现在估计 html 和 css 还有 js 的精简程度已经 98% 了,剩下的东西已经是不能去掉的了,还有 2% 是我没发现能精简的东西了。页面的布局都精确计算啊,差一 px 都会恶心死啊。把所有图标都整合到一个gif文件中,传说中的CSS雪碧(-_-‘),唉,其实很多年前已经开始用了啊,只是中间增加图片觉得麻烦而已啦。现在 IE9、chrome、firefox测试同步率高达99%啊,IE8我猜也可以的啦,其他的我就不管那么多了,因为,访问量实在是太少啦!

    现在,最恐怖的时候几乎要到了,当我觉得我已经完成这个主题的修改的时候,我已经开始对这个主题产生审美疲劳,我想换主题!

  • 精简强迫症

    像很多人那样,我发现我有强迫症。症状是,对于无用的东西,我要能精就精,能简就简。对于有用的东西,也一样。难受!还伴随重度的完美主义,让我的人生充满了折腾。手机老刷机,刷了老精简,老找bug,老修复bug……博客老修改,一天一个版本,老看不顺眼,看到别人的老想模仿……这两样是我最沉迷的活动没有之一。两样活动的相同点就是充满了BUG,非常费神,还有浪费时间,最重要是,没啥用。

  • 怎!么!这!样!

    这是一篇敲完标题然后过了一个半个月再写的东西,感觉挖了个坑就一定要填些什么东西下去,不然不自在。但是我现在重新开始写这篇东西,却不是像半个月前想的那样叙述有关“怎么这样”的事,而是,思考一下人生。但是在思考人生之前,我想起来几天前我又敲下一个标题,叫自剖,很明显这个标题更符合这篇东西的内容,但是事情就是这样决定了,无伤大雅。

    问世间最大的学问是什么呢?是不是做人呀?我不知道的,我只知道世间最难的事是做人,所以我是不会做人的人。什么举手投足什么待人接物,这一类词我听到心里就厌恶得很,因为我是被认为是不懂做人的人,而我又极力反抗根据片面事实来否定我的这些事实。说到底就是我的EQ极低,低到连谢谢都不会说。我当然想要改变,但是我找不到很好的方法,这沉淀十几二十年的性格我不知道要怎样突破它,因为时时刻刻它都在支配着我。我也不知道怎么EQ突然过渡到了性格了。是的,绝大多数错误的出现我都归咎于性格,非一般的内向,而另一面,面对熟悉的朋友(不包括亲人),我又很放得开。噢,是的,慢热,很慢热,我很慢热。怎!么!这!样!我怎么会是这样的人!我不想要这样!哎,突然就点题了,这样显得第一段内容就非常多余了……还是继续吧。

    其实我在这无病呻吟之时,答案也早已有了,是改变不了呢,还是不想改变呢,还是没勇气改变呢,还是懒得改变呢?

  • WordPress 如何调用 jQuery 库

    本文中将讲解调用 jQuery 的几种方法,当然都是针对 WordPress 的,请自行按喜好进行选择:
    WP 的 jQuery 和原版唯一的不同, 就是在最后一行加了

    jQuery.noConflict(); 

    这个 noConflict() 就是为了与其它的 library 兼容性, 如: Prototype, MooTools, 或 YUI.
    第一种方法,直接在网上搜索到的 jQuery 特效,然后对其进行直接调用:

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jQuery.js"></script>

    2.使用 Google 的 API 库进行调用,貌似很多 jQuery 都是这样调用的,很多插件通过 Google API 替换了 WP 默认的 jQuery,利用谷歌强大的服务器来加快其调用加载速度。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jQuery/1.2.3/jQuery.min.js">

    3.直接调用 WordPress 自带的 jQuery 库:

    <?php wp_enqueue_script('jQuery'); ?>

    但要注意的是:此句必需加在 wp_head(); 的前面!
    并且在js文件中的写法是:

    jQuery(document).ready(function($) { … }); 

    这样 jQuery() 包里的所有 $() 才能被正确识别.
    当然也可以使用以下方法,将:

    $(document).ready(function() { … });

    修改为:

    jQuery(document).ready(function($) { … });
  • 工具:透明化桌面窗口的小工具 Vitrite

    使用非常简单,切换到想要透明化的窗口使用组合键 Ctrl+Shift+上排数字键(英文区域上方),透明度由1到0递减。

    这软件非常简单,运行了只在托盘显示图标,尽管你多手点开开,也只是看到一堆英文说明而已,简单到甚至没有截图。

  • 久违了,博客

    很久没有在上班的时候写博客,或者是很久没写博客了,原因我想很复杂,所以就不去想了,费脑筋。

    其实写博客挺享受的,一边写一边幻想别人在看,虽然没能力将眼神转化成金钱,但这东西就是这么过瘾。弄一个喜欢的域名,做一个喜欢的主题,写一些无聊的东西,这是很看个人情况的,因为是在是有时间去做这些事。

    高中时期写空间日志,全是“微博”,大学时期,我有足够时间写一篇800字的无聊透顶、语句不通但自认为十分过瘾的东西,换来一些评论,足够了。再后来,真的没这闲情逸致了。——题记有点长(-_-“)

    现在在某灯饰厂工程部做绘图,工作量大的时候很大,小的时候很小。说是绘图,但身兼打样、资料员、报价、绘图于一身,工资很低,时间很长。为什么要做呢,因为想切入本地区的灯饰行业,在这里发展,这应该是不错的选择。没钱没能力那只能打工,农村的打工不同城市的打工,苦逼得很。所以,毛长硬了就飞吧少年。

  • Cookie 在前端开发中的一些事

    Cookie 操作在前端开发过程中会经常遇到。

    Cookie 的属性

    除了 name(名)和 value(值), Cookie 还有以下一些可选属性,用来控制 Cookie 的有效期,作用域,安全性等:

    expires属性

    指定了 Cookie 的生存期,默认情况下 Cookie 是暂时存在的,他们存储的值只在浏览器会话期间存在,当用户退出浏览器后这些值也会丢失,如果想让 Cookie 存在一段时间,就要为 expires 属性设置为未来的一个用毫秒数表示的过期日期或时间点,expires 默认为设置的 expires 的当前时间。现在已经被 max-age 属性所取代,max-age 用秒来设置 Cookie 的生存期。

    如果 max-age 属性为正数,则表示该 Cookie 会在 max-age 秒之后自动失效。浏览器会将 max-age 为正数的 Cookie 持久化,即写到对应的 Cookie 文件中。无论客户关闭了浏览器还是电脑,只要还在max-age秒之前,登录网站时该 Cookie 仍然有效。

    如果 max-age 为负数,则表示该 Cookie 仅在本浏览器窗口以及本窗口打开的子窗口内有效,关闭窗口后该 Cookie 即失效。max-age 为负数的 Cookie ,为临时性 Cookie ,不会被持久化,不会被写到 Cookie 文件中。 Cookie 信息保存在浏览器内存中,因此关闭浏览器该 Cookie 就消失了。 Cookie 默认的 max-age 值为-1。

    如果 max-age 为0,则表示删除该 Cookie 。 Cookie 机制没有提供删除 Cookie 的方法,因此通过设置该 Cookie 即时失效实现删除 Cookie 的效果。失效的 Cookie 会被浏览器从 Cookie 文件或者内存中删除。

    如果不设置 expires 或者 max-age 这个 Cookie 默认是 Session 的,也就是关闭浏览器该 Cookie 就消失了。

    这里要说明一下:Session 的 Cookie 在 IE6 下,如果用户实在网页上跳转打开页面或新开窗口(包括 target=”_blank”,鼠标右键新开窗口),都是在同一个 Session 内。如果用户新开浏览器程序或者说是进程再打开当前的页面就不是同一个Session。其他浏览器只要你 Session 存在,还是同一个 Session, Cookie 还能共享。在前段时间的项目中 IE6 下吃了很大一个亏。

    Domain 属性

    Domain 属性可以使多个 WEB 服务器共享 Cookie 。Domain 属性的默认值是创建 Cookie 的网页所在服务器的主机名。不能将一个 Cookie 的域设置成服务器所在的域之外的域。

    例如让位于a.sodao.com的服务器能够读取b.sodao.com设置的 Cookie 值。如果b.sodao.com的页面创建的 Cookie 把它的 Path 属性设置为“/”,把Domain 属性设置成“.sodao.com”,那么所有位于b.sodao.com的网页和所有位于a.sodao.com的网页,以及位于sodao.com域的其他服务器上的网页都可以访问这个 Cookie 。

    Path 属性

    它指定与 Cookie 关联在一起的网页。在默认的情况下 Cookie 会与创建它的网页,该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联

    Secure 属性

    它是一个布尔值,指定在网络上如何传输 Cookie ,默认是不安全的,通过一个普通的http连接传输;

    HttpOnly 属性

    HttpOnly 属性限制了 Cookie 对 HTTP 请求的作用范围。特别的,该属性指示用户代理忽略那些通过“非 HTTP” 方式对 Cookie 的访问(比如浏览器暴露给 js 的接口)。注意 HttpOnly 属性和 Secure 属性相互独立:一个 Cookie 既可以是 HttpOnly 的也可以有 Secure 属性。

    Cookie 的传输

    浏览器将 Cookie 信息以 name-value 对的形式存储于本地,每当请求新文档时,浏览器将发送 Cookie ,目的是让 Server 可以通过HTTP请求追踪客户。所以从WEB性能的角度来说我们要尽量的减小 Cookie ,以达到传输性能的最大化。

    Cookie 的编码和解码

    由于 Cookie 的名/值中的值不允许包含分号,逗号和空格符,为了最大化用户代理和服务器的兼容性,任何被存储为 Cookie 值的数据都应该被编码,例如用我们前端熟知的 js 全局函数 encodeURIComponent 编码和 decodeURIComponent 解码。

    Cookie 作为客户端存储

    前面说了每当请求新文档时,浏览器将发送 Cookie 到服务器,导致WEB性能下降。所以不建议将 Cookie 作为客户端存储一种实现方案,替代方案参见:JavaScript 本地存储实践(html5 的 localStorage 和 ie 的 userData)等。

    同名的 Cookie

    同名的 Cookie ,不同的 Domain 或不同的 Path ,属不同的 Cookie ;同名的 Cookie ,相同的 Domain 且相同的 Path ,不同的 expires,属同一个 Cookie 。

  • 那些挥之不去的回忆

    一直以来我都是喜欢怀念的人,好像比谁都活得久,比谁都经历丰富一样-_-” 但是时光不能倒流,过去的就过去了,每次回忆往事都会加深对不能回到过去的惋惜和失落,但也渐渐明白到这就是生活啊,不是吗?

    前几天做梦,梦见在床底下找到了那些陪伴我长大的磁带,在梦中非常激动。我不记得是什么时候学会用家里的巨型录音机,应该是听我爸妈的磁带那时候吧,还记得那时觉得“现代爱情故事”很好听,一直在倒带听……所以现在我喜欢听这首歌也是有原因的,但并不是歌词那些原因咯:)然后上学前班买的aoei、bpmf的磁带,以前出版这些磁带的比现在的用心多了,里面都是老师教学生的情景。还有就是儿歌的磁带,奶奶买的,都是粤语儿歌,那些耳熟能详的就不用说了,连那些奇奇怪怪的我都听过,不知道这些歌现在还存不存在这地球上呢?

    许许多多记录着不同时期记忆的物件在5、6年前的搬家都丢失或者扔掉了,可惜不已,但新的生活还在进行,老的回忆不断增加,如此,何必老想这过去的过去呢。

  • 生命不息 蛋疼不止

    如果要我以一个字形容这次的半大不小的聚会,我会说,怎么什么不太好的都被我们遇到了?我不知道为什么10个傻逼兴致勃勃要去网吧嘿咻怎么会遇到所有网吧当晚都不开!然后第二天早上又兴致勃勃去,又出现一个特别傻逼的连身份证都没有!——致10个傻逼

    虽然好久不见,但在群上也经常聊聊,所以再见了全都是那副鸟样,没有陌生(包括所有的男男女女),实实在在。吃饭唱K,很传统的聚会形式。最后9个人分在两个同学的出租房里睡,睡的比较苦逼,好热啊我~~而另外一边却说冷得要关风扇!就是能看到以下风景的性价比很高的房间。最后真心求下次不苦逼。

    DSC_0023
    DSC_0033