新版个人简历+博客写作方向

好久没有写一些生活记录类的文章了,今天就来一篇记录一下。马上就要开学了,有种很奇怪的感觉。如果说还在家里,觉得每天都坐在电脑面前真的有点无聊。如果说要回到学校,又是这种事那种事的,也挺烦人的。反正我留下或者开学,都无所谓了,就那么过吧。只是越学越觉得学得不踏实,很多东西只是皮毛,却以为用的很熟练。Javascript 从上学期就要拿下,结果这个假期都没有搞下。还有很多设计草稿,还只是画在上面,还没有做。执行力真的有些不行了。

新版个人简历

原本跟团队里面的人承诺,假期也要升级我的个人简历,但是转眼一个假期就过来了,也没有去做。当然草图是有的,打算应用视差滚动做一个,一共有六个页面,包括怎么滚动怎么交互都想好了。但是一个假期都没把视差滚动的相关技术研究好。之前看到网上有些插件,于是就想用插件的方法,但是插件都太不好用了。看起来太麻烦,就不想看,然后就忙别的了。

当然,昨天上午彻底不能忍了,于是就查找视差滚动相关教程,然后就找到了,然后看完之后豁然开朗,做这种效果太简单了。教程文章:Build a parallax scrolling website interface with jQuery and CSS 。这是11年8月份的文章,当时视差滚动已经流行了一段时间了,不得不承认,国内的技术水平和设计实力就是不如国外啊。国内很难找到关于视差滚动的教程,更找不到一些作品。

然后就开始动手做呗。拿出之前画的草图,挑选了几个场景,然后 PS 素材,写写代码,就做出来了。当然,这个版本的跟我之前的构思差距太远了,很多细节都没处理上,但是用了几个小时就做出来了。主要还是为了应付哈,有些滚动的方式什么的处理的不算好,大家可以看一下,如果有什么建议提一下。点击这里打开 于江水

博客写作方向

先来吐槽一下百度这个大垃圾搜索引擎。自从之前那次 robots 事件之后,google 的收录几天就全部恢复了,百度到现在还只是几十篇文章。瞎了百度的狗眼算法,光记忆中的就有两次 K我的博客,连搜索“潜行者m”这样的独一无二的关键词都找不到。距离那次已经接近半年的时间了,从那次之后,我就不用百度的搜索服务了。说是专注搜索体验,连我的原创博客都K,搜索也出现很多垃圾,滚蛋吧。

谷歌是最好的搜索引擎,但无奈香港节点经常抽风。所以,本人推荐使用 Bing。自从上次百度K站事件过来,我用 Bing 已经快半年了,这半年的搜索体验还算不错,虽然图片搜索经常抽风。也比百度的狗屎算法强多了。百度其他服务也有好的,也就百度云放点文件还不错。对了,百度还把我一老站给K了,流量直接减半。那论坛根本连碰都没碰,根本没改版过,也没有什么服务器的问题,就这么无缘无故的K掉。老子真想用 robots 吧百度给屏蔽掉,只能期待 X60 抓紧崛起。

其实也分析过为什么会这样。我写过的文章,通常都投稿到 我爱水煮鱼 博客上面,一般就给通过了。然后,通常就会有转载到别的地方的。对于百度这种垃圾算法而言,我的博客文章就成了复制转载的。所以写作方向要改变,这个博客主要记录前端相关的学习总结,包括一些 CSS3 Html5 之类的,推荐一些 jQuery 插件,翻译一些教程等。我还会写一些 WordPress 的文章,主要以翻译文档为主,但是不会发在这个博客上了。关于 WordPress 的文章,我直接发到 水煮鱼 博客上,这个博客如果有好的前端文章,发表一个月后再投稿到 水煮鱼 上。

还是尽量高的提高文章质量,更新频率不会太高。

回到学校

返校之后,马上开始酝酿已久的一个项目。抓紧给团队的人施压,给他们上课让他们学习。就目前了解的情况来看,大家在假期里都玩的挺好,一点都没学。虽然说,慢慢来,不能太慢了吧。

最后,再吐槽一下 IE,某日不小心搜索 HTML5 兼容性 出来的。

吐槽IE

 

在页面中添加滚动一定距离后跟随滚动模块的方法和注意事项

现在在网页中,经常可以看到一些滚动跟随模块。比较常见的两种场景:

  1. 页面滚动到了导航条位置,然后导航条就固定到页面顶端,跟随滚动
  2. 边栏高度不如正文高,滚动到边栏末端,出现一个跟随页面的滚动的边栏模块
    本文就是来介绍如何实现这个效果,并且解决这个效果带来的一些问题。

实现的基本原理

固定到页面的某个位置,并且跟随页面滚动,实际上就是用到了一个 CSS 中的 position 属性值 fixed。对 HTML 对象指定 position 属性为 fixed 之后,这个对象就会保证位置不变,跟随页面滚动。但是这个属性在早期的 IE 浏览器中是不支持的,有很多 hack 方法,在这里不再赘述。

那么,要想实现 滚动一定距离 之后,某个模块跟随页面滚动,要做的就是用 Javascript 来监控页面的滚动事件,判断滚动距离是否达到目标位置,然后对要跟随滚动的模块修改 position 属性为 fixed。当然,也可以提前做好一个滚动跟随模块,用 display 属性隐藏起来,等滚动到了一定距离,取消显示。至于怎么出现和出现什么内容,就看你自己的需求了。用 jQuery 监控方法如下:

