Posts Tagged ‘WEB’
2009August . 14th

用jQuery制作页面风格切换开关

越来越多网站已经通过让访客自己选择页面风格来提高访客体验。这次我们利用jQuery这把锋利的剑来实现这个功能。
首先,在header加入几个风格链接是必须的。

<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
/*记得为候选风格加上rel="alternate",否则会引起冲突*/
<link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />

接下来在页面里加上开关链接,按下面的格式写

<a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch">styles1</a>
<a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch">styles2</a>
<a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch">styles3</a>
2009July . 24th

纯CSS打造隔行变色表格

纯CSS打造隔行变色表格不知道各位用过Excel没有?在处理大量数据的时候,Excel隔行变色的设计是不是让你舒服很多?
现在网上有很多利用jQuery制作隔行变色表格的教程,但你认为为了小小的一个表格而加载50多k的js是否值得?即使贵站有大量表格,其实还不如用CSS方便。要知道这个效果到底有多方便,看下去就知道了。
首先写好表格内容,通常如下:

<table class="datalist" summary="list of members in EE Studay">
	<caption>Member List</caption>
	<tr>
		<th scope="col">Name</th>
		<th scope="col">Class</th>
		<th scope="col">Birthday</th>
		<th scope="col">Constellation</th>
		<th scope="col">Mobile</th>
	</tr>
............................................
	<tr>
		<td>lightyear</td>
		<td>W311</td>
		<td>Mar 23th</td>
		<td>Aries</td>
		<td>1002908</td>
	</tr>
</table>
2009July . 20th

各种浏览器的CSS Hack写法

基本上齐全了,不要问我Chrome的CSS Hack怎么写,和Safari一样,因为它们都是一条心。

/* W3C */
body p {display: none;}
 
/* Opera */
html:first-child #opera {display: block;}
 
/* IE 8 */
/*\*//*/ body {display: block;}/**/
 
/* IE 7 */
html > body #ie7{*display: block;}
 
/* IE 6 */
body #ie6{_display: block;}
 
/* Firefox 1 - 2 */
body:empty #firefox12{display: block;}
 
/* Firefox */
@-moz-document url-prefix(){#firefox { display: block; }}
 
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; }}
 
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body #opera { display: block; }}

接下来有写一个各种浏览器核心独有css滤镜的专题,敬请关注。另外注意一下,Firefox貌似在3.0的时候取消了css hack中的-moz-,也就是说加不加-moz-都行,但为了兼容低版本Firefox,建议还是加上。

2009July . 15th

如何在footer加上友情链接

前段时间有朋友提出我把链接放在内页,影响了权重。于是我想办法把友链放在首页。
在我的审美观里,侧栏放友链是很不好看的,为什么呢?
友链的名字千奇百怪,把这些千奇百怪的名字放在有博客信息聚合作用的侧栏里明显格格不入。
于是我就把友链放在页底,这样不影响权重(我的习惯中很少点击友链),而且对页面的载入也有好处。有些主题的载入顺序是:header->sidebar->post->footer,也就是先载入侧栏再载入文章。这种情况,把友链放在footer就不影响文章的载入时间了。
我的修改方法是,把友链调用放在footer框架的上方,中间不要夹着其他的框架。为什么呢?因为大多数主题的主题框架都会在footer框架前闭合。在这里增加一个框架比较简单。
在footer框架前插入以下代码:

2009July . 7th

CSS:用ime-mode属性指定网页文本框输入法状态

很多人喜欢用字母验证码防止恶意留言,但缺没有设置验证码输入框的输入法属性,导致一些访客不小心就输入了汉字,很麻烦。大家很清楚,QQ.com上,把光标定位到验证码输入框后输入法会自动隐藏,很方便。这个小功能要实现起来并不难,只需要一段简单的css:ime-mode属性。

 IME(Input Method Editor)用来控制中文,韩文,日文的输入。共有五种值: auto、normal、active、inactive、disabled。
auto : 默认值。不影响ime的状态。与不指定 ime-mode 属性时相同。
active : 指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活ime。
inactive : 指定所有不使用ime输入的字符。即激活非本地语言。用户仍可以撤销激活ime。
disabled : 完全禁用ime。对于有焦点的控件(如输入框),用户不可以激活ime。

