post

完整HTML颜色中英文代码对照表

无论是网页设计或者是前端开发,都会用到颜色,只不过大多用颜色代码,很少有记得住颜色对应的英文代码。下面是从天道酬勤博客上转来的一套完整颜色的英文代码对照表和中英文颜色形象代码对照表,整理的非常好,分享一下。
[Read more…]

post

jQuery实现页面滚动时固定侧边栏效果

博客文章比较长的时候,侧边栏很容易变得很空,这种情况下,在侧边栏显示些推荐文章、分类或者标签,都是很不错的,可以方便访问者浏览其他文章,间接增加访问者停留的时间。

几个月前就弄过这样的效果,但是没成功,在一些浏览器下显示效果不好,今天看了一篇文章,JS代码写的不错,就稍微修改了下,实现了随着鼠标滚动到侧边栏消失后,显示固定的标签云模块的效果,见下图:

jQuery实现页面滚动时固定侧边栏效果
[Read more…]

post

全面解析30个最常用的CSS选择器

今天在修改读者墙样式问题的时候,要用到CSS中的排除类的语法,找了一会,终于在Google中找到了解决方案,是火狐社区中的一篇文章,介绍的非常全面,很实用,转载过来分享。

你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题。掌握了它们,才能真正领略css的巨大灵活性。
[Read more…]

post

让网页支持多分辨率:CSS3 Media Queries

今天修改博客友情链接的时候,发现了css3的Media Queries写法,原来支持pc,iPhone,iPad等设备分辨率的写法是靠这个特性来完成的;

简单举个例子:下面2张图,在pc上分类目录显示为两列,在iPhone上则显示为四列,而且在iPhone上,博客都是以一列来显示的,在iPad上则显示两列;
[Read more…]

post

浮动层滚动固定在浏览器顶部

最早在Gmail中看到过这种效果,就是滚动条往下滚动的时候,到达临界值,Gmail的菜单就会固定在浏览器的顶部,可以很方便的操作邮件,后来在淘宝的宝贝详情页面、6月促销活动等都能看到这样的效果,方便又实用。

博客换新主题有一段时间了,经常感觉右侧空白的地方较大,于是就想到利用这一效果;

在Google上搜到了我想要的代码,简洁又能满足功能,经过测试还是会出现重叠问题,不适用我的主题。

效果可以参照月光博客:http://www.williamlong.info/archives/3083.html

代码如下:

[javascript collapse=”false”]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
$(function(){
var obj=$("#text-13");//#text-13为博客中广告模块的ID,也可以用类选择器 $(".class")[0]
var navH = obj.offset().top; //获取要定位元素距离浏览器顶部的距离
//滚动条事件
$(window).scroll(function(){
var scroH = $(this).scrollTop(); //获取滚动条的滑动距离
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
obj.css({"position":"fixed","top":50}); //top值因不同主题而定,也可以固定其他元素
}else if(scroH<navH){
obj.css({"position":"static"});
}
})
});
// ]]></script>
[/javascript]