$(window).scroll(function(){
if ($(window).scrollTop()>64){
$(“#menu”).css({position:”fixed”,left:”0px”,top:”0px”});
}else{
$(“#menu”).css({position: “relative”});
}
});

这里,对 window 对象使用 jQuery 的 scroll 方法,用来监控滚动事件。当页面滚动的时候,就会触发定义的函数。函数的功能也比较简单,使用 scrollTop 方法来获取当前网页滚动的位置距离页面顶部多高(单位 px),然后用 if 语句判断,当滚动距离页面顶端超过 64px 之后,就对 id 为 menu 的模块修改 CSS 样式,让它跟随页面滚动。当小于这个高度的时候,再修改回去。

虽然功能比较简陋,但大体的原理就是这样,更多具体的效果,请自由发挥。

两个跟随滚动插件

神说,这么好的效果应该做成插件,于是就有了插件。这里简单的介绍两款基于 jQuery 的插件:Sidebar FollowScroll Follow

这是 mg12 写的一个小插件,代码比较少,功能也比较简单,所以使用起来就比较方便。看名字就可以知道,主要用于边栏模块的跟随滚动。代码页比较少,有兴趣的同学可以看一下。

Sidebar Follow官方主页和使用说明

Scroll Follow

这是个比较老功能比较强大的插件,可以实现各种你想要的跟随滚动效果。具体的下载地址和使用方法,也不再赘述了。

Scroll Follow官方主页和使用说明

添加跟随滚动模块的注意事项

本文介绍的技术其实没有什么技术含量,写本文的最主要的目的,是想介绍下面这两个注意事项。

尽量少的使用

再好的功能,也要适度使用。屏幕的空间本来就有限,加上一个很高的导航条,再加上左下角、右下角的广告,右边再来个边栏跟随,这样的页面你如何才能专注的看正文内容?所以要尽量多的留出浏览者阅读的空间,适度的补充内容,尽量保证页面的整洁。才能有一个比较好的用户体验。

设置合理的结构防止页面塌陷

这个问题才是本文的重点,网上很多采用这个效果的页面都中了这个问题。先来看看问题演示 demo

塌陷的具体问题效果很明显,就是下面的内容突然跑上去了,产生了回流(reflow)。回流简单的说,就是当你页面中某个部分突然消失了,浏览器就需要重新渲染网页的内容。潜行者M的 Demo 页面由于结构比较简单,所以具体效果只是内容突然上去而已。但是对于结构比较复杂、代码比较多的网站来说,一旦出现回流,浏览器就要重新计算渲染,页面就会卡一下子。如果浏览者的电脑配置比较低,甚至会卡一下电脑。如果浏览者的浏览器版本比较低,可能会导致页面错乱。

事关用户体验的问题,是不能容忍的。问题的原因,就是突然改变了相关结构的 CSS 属性导致。就本例而言,原来的导航条 position 属性是 relative ,在页面中占据一定空间。突然改成了 fixed 脱离了文档流,自然浏览器要把原来位置补上,重新渲染。

所以,在设计页面跟随滚动模块之前,一定要考虑到这个细节。最好设置比较好的 HTML 结构,撑起来。也可以在要滚动的模块外面包裹一层结构,用来占位。也可以在一开始,就让滚动模块脱离文档流。潜行者M的建议是,最好专门设置一个用来滚动的模块,先隐藏,然后触发显示。

使用 jquery.easing.js 增强动画过渡效果

jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法,可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ,可以实现很多动画效果。为了让动画有好的过渡变化过程,官方为这些方法设置 easing 属性,但是官方没有给出很多过渡效果。

jquery.easing.js 这个插件,增加了很多过渡效果,引入之后可以让动画过渡过程更加多样化。

先来看一下:Demo。官方也有案例:打开官方主页

如何使用 jquery.easing.js

第一步 引入插件

jQuery 插件嘛,当然要先引入 jQuery,然后再引入 jquery.easing.js 。

<script type=”text/javascript” src=”http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type=”text/javascript” src=”http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

然后再在引入代码下面编写调用的 Javascript 代码,注意代码顺序

第二步 启用插件

首先先假设使用 animate 方法把网页上的 class 为 aa 的 div 的宽度,从原本的 300px 变成 600px。按照 animate 的写法,加上 easing 。

$(‘.aa’).animate( {‘width’:’600’} , { duration:1000,easing:’easeInOutCirc’ });

这样,就对 aa 对象,启用了一个 easeInOutCirc 过渡效果,在 1000毫秒 内变成 600px。

可以应用的动画方法

不仅仅支持 animate 方法,还支持 hide、show、slideDown、slideUp、fadeIn、fadeOut等等支持 easing 的动画方法。只需要按照官方对应的格式去写就可以,这个插件相当于扩充了官方的过渡效果样式

插件的参数

这个插件有三个参数:durationeasingcomplete

duration 参数

用来指定动画变化的时间,以毫秒为单位。

easing 参数

指定这个动画要使用何种过渡样式。具体的过渡样式名和效果,需要在官方主页上查看左边的 “Example”,选择找到自己想要的效果。

complete 参数

设置一个回调函数,当动画完成之后,执行这个函数。

其他注意事项

使用 slideUp 动画方法

slideUp 这类的动画方法,要比 animate 简单一些,不需要复杂的属性参数,所以可以直接这样写:

$(element).slideUp(1000, method, callback});
$(element).slideUp({ duration: 1000, easing: method, complete: callback});`</pre>
其他的 hide 、show 之类的方法,自行类比。

### 指定默认的 easing 样式

在使用中 easing 参数是可以省略的,省略之后,就会调用默认的过渡样式。可以使用下面一句代码,指定默认的动画过渡样式。
<pre>`jQuery.easing.def = "过渡样式名,例如 easeInOutCirc";

用起来挺简单的,但是有了更和谐的变化效果,可以增强用户体验。更多用法欢迎观看 Demo

如何用 WordPress 写出一篇“好看”的文章

一篇文章是否好看,无非在于两方面,第一个就是文章本身的内容,另一个就是文章显示的排版布局。潜行者m博客自创建以来,也已经过去了近两年的时间,这其中积攒了很多在 WordPress 写作的经验,特别是在文字排版这块。回首观看,早期的文章质量比现在的要差远了,本文就是总结一下对于使用 WordPress 写作文章排版的经验。

一些基础知识

在后台编写文章通常使用可视化的编辑器,你看到的排版布局就是比较具体的效果,但实际上数据是用 HTML 结构来记载的。例如,当你回车换行,那么在换行的地方系统就会加上一个段落标签(<p>),当你插入一个连接的时候,用的就是锚标记(<a>)。HTML 是具有语义性的,根据 HTML 的语义性写出的一篇文章,对于 SEO 、排版都有好处。此外,WordPress 主题的作者,通常也会针对这些结构进行一些设计和样式处理,会使其显示的效果更好。

用标题划分文章层次

用标题划分文章层次

标题标签(<hn>)是非常重要的一个 HTML 标签,它对于 SEO 也有很重要的作用。通常用它来划分文章的层次。写一篇文章,肯定要有一定的层次,也就是所谓的大论点、小论点等。通常的文章一般具有三个层次:文章标题、大标题、小标题,通常来说,对应的标签是 h1、h2、h3。对于有的主题来说,设计者会用 h2 作为文章标题,这点也需要注意。标题标签一共有六个(h1-6),分别代表不同的重要等级,实际应用当中,只会使用 h1-3。需要注意以下两点:

  • 内文标题层次不要高于文章标题。如果文章标题使用了 h1,那么内文大标题只能使用 h2。
  • 小标题包含在大标题中。分清楚小标题属于哪个大标题属于什么层次,不能把小标题和大标题的层次混合。
    合理的使用标题划分文章层次,可以让文章变得更容易理解,对阅读者和 SEO 都有好处,更有一些插件可以根据文章的标题建立目录层次,例如 水煮鱼 开发的 TOC 文章目录插件

对于重要的文字进行加重处理

这一点大家都知道,不再赘述。但是要注意的一点,只对非常重要的关键词进行加重,加重的效果通常是文字加粗,这样可以吸引浏览者的目光,如果太多的话,就会分散阅读者的注意力,要尽可能的少。下图就是个加太多的例子。

善用有序和无序列表

如果你在文中写的内容具有明显的并排性,可以作为一个列表,那么一定要使用无序列表(<ul>)或者有序列表(<ol>)。无序列表就是指没有顺序的列表。如果你想列举某项产品有什么样的有点,或者是一些赛事列表,那么你应该使用无序列表。有序列表是指一些有顺序的并排信息。如果你想写一下使用某个软件的四个步骤,或者是发布一个有明确顺序的资源列表,那么就用无序列表。

善用有序和无序列表

见过很多文章会对一些并排性的内容,手动编写诸如 1、2、3 之类的编号,其实这是错误的,应该使用有序列表, CSS 自动添加编号上去。

善用空格

空格是文章中比不可少的一部分,但是很多人用空格的方法是错误的。空格不是用来排版的,它不像是在 Word 之类的软件里面,使用空格在段落的开头空开两格。中文的写作习惯是在文章段落的开头,空开两个字符,这空开的距离,并不应该使用空格来实现,而是使用 CSS 对段落标签增加属性 text-indent 来实现的。这个是主题设计者的工作,如果你用的主题并没有做这个,那就不会自动空开了,你只能自己修改 CSS 或者用空格模拟空出两字的效果,但这是不合理的。

善用空格

那么空格究竟要用在什么地方呢?用在重要的关键词上面,特别是英文关键词。英文在中文文章中是个不太好处理的东西,绝大多数的作者会直接把英文字母和中文混写在一起,但是这样的显示效果并不好。具体对比效果如下图

善用空格

在稍微重要的关键词的两边,我加了两个空格,稍稍加一点距离,对于英文单词,除了空格之外还对首字母进行大写,两条文字一对比效果很明显就可以看出来。

标注文章引用内容

标注文章引用内容

有的文章可能会引用一些其他文章的资料、名人名言等,这样就需要选中这块文字,点击“块引用”,这样就可以告诉阅读者,这是一块来自他人的内容,我引用过来的。

用预格式化描述代码等有格式的内容

例如一段代码,通常有换行、空格之类的用来保持代码的结构,如果以普通的文字发布,可能会破坏这个结构,所以要用预格式化。

用预格式化描述代码

使用其他修饰的注意事项

其他的文字修饰还有很多,包括:斜体、删除线、下划线、颜色、字体大小等。这些文字修饰要慎用,用多了,会让阅读者感觉杂乱影响阅读心情。就颜色来说,一篇文章中最多不要超过两种颜色。

颜色不要超过两种

尽量多的使用图片

虽然不能极端的说没有图片的文章不是好文章,但是一篇好文章是肯定有图片的。文章中的图片主要有以下两个用处:

  • 与文章内容相符增强文章表现力
  • 缓和阅读中的视觉疲惫
    所以,文章中,要尽量配图。配图也要跟文章主题相符合,例如:介绍人物的文章,配张人物图片;介绍软件的,配张软件截图;写心情生活类的,可以配张唯美的图片等等。

用心去写文章

一篇文章最吸引人的是文章的内容,再好的排版,没有好的内容,人们也不会去看的。所以要用心去写文章。

写之前有明确的目的(介绍自己的写作排版经验),有一个大体的构思(包括写哪几部分),然后觉得写出来会给阅读者一定的帮助,这时候就开始动手写。写的过程中,按照之前的构思,列出大纲和知识点收集整理相关资料,然后针对每个知识点去截图或者用 PS 作图来更形象的描述这个问题。写完并且上传图片之后,还要反复检查两边,看看是否有废话、错别字以及没介绍清楚的地方。

就本文而言,本人用了两个小时的时间来写作,为写出一篇有价值的文章,付出这些是值得的。

一个反例

下图是从 所谓刚子 博客上截取的,是一篇被我缩小的文章,整体是一大段文字没有任何的段落层次、修饰、图片,是一个非常好的反例。

一个排版不好的反例

如果只是一篇短小的文字,这样是可以的,如果是一篇很长的文字,不免让阅读者疲惫。

写在最后

用 WordPress 写出一篇好看的文章,首先要用心去写,写出一篇高质量、有阅读价值的文章,其次要对文章不同的内容进行修饰。本文就介绍了一些写作经验。

至于文章内容具体的修饰样式,是根据你用的 WordPress 主题而定。本人的原创主题 Qetro 就对文字的排版进行了一定的优化,如果你的博客写文字比较多一点,不妨试用一下看看效果。 ^_^

用 jQuery 制作一个简单的遮罩弹窗效果教程

客户的网站上突然需要一个遮罩弹窗效果,也可以称作暗箱之类的,具体效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见,例如:QQ空间浏览相册等。这种效果的好处就是,可以让用户聚焦到弹出的菜单中。

神说,有代码的文章,应该有个 Demo ,于是就有了 Demo

HTML 结构

首先先来分析一下这个过程:触发某个事件(例如点击按钮),然后出现一个背景遮罩上面还有一个内容层。触发的按钮,我在这里用 div 来代替,并且使用 click 点击事件来演示。那么我们的 HTML 结构就很明确了。

 <div class="click">点击这里</div>
 <div class="click1">效果增强版的</div>
 <div class="bg"></div>
 <div class="content">这里是正文内容</div>

CSS 代码

对于遮罩效果的 CSS 代码是最关键的。遮罩用到了两个 div ,一个作为背景,要覆盖整个网页,另一个是内容显示层,通常要居中处理。

.bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;}
.content{display:none;width:500px;height:300px;position:fixed;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;}