2009July . 1st

尝尝新吧,3D立体网页浏览器!

SphereXPlorer-3D网页浏览器3.gif.jpg厌倦了呆板的桌面了吗?厌倦了平淡的网页了吗?试试SphereXPlorer吧!
SphereXPlorer 是一款3D网页浏览器,SphereXPlorer网页浏览器提供独一无二的网页浏览方式,可以让使用者快速寻找、组织、存储和交换所需的网络资源。
SphereXPlorer三维立体网页浏览器,使得你浏览网络时与以前大不相同,有着新奇的临场感,让使用者同时浏览多个网页,这一切尽在SphereXPlorer三维立体浏览器中实现。
追求操作的万变、新鲜刺激的应用体验总是能激起大家无尽的兴致。

2009June . 30th

不同浏览器的css hack

css hack是一个解决页面布局兼容性问题的简单方法。稍加利用的话,也可以用来实现某种需要。
例如如果访客用ie6访问则提示升级浏览器,你可以在一个空框架里使用下面的css hack。

<!--[if lt IE 6]> background-image: url(please_updata_your_ie6.jpg) < ![endif]-->

来实现简单的升级提示效果。
注意,css里的if判断只有ie可以解析,具体的方法如下。

2009June . 29th

如何去除网页中的BUG(思路)

昨天下午的时候在mg12那里扒了一段代码,做了点修改,做成了我现在的“feed订阅”和“跟着我!”菜单。由于在做的时候忘了在各种浏览器上做兼容性测试,导致上线以后我才发现,“跟着我!”菜单在opera、firefox等浏览器里都错位了。
经过我的观察,我初步认定bug的根源在菜单的jQuery脚本里,那里使用了一个很少见的方法指定菜单的位置。由于我对jQuery并不熟悉,于是我请教了jQuery玩得不错的小小子同学,我们两人合力还是没把问题解决。
说说正题吧。当网页中出现BUG的时候应该怎么解决呢?

2009June . 27th

114啦开源背后的野心

114la.com开源.gif
今天下午,国内网址导航大站114la.com发布“114啦网址导航v1.10版本”源码。部分站长一片哗然。
虽然114啦此举对导航类网站意义重大,但我认为,114啦公布源代码的目的肯定不是官方所说的有些人制作山寨后台程序,肆意修改兜售,使一些站长蒙受损失这么简单。试想一下,导航网站网站由于缺乏实质上的内容,从建立到发展成为一个品牌,不能靠常规的搜索引擎带流量的老路子,而是靠口碑,靠访客使用的体验来黏住访客。一个经历艰辛建立起来的导航大站,会无缘无故地去扶植一批网站去跟自己作对吗?
我们看看114啦官方的开源公告。

我们的力量是极有限的,本次开源一是希望把这份分享精神传达给有志于服务用户的站长朋友们,希望合我们之手,让更多人得到优秀的导航服务;二是希望能抛砖引玉,希望从事程序开发的朋友们能提供给我们宝贵意见,让我们在积极进行开发中的新版本有新的元素,甚至希望能借此机会邀请有实力的程序员加入我们。

2009June . 24th

PHP技巧,清空输出缓存

相关函数:flush() 、ob_flush()。使用于PHP3、4、5,推荐PHP5。

flush() 的描述:
作用:刷新输出缓冲
语法: void flush(void)

刷新PHP程序的缓冲,而不论PHP执行在何种情况下(CGI ,web服务器等等)。该函数将当前为止程序的所有输出发送到用户的浏览器。
flush() 函数不会对服务器或客户端浏览器的缓存模式产生影响。因此,必须同时使用 ob_flush() 和flush() 函数来刷新输出缓冲。
个别web服务器程序,特别是Win32下的web服务器程序,在发送结果到浏览器之前,仍然会缓存脚本的输出,直到程序结束为止。
有些Apache的模块,比如mod_gzip,可能自己进行输出缓存,这将导致flush()函数产生的结果不会立即被发送到客户端浏览器。
甚至浏览器也会在显示之前,缓存接收到的内容。例如 Netscape 浏览器会在接受到换行或 html 标记的开头之前缓存内容,并且在接受到 标记之前,不会显示出整个表格。

Subscriber selector

Close