简单解释一下,首先要隐藏起来,之后用 jQuery 触发显示。之后指定 position 的属性为 fixed,因为这样,才能激活 top 、left 、bottom 、right 、z-index这些属性,同时可以设置 width 、height 为 100% 来实现覆盖整个网页。通常情况下,一般用 absolute 属性值来实现这种效果,因为它的兼容性更好。但是在实际应用当中,当页面很长,往下滚动的时候,使用 absolute 遮罩层也会跟随滚动。对于内容层来说,比较简单,指定宽度和高度用负边距来使其居中显示。

特别要注意一点,背景层的半透明使用的是 opacity 属性,因为使用这个属性可以更好的用 jQuery 来控制。但是 fixed 、opacity 都是早期 IE 浏览器不支持的。

jQuery 代码

分析一下遮罩的交互操作,无非就是点击弹出,然后点击一下遮罩,消失。那么就直接对 CSS 进行操作即可。

   $(function(){
$(‘.click’).click(function(){
$(‘.bg’).css({‘display’:’block’});
$(‘.content’).css({‘display’:’block’});
});
$(‘.bg’).click(function(){
$(‘.bg’).css({‘display’:’none’});
$(‘.content’).css({‘display’:’none’});
});
});

这里直接使用 CSS 方法,当点击的时候改变 display 属性,此外还有很多实现方法,不再赘述。完成这些,当我们点击“点击这里”之后,就可以看到效果了。

更多技巧和方法

更平缓的显示

点击之后,突然出现并不是一个好方法。所以我又增加了一个按钮,点击之后通过 fadeIn、fadeOut 方法来控制渐隐。

 $(‘.click1’).click(function(){
$(‘.bg’).fadeIn(200);
$(‘.content’).fadeIn(400);
});
$(‘.bg’).click(function(){
$(‘.bg’).fadeOut(800);
$(‘.content’).fadeOut(800);
});

这样简单的方法,就增强了用户体验。当然,还有一些更高级的效果可以实现。

其他的实现方法

现在的方法确实足够简单,但是兼容性不够好,对于早期的 IE 浏览器不兼容。通常的做法是这样的:用 Javascript 获取整个网页的高度、宽度,赋值给遮罩层,这样即使打开遮罩滚动网页,也不会出现没有遮罩的地方。具体的代码和实现方式,请看这篇文章:简单的jQuery弹出遮罩层

差不多就是这样吧,至于内容层的展示之类的,就靠你根据具体内容自由发挥了。

10个前端开发必备的工具或使用方法

工欲善其事必先利其器,有了本文介绍的工具和一些功能,你就可以高效的处理任务和信息。下面的这些工具都是本人平时经常用到的,如果你有更好的更有效率的工具,请告知一声,补充一下!

火狐浏览器

使用火狐浏览器

前端要看网页,浏览器是必备的,但为什么要选择火狐浏览器而不是谷歌、IE、opera、360?首先,IE就不要谈了,360那些国产的也不要提了,opera 国内使用率并不高。使用谷歌浏览器也是一个好的选择,但是我本人倾向于使用火狐。因为在之前的使用过程中,感觉 chrome 是拿来上网用的,而 Firefox 才是拿来开发用的,特别是下面介绍的一些功能插件都是基于火狐浏览器的。当然谷歌浏览器上面也有一套不错的开发工具。

Firebug

FireBug

这个插件具有非常强大的功能,它把网页的 HTML 结构进行了整理,查看和修改 CSS 也非常方便。这只是基础的功能,还有控制台等可以调试 JavaScript 等,是前端不可缺少的工具。具体使用方法不再赘述。

查看选中部分源代码

查看选中部分源代码

这是火狐浏览器中内置的一个功能,通过选取网页上的一快内容,然后右击查看选中部分源代码,可以快速查看到你选中部分的源代码内容。这样就可以非常快速的了解到某个区域的 HTML 结构,从而避免从海量文件中寻找对应代码。

Yslow

使用 Yslow

网站性能优化也是前端的一个重要任务,而雅虎出品的 Yslow 插件,就是进行网站性能测试的工具。使用它进行测试之后,会给出一个等级以及存在哪些问题以及如何进行修正。官方地址:点击这里

查看元素(三维视图)

查看元素 三维视图

火狐浏览器自带的查看源代码功能还是比较弱的,于是有 查看元素 这个功能。使用鼠标放在某个元素上,右击 查看元素 ,即可看到这个元素的 HTML 结构和对应的 CSS 样式,也可以很方便的修改。但是通常使用 FireBUG 来完成这个任务,因为自带的功能不是特别强。这里主要介绍的是 查看元素 功能中的 三维视图 功能。这个功能可以把你的网页变成三维视图,从而可以非常方便的查看到网站的结构是否合理、是否正确闭合、是否嵌套层数太多。

自适应设计视图

自适应设计视图

目前响应式设计越来越流行,这个功能就是来测试网页的响应式布局效果。同样也是火狐浏览器中内置的功能,在 菜单 中 Web开发者 选项中可以找到。虽然网上也有一些网页版的响应式测试工具,但是我个人觉得还是浏览器自带的比较方便实用,速度也比较快。此外,据说 chrome 上面也有类似的工具。

IE9

IE9

IE9 是用来做兼容性测试用的。如何做 IE 兼容性测试呢?IE9 已经像 firefox chrome 一样,内置了非常简陋、难用的页面调试功能,但是其中有一个非常重要的功能,就是设置浏览器和文档解析模式。它可以方便的切换到 IE7 、IE8 文档渲染模式,此外还有怪异模式等等。这样,用IE9就可以同时做IE7和IE8的兼容性测试。对了,IE6呢,IE6怎么办。原来你还在费力的做IE6的兼容?

有道云笔记

有道云笔记

前端也是需要不断学习的,包括一些总结或者网上的资料。以及一些优秀作品的网页截图、图片资源等等,都是需要分类整理的。面多这么多的信息,你如果用文件夹和 Word文档或者浏览器的收藏夹来整理,那简直是弱爆了。有道云笔记是我用过最好的比较,容量大,使用方便。可以直接使用网易邮箱登陆开通,如果你还没有账号,可以通过我的邀请链接注册。

火狐剪报

火狐剪报

快速对当前网页进行截图,并且可以进行简单编辑。搭配有道云笔记,可以记录优秀的设计,提供一些灵感。此外有很多类似的网页截图工具。

notepad++

NotePad ++

非常小巧好用的文本编辑器。用来快速高效的搜索修改代码。如果你想修改一点小代码的时候,却要忍受几秒的编辑软件启动时间,那么就用这个吧。无论是写代码还是修改代码,个人觉得都比那些功能齐全的编辑软件好很多。当然文本编辑器也有很多,但是用了一遍我个人觉得这是最好的。

DD_belatedPNG 与 unitpngfix 两种解决IE6中PNG文件透明问题方案横向对比

虽然 IE6 骂声不断,但是仍然还有不少的市场份额。而在网页中,png 文件体积小、无锯齿、透明度好而被广泛使用。当这两件事情碰在一起,问题就来了,IE6 不支持 png 的透明,它会把透明的部分显示成白色的。

有问题就会有解决方法,可以使用早期IE6支持的滤镜来实现透明效果,有些牛人就根据这个原理进行了封装,做成了 JS 来使用。所以,我们只需要调用他们编写 JS 文件即可。在网上有众多解决这种问题的方法和插件,但是实际上目前有这两种方式比较有效,那就是DD_belatedPNG.js 和 unitpngfix.js 这两种方法。本文就是简单介绍一下使用方法和特点,然后将其进行一个对比。

DD_belatedPNG.js 方法

DD_belatedPNG.js 这个插件功能非常强大,强大的背后就是复杂的使用方法和体积大小。首先要下载这个 JS 文件,然后引用到页面中,之后就要为其填写配置一些参数。通常要用两个参数,一个是 CSS 选择器,使用这个选择需要处理的层或者图片,另一个是类型,就是这个图片是作为 img 图片还是 background 背景图片来使用的。插件体积的话,压缩版也有7KB。

知更鸟已经写了一篇比较简单的使用方法:使用DD_belatedPNG让IE6支持PNG透明图片

官方的英文版提供了更加详细的教程:点击这里

unitpngfix.js 方法

unitpngfix.js 这个插件使用起来非常简单,不需要配置什么参数,只需要引入JS插件即可。而且非常小巧,只有2KB,不需要进行任何配置。但是要注意,JS 文件里面还要配置一个小图片地址,这个图片就是一个1像素的透明图片,是这个插件必须的素材。所以你需要上传或者在网上找个,然后填写进去。

更加详细的使用方法请看官方页面:点击这里

上面介绍两种方法的两种方法的使用方法,下面我们从实际应用来对比一下。

实践对比测试

介绍的再怎么好,也要通过实践检验。下面就来动手做个 Demo 亲自测试一下使用过程和效果。Demo 页面非常简单,就是一个带有透明 png 背景图片的 div ,并且把背景图片放在了右下角,关键代码:

div{width:400px;height:400px;margin:20px;background:url(222.png) bottom right no-repeat;border:1px solid #000;}

打开之后的效果是正常的

png 正常效果

现在我们启动伟大的经常无条件崩溃的 ieTest ,使用 IE6 来加载这个页面

IE6 下 png 文件的出错效果

成功的显示出了白色的背景,哦也!

使用 DD_belatedPNG.js 方法:先引用 JS 文件,然后设置上属性和参数。具体代码如下:

<!–[if IE 6]>
<script src=”DD_belatedPNG_0.0.8a-min.js”></script>
<script>
DD_belatedPNG.fix(‘div,background’);
</script>
<![endif]–>

DD_belatedPNG 在 IE6 下修正效果

刷新之后,成功修正!

使用 unitpngfix.js 方法:上传并且设置好小图片,然后引用 JS 文件。具体代码如下:

<script src=”unitpngfix.js”></script>

Unitpngfix 在 IE6 下的修正效果

但是刷新之后,背景图片却出不来了。当然这个与 IEtest 的不稳定也有关,在原生IE6下测试应该不会出现这种情况(未测试),在之前的实际使用中,偶尔会出现这种情况。大部分时候,作为背景图片会跑到左上方,因为 unitpngfix 对 background 的属性支持不太好(官方有提到)。

用户体验对比

DD_belatedPNG.js 的使用效果比较好,达到了要求,但是使用起来比较繁琐,需要针对性的对要使用的图片添加参数,这样就不便于后期的修改。当然,可以新建一个专用的类,为所有需要处理的图片,添加这个类即可,总体上也是比较方便的。此外体积也稍大。

unitpngfix.js 使用起来非常简单,只需要引入这个文件,就可以对页面中所有的 png 图片进行处理。但是对于原图片的 background 属性支持不太好。尤其对 background-position、background-repeat 等属性,容易失效。而且有时不太稳定(未在原生IE6下测试)。体积较小。

从效果出发,自然是选择 DD_belatedPNG.js ,但 unitpngfix.js 也是有价值的。如果要你为一个包含很多 png 图片的页面做兼容处理,你是选择使用 DD_belatedPNG.js ,为图片一一添加属性或者把选择器一一填上,还是直接引用一个 unitpngfix.js ,忍受一点效果的缺失?

本站原创主题 Qetro 现对外公开发布

早在去年的8月份,本人就开始制作这套主题,期间收集了不少网友提供的建议。今年二月份以来,经过近一周的工作,对大部分代码进行了重写,推出了公开版本。

早在去年10月份的 1.2 版本,就打算对外公开,但是由于当时的水平有限,所以一直没有怎么处理主题,让很多网友久等了!!没有这些网友的敦促,相信也不会有公开版本。

这套主题功能和结构都比较简单,比较适合初学者研究、折腾、二次改造使用,在今后的升级,将会不断的增加新的功能,如果你有什么建议和功能需求,请邮:qianxingzhem#126.com(#换@)

关于主题更详细的介绍和下载地址,请看这里:Theme Qetro

同时,祝大家新年快乐,万事如意!!

由opacity属性引发的层叠问题思考与解决

在最近的一个作品中,在使用 opacity 属性来实现页面整体透明的时候,发现了一个问题。如果两个层发生了重叠,使用了 opacity 属性并且属性值小于1的层,会覆盖掉后面的层。于是动手做了个实验,来验证 opacity 的层次。

网页中的层叠规律是这样的:如果两个层都没有定义 position 属性为 absolute 或者 relative 属性,哪个层的HTML代码放在后面,哪个层就显示在上面。如果指定了 position 属性,并且设置了 z-index 属性,谁的值大,谁就在上面。

发现问题

而对于没有激活 z-index 的普通层来说,如果那个层使用了属性值小于1的 opacity 属性,哪个层就会显示在上面。我们做一个Demo。代码如下:

 <!DOCTYPE html>
<html>
<head>
<title>带有 opacity 的层叠问题</title>
<style>
html{padding:40px;}
.dd{width:100px;height:100px;}

#a{background:red;}

#b{background:blue;margin-left:20px;margin-top:-80px;}

#c{background:green;margin-left:40px;margin-top:-80px;}
</style>
</head>
<body>
<div id=”a”></div>
<div id=”b”></div>
<div id=”c”></div>
</body>
</html>
保存为 html 文件打开之后,可以看到正常的次序

正常的层叠

这时候,我们为 #a 加上属性 opacity:0.9 神奇的事情发生了,它覆盖了另外两个层

加上小于1的 opacity 之后的层叠

只有当为另一个层(例如:#c)也设置一个小于1的opacity值(例如:0.8)之后,后面的 #c 才能安装正常的规则覆盖在 #a 上面。

同时为另一个层赋值 opacity

这样,增加了小于1的 opacity 属性的层,升高了一个层次。至于里面的科学原理,我没有想明白,或许也可能是一个小BUG。但是有时候这种情况是我们不希望发生的。

解决问题

那么如何来解决这个问题呢?前面也说过了,正常的情况下,指定了 position 并且指定了 z-index 值的层,拥有比普通层更高的层次,那么指定 opacity 的层和指定了 position 的层相比呢?我们对 #b 加上 position:relative 看看。这时候的样式代码如下:

 #a{background:red;opacity:0.9;}

#b{background:blue;margin-left:20px;margin-top:-80px;position:relative;}

#c{background:green;margin-left:40px;margin-top:-80px;opacity:0.8;}
保存刷新后,看到效果是这样的:

对层使用了 position 属性之后的层叠效果

也就是说,对层使用 position 属性的 relative 之后,可以使其层次和 opacity 相同,这样之后,按照正常的排序进行层叠显示(在后面的实验中,我对 absolute 属性值也做了测试,结果和 relative 属性值表现的相同)。当我们取消了 #c 的 opacity 属性之后,我们可以看到,#c 被排在了最下面。

对底层取消 opacity 属性之后的效果

还没有完,之前只是对 #b 激活了position:relative 属性,还没有使用 z-index。我们对 #b 进行了 z-index 的设置(例如:100),很显然的,#b 成为了最顶层。

对中间层设置 z-index 的效果

得出结论:

使用了position属性值为 absolute、relative 的层,将会比普通层更高层次。使用了小于1的opacity属性的层,也比普通层更高层次并且和指定 position 的层同层,但是不支持 z-index 属性,所以指定 position 的层,可以使用 z-index 属性,来覆盖带有小于1的 opacity 属性的层。

【基础篇】13,补充之前教程中的一些知识要点

在之前的教程中,我通过做一套非常简单的 WordPress 主题,介绍了一系列关于 WordPress 主题制作的方法和函数。对于基础篇,有一些细节略过了,有一些功能没有提到,因为这些对于基础比较差的朋友有点难度,所以放在了 中级篇 教程中。回顾整个初级篇教程,有几个知识点需要介绍但是没有介绍到,还有一个小错误,于是就在本文中总结一下。

显示更多的文章列表

在目前的主题中,在首页中,只能显示有限的文章列表内容,并没有前后翻页的功能。这样,时间比较早的文章就看不到了,现在就要加上。需要用到的代码如下:

<div id=”pagination” class=”mt10”>
<?php posts_nav_link(); ?>
</div>

其中 posts_nav_link(); 这个函数就是用于生成列表翻页的函数。这段代码通常要放在文章列表的最下面

页面翻页导航

保存一下,刷新页面,我们就可以看到了多了一个“下一页”链接,点击之后,还会出现 “上一页”

看到上一页

这种方式非常简单,但是效果有限。在实际的应用中不大,因为现在网站大都用“页码数字”的形式来翻页。但是 WordPress 并没有提供与之相关的函数,有很多插件是用于实现这个功能的,但实际上用代码也能很方便的实现。下面就是我在网上找到的一段比较好的实现代码,作者不详:

function qxzm_pagination($query_string){
global $posts_per_page, $paged;
$my_query = new WP_Query($query_string .”&posts_per_page=-1”);
$total_posts = $my_query->post_count;
if(empty($paged))$paged = 1;
$prev = $paged - 1;
$next = $paged + 1;
$range = 5; // only edit this if you want to show more page-links
$showitems = ($range * 2)+1;

$pages = ceil($total_posts/$posts_per_page);
if(1 != $pages){
echo "&lt;div class='pagination'&gt;";
echo ($paged &gt; 2 &amp;&amp; $paged+$range+1 &gt; $pages &amp;&amp; $showitems &lt; $pages)? "&lt;a  href='".get_pagenum_link(1)."' class='inactive'&gt;|&lt;&lt;/a&gt;":"";
echo ($paged &gt; 1 &amp;&amp; $showitems &lt; $pages)? "&lt;a href='".get_pagenum_link($prev)."' class='inactive'&gt;&lt;&lt;&lt;/a&gt;":"";

for ($i=1; $i &lt;= $pages; $i++){
if (1 != $pages &amp;&amp;( !($i &gt;= $paged+$range+1 || $i &lt;= $paged-$range-1) || $pages &lt;= $showitems )){
echo ($paged == $i)? "&lt;span class='current'&gt;".$i."&lt;/span&gt;":"&lt;a  href='".get_pagenum_link($i)."' class='inactive' &gt;".$i."&lt;/a&gt;";
}
}

echo ($paged &lt; $pages &amp;&amp; $showitems &lt; $pages) ? "&lt;a href='".get_pagenum_link($next)."' class='inactive'&gt;&gt;&gt;&lt;/a&gt;" :"";
echo ($paged &lt; $pages-1 &amp;&amp; $paged+$range-1 &lt; $pages &amp;&amp; $showitems &lt; $pages) ? "&lt;a href='".get_pagenum_link($pages)."' class='inactive'&gt;&gt;|&lt;/a&gt;":"";
echo "&lt;/div&gt;";
}

}
把这段代码复制到主题下面的 functions.php 中,然后在需要这个功能的地方,写上定义的这个函数,就可以实现了。

实现翻页的函数

这段代码其实也是比较好理解的,如果你有一定的 php 基础,很容就可以看出代码的实现过程。此外,这段代码还输出 html 结构,这样你就可以方便的用 CSS 定义样式了。在中级篇会详细讲解这个地方,默认的情况下效果如下。

实现翻页的效果

因为之前的 archieve.php 文件是使用 index.php 文件生成的,同时这个文件的用途也是显示文章列表,所以我们也要在这个文件的相应位置,放上这些代码。

在文章页面中显示上一篇、下一篇文章

在一个文章或者页面中,显示相邻的上下篇文章这个功能,也比较常见。我们可以使用下面的代码来实现:

<div id=”prevnext” class=”mt10 ofh”>
<div class=”fl”><?php previous_post_link(‘%link’); ?></div>
<div class=”fr”><?php next_post_link(‘%link’); ?></div>
</div>

首先定义了一个结构,然后里面有两个函数:previous_post_link(‘%link’);next_post_link(‘%link’);,这两个函数从字面意义上就可以指定,分别用来生成 上一篇、下一篇文章 链接用的。添加的位置一般在文章的底部,当然也可以在顶部添加。保存一下,我们就可以看到效果了。如果一篇文章有上一篇和下一篇文章的话,就会出现这个链接,如果没有,就不会出现。

上一篇下一篇文章的效果

由于 page.php 文件是由 single.php 文件生成的,如果我们想在页面中也有这个功能,那么我们需要在 page.php 中也加上这些函数。

当管理员登陆后显示管理工具条(AdminBar)

现有的演示主题中,当我们登陆之后,返回首页,上面什么都没有。在使用其他的主题时,登陆后台之后,应该会在页面上显示一个快捷管理条。这个管理条可以让你快速的发表文章或者修改这篇文章等等。

至于如何为这个主题添加 AdminBar ,之前写过文章:在主题中添加 AdminBar 功能 ,在这里就不再赘述了。

不同页面显示对应的标题(title)

在之前的第五节教程制作主题的头部区域中,我提到使用下面这段代码来显示标题:

<title><?php bloginfo(‘name’);  ?> <?php  bloginfo( ‘description’ ); ?></title>

这的确显示出来了标题,但是在其他页面中,标题也显示这一种形式。因为其他的页面(例如 single.php),引用了 header.php 文件,所以当你访问一篇文章的时候,浏览器标题显示的都是一样的内容,这显然是不行的。那么我们如何进行修改呢?

这里可以选择让 single.php 不引用 header.php 文件,而是把 header.php 的内容复制到 single.php 的头部,然后在 title 标签内,编写上调用当篇文章的标题。这样的做法可以解决问题,但是后期的修改不方便,也违背了 WordPress 分块机制的目的。其实我们可以使用下面这段很简单的代码解决这个问题:

<?php if(is_home()): ?>
<title><?php bloginfo(‘name’); ?> <?php bloginfo( ‘description’ ); ?></title>
<?php else: ?>
<title><?php wp_title(‘&laquo;’, true, ‘right’); ?><?php bloginfo(‘name’); ?> </title>
<?php endif ?>

这几条语句,使用了一个 if 语句,同时使用了 is_home() 这个判断函数,判断当前页面是否为首页。如果是,则显示现有的标题结构,如果不是,就调用 wp_title(‘&laquo;’, true, ‘right’); 及其参数来显示标题。这样,当访问文章或者页面等页面的时候,显示的标题就是文章标题和网站名称了,而不是原来的网站名称和网站描述了。我们把它替换到 header.php 文件中,之后就完成了

显示对应标题的代码

至此,初级篇教程就结束了,敬请期待更高级的中级篇教程,它将会以一个更加复杂的主题制作过程为主线,深入的介绍更多常用的函数,以及之前基础篇略过的细节。

本节课相关资源下载

myTheme(基础篇-13) 本节课主题下载

本系列文章

  1. 开始执行的wordpress主题教程计划
  2. 【基础篇】1、学习制作主题之前的准备
  3. 【基础篇】2、WordPress的主题机制
  4. 【基础篇】3、设计制作你的HTML主题文件
  5. 【基础篇】4、安装主题文件
  6. 【基础篇】5、制作主题的头部区域
  7. 【基础篇】6,使用主循环调用显示日志摘要等数据
  8. 【基础篇】7,制作博客的搜索模块
  9. 【基础篇】8,添加博客边栏功能
  10. 【基础篇】9,制作底部区域 footer
  11. 【基础篇】10,将现有 index.php 文件分块处理
  12. 【基础篇】11,通过 index.php 文件生成 文章页面(single.php)
  13. 【基础篇】12,通过当前的文件,生成主题其他必要文件