Web标准：理解表现和结构相分离
2012-2-14 10:27:00 阅读93 评论0 142012/02 Feb14
对于初学者，我们常看见web标准的好处之一是“能做到表现和结构相分离”，那这到底是什么意思呢？我将以一个实际的例子来详细说明。首先我们必须先明白一些基本的概念：内容、结构、表现和行为。
1.内容
内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如一个不包含辅助的信息,比如导航菜单、装饰性图片等。举个例子，有下面一段文本是我们页面要表现的信息。
忆江南(1)唐.白居易江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。作者介绍772－846 ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。注释(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。品评此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这
1.内容
内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如一个不包含辅助的信息,比如导航菜单、装饰性图片等。举个例子，有下面一段文本是我们页面要表现的信息。
忆江南(1)唐.白居易江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。作者介绍772－846 ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。注释(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。品评此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这
SEO优化应该注意哪些 应注意的蜘蛛陷阱
2012-2-6 11:04:45 阅读63 评论0 62012/02 Feb6
一提到蜘蛛陷阱，有很多朋友都会认为蜘蛛陷阱是属于黑帽方法，并且做了蜘蛛陷阱会被K掉网站，所以有很多朋友都会避开蜘蛛陷阱，其实蜘蛛陷阱不完全是黑帽方法，有的朋友会问，那么蜘蛛陷阱是属于什么?其实正确定义蜘蛛陷阱分为两种，一种是恶意陷阱，另一种是非恶意陷阱，并且对于两种类型的陷阱，搜索引擎处罚也是不一样的，恶意陷阱属于纯黑帽，所以搜索引擎处罚会毫不手软，而非恶意陷阱可能是在SEOer完全不知道的情况下产生的，所以搜索引擎会对非恶意陷阱网开一面，但是死罪可免活罪难逃，所以蜘蛛陷阱不管是恶意还是非恶意，对我们做搜索引擎优化都会存在隐患，所以我们要拔掉隐患，所以下面为给大家说一下我们应该避免那些蜘蛛陷阱：
一、非恶意蜘蛛陷阱
非恶意蜘蛛陷阱的形成刚才为在开始已经说了，可能是SEOer完全不知情的情况下产生的，或者是一些蜘蛛陷阱并不是很严重，所以搜索引擎会把这类蜘蛛陷阱定义为非恶意陷阱，虽然非恶意，但是还是会对搜索引擎带来影响，所以多少我们的网站时间长了也是逃不过处罚的，所以我们要了解那些非恶意陷阱是需要我们注意的，下面给大家介绍一些非恶意陷阱给大家认识：
1、flash
flash是大部分网站都有的，因为flash可以生成很好的网站效果试图，所以有很多站长喜欢flash，但是flash当写入网页中是一大串乱码，所以如果你的网站是做SEO，那么蜘蛛爬行你的网站flash代码时，蜘蛛可能会被误导或者无法识别，所以蜘蛛最后感觉网站不安全，最后不信任退出，这样一来你的网站就有可能存在蜘蛛稀少爬行的后果，所以建议大家做动态图片用gif代替，不要用flash。
一、非恶意蜘蛛陷阱
非恶意蜘蛛陷阱的形成刚才为在开始已经说了，可能是SEOer完全不知情的情况下产生的，或者是一些蜘蛛陷阱并不是很严重，所以搜索引擎会把这类蜘蛛陷阱定义为非恶意陷阱，虽然非恶意，但是还是会对搜索引擎带来影响，所以多少我们的网站时间长了也是逃不过处罚的，所以我们要了解那些非恶意陷阱是需要我们注意的，下面给大家介绍一些非恶意陷阱给大家认识：
1、flash
flash是大部分网站都有的，因为flash可以生成很好的网站效果试图，所以有很多站长喜欢flash，但是flash当写入网页中是一大串乱码，所以如果你的网站是做SEO，那么蜘蛛爬行你的网站flash代码时，蜘蛛可能会被误导或者无法识别，所以蜘蛛最后感觉网站不安全，最后不信任退出，这样一来你的网站就有可能存在蜘蛛稀少爬行的后果，所以建议大家做动态图片用gif代替，不要用flash。
网站性能最佳体验的34条黄金守则
2012-2-6 11:01:43 阅读83 评论0 62012/02 Feb6
Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。
Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。
其中内容部分一共十条建议：
一、内容部分
尽量减少HTTP请求
减少DNS查找
避免跳转
缓存Ajxa
推迟加载
提前加载
减少DOM元素数量
用域名划分页面内容
使frame数量最少
避免404错误
1、尽量减少HTTP请求次数
终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。
减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。
合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。
Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。
其中内容部分一共十条建议：
一、内容部分
尽量减少HTTP请求
减少DNS查找
避免跳转
缓存Ajxa
推迟加载
提前加载
减少DOM元素数量
用域名划分页面内容
使frame数量最少
避免404错误
1、尽量减少HTTP请求次数
终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。
减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。
合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。
web网页前端制作中的SEO方法
2012-2-6 10:58:16 阅读82 评论0 62012/02 Feb6
在SEO盛行的今天到处都在谈优化，对于网站前端制作人员来说，有几点是跟SEO相关的，也就是SEO站内优化中的一部分，下面总结几点：
1.title，<title>页面标题</title>。页面的标题，不用多说，这个必须有！
2.keywords，<meta name="keywords" content="关键词1,关键词2" />。为搜索引擎提供的关键字列表，各关键词间用英文逗号“,”隔开。页面的主关键词可以列举在这里。
3.description。<meta name="description" content="页面描述"/>。告诉搜索引擎你的网站主要内容。虽然现在description对百度等搜索引擎排名影响不是很大，但是对于用户体验方面还是有用的，可以让用户了解到网页的大概内容，引导点击。
4.robots，<meta name="Robots" Content="Nofollow">。告诉搜索引擎哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
注：①<meta name="Robots" Content="">是对页面上的所有链接生效，包括站内站外。
②nofollow引申：Nofollow最常用的是在a标签上加上nofollow：<a rel="external nofollow" href=""
1.title，<title>页面标题</title>。页面的标题，不用多说，这个必须有！
2.keywords，<meta name="keywords" content="关键词1,关键词2" />。为搜索引擎提供的关键字列表，各关键词间用英文逗号“,”隔开。页面的主关键词可以列举在这里。
3.description。<meta name="description" content="页面描述"/>。告诉搜索引擎你的网站主要内容。虽然现在description对百度等搜索引擎排名影响不是很大，但是对于用户体验方面还是有用的，可以让用户了解到网页的大概内容，引导点击。
4.robots，<meta name="Robots" Content="Nofollow">。告诉搜索引擎哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
注：①<meta name="Robots" Content="">是对页面上的所有链接生效，包括站内站外。
②nofollow引申：Nofollow最常用的是在a标签上加上nofollow：<a rel="external nofollow" href=""
纯CSS制作带小三角提示框
2011-12-21 13:48:20 阅读199 评论0 212011/12 Dec21
在我们开发项目的过程中，常常会遇到要制作一些 带小三角的提示框组件：
遇到这种需求我们一般会采取2种方法：
1. 把小三角切出来做成背景图，然后内容部分通过 border 和 background-color 实现；
2. 通过纯css方法将一个标签做成符合需求的小三角，然后内容部分通过border 和 background-color 实现；
理论上，上述这2种方法都是可行的，但是，有没有遇到以下的情景：
第一天， 客户已经确认设计稿了，可以开始制作，采用浅蓝色提示框方案。
第二天， 客户突然觉得，那蓝色好像不够大气，要求换成 浅黄色提示框。
第三天， 浅黄色做出来之后，客户又觉得出来的效果不太理想，要求换回浅蓝色。
第四天， 客户看着看着，觉得…那个小三角还是换个位置比较好，换为箭头向下吧。
如果你采用第一种方法的话，ok 第一天，爽yy地完成了这个组件，并觉得 easy job；第二天，ok，要修改了，打开你的切图工具，把那小箭头的颜色改为浅黄色，然后同名称覆盖文件，打开你的编辑器，修改相关样式；第三天，再一次打开你的切图工具，把图片颜色换回来，然后同名覆盖，并修改相关样式；第四天，恭喜，打开你的切图工具，旋转一下你的小三角，然后继续之前的步骤。
有没有觉得很烦呢，老是得打开那个切图工具，多没效率呀，不过那也是其次，关键是…
在一个网页中，每多一张图片就会多一个http请求，请求数越多，自然而然地，网页打开的速度就会越慢
遇到这种需求我们一般会采取2种方法：
1. 把小三角切出来做成背景图，然后内容部分通过 border 和 background-color 实现；
2. 通过纯css方法将一个标签做成符合需求的小三角，然后内容部分通过border 和 background-color 实现；
理论上，上述这2种方法都是可行的，但是，有没有遇到以下的情景：
第一天， 客户已经确认设计稿了，可以开始制作，采用浅蓝色提示框方案。
第二天， 客户突然觉得，那蓝色好像不够大气，要求换成 浅黄色提示框。
第三天， 浅黄色做出来之后，客户又觉得出来的效果不太理想，要求换回浅蓝色。
第四天， 客户看着看着，觉得…那个小三角还是换个位置比较好，换为箭头向下吧。
如果你采用第一种方法的话，ok 第一天，爽yy地完成了这个组件，并觉得 easy job；第二天，ok，要修改了，打开你的切图工具，把那小箭头的颜色改为浅黄色，然后同名称覆盖文件，打开你的编辑器，修改相关样式；第三天，再一次打开你的切图工具，把图片颜色换回来，然后同名覆盖，并修改相关样式；第四天，恭喜，打开你的切图工具，旋转一下你的小三角，然后继续之前的步骤。
有没有觉得很烦呢，老是得打开那个切图工具，多没效率呀，不过那也是其次，关键是…
在一个网页中，每多一张图片就会多一个http请求，请求数越多，自然而然地，网页打开的速度就会越慢
详解CSS选择器、优先级与匹配原理
2011-12-16 9:11:19 阅读83 评论0 162011/12 Dec16
文章就CSS选择器的优先级问题做了一些总结，严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。
作为一个Web开发者，掌握必要的前台技术也是很重要的，特别是在遇到一些实际问题的时候。这里给大家列举一个例子：
给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候突然意识到了CSS选择器的优先级问题，这里就CSS选择器的优先级问题做了一些总结。
选择器种类
严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style=""的方式，应该是CSS的一种引入方式，而不是选择器，因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起，所以就有了5种或6种选择器了。
三种基本的选择器类型
语法如下：
◆标签名选择器，如：p{}，即直接使用HTML标签作为选择器。
◆类选择器，如.polaris{}。
◆ID选择器，如#polaris{}。
注意，ID选择器跟类选择器有很大的不同：一个页面内不能出现相同的ID；再就是ID也是后台开发人员会经常用的，所以前端开发人员应该尽量少的使用。当然跟后台人员的工作配合十分娴熟之后，这些都不会成为限制。
扩展选择器
◆后代选择器，如.polaris span img{}，后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。
作为一个Web开发者，掌握必要的前台技术也是很重要的，特别是在遇到一些实际问题的时候。这里给大家列举一个例子：
给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候突然意识到了CSS选择器的优先级问题，这里就CSS选择器的优先级问题做了一些总结。
选择器种类
严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style=""的方式，应该是CSS的一种引入方式，而不是选择器，因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起，所以就有了5种或6种选择器了。
三种基本的选择器类型
语法如下：
◆标签名选择器，如：p{}，即直接使用HTML标签作为选择器。
◆类选择器，如.polaris{}。
◆ID选择器，如#polaris{}。
注意，ID选择器跟类选择器有很大的不同：一个页面内不能出现相同的ID；再就是ID也是后台开发人员会经常用的，所以前端开发人员应该尽量少的使用。当然跟后台人员的工作配合十分娴熟之后，这些都不会成为限制。
扩展选择器
◆后代选择器，如.polaris span img{}，后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。
深入理解Javascript闭包
2011-12-9 16:51:07 阅读111 评论0 92011/12 Dec9
最近在网上查阅了不少Javascript闭包(closure)相关的资料，写的大多是非常的学术和专业。对于初学者来说别说理解闭包了，就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。
一、什么是闭包？
“官方”的解释是：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
相信很少有人能直接看懂这句话，因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包，因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段代码：
function a(){
var i=0;
function b(){
alert(++i);
}
return b;
}
var c = a();
c();
这段代码有两个特点：
1、函数b嵌套在函数a内部；
2、函数a返回函数b。
这样在执行完var c=a()后，变量c实际上是指向了函数b，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：
当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。
一、什么是闭包？
“官方”的解释是：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
相信很少有人能直接看懂这句话，因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包，因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段代码：
function a(){
var i=0;
function b(){
alert(++i);
}
return b;
}
var c = a();
c();
这段代码有两个特点：
1、函数b嵌套在函数a内部；
2、函数a返回函数b。
这样在执行完var c=a()后，变量c实际上是指向了函数b，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：
当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。
javascript 实现淡入式图片幻灯窗
2011-12-6 9:15:07 阅读126 评论0 62011/12 Dec6
工作原理
把需要轮播的图片全部通过绝对定位堆叠在一起，以 z-index 区分 堆叠顺序，然后通过改变 z-index 来实现图片轮播，缓动效果则通过 css 属性的 opacity(ie的通过调用 filter里面的透明滤镜解决)来实现。
思考
如何优化在ie下的效果（filter滤镜 超耗内存）
图片轮播时z-index交换问题
用户恶意操作时候对应的解决方案
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片幻灯窗</title>
<script type="text/javascript" src="js/fade_slide.js"></script>
<style type="text/css">
<!--
*{margin:0; padding:0;}
a img{ border:0;}
a{ text-decoration:none;}
ul,li{ list-style:none;}
.slideBox{ position:relative;
把需要轮播的图片全部通过绝对定位堆叠在一起，以 z-index 区分 堆叠顺序，然后通过改变 z-index 来实现图片轮播，缓动效果则通过 css 属性的 opacity(ie的通过调用 filter里面的透明滤镜解决)来实现。
思考
如何优化在ie下的效果（filter滤镜 超耗内存）
图片轮播时z-index交换问题
用户恶意操作时候对应的解决方案
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片幻灯窗</title>
<script type="text/javascript" src="js/fade_slide.js"></script>
<style type="text/css">
<!--
*{margin:0; padding:0;}
a img{ border:0;}
a{ text-decoration:none;}
ul,li{ list-style:none;}
.slideBox{ position:relative;
javascript 实现弹出层拖拽API
2011-12-6 8:47:13 阅读138 评论0 62011/12 Dec6
工作原理
这种模块其实无非就是 各种运算，运用 window.event 里面的方法来对各种功能进行实现。
思考 拖拉过程中，如果用户同时按下鼠标的同时，滚动滑轮…会发生什么事情。 弹出之后，改变 浏览器 大小的时候，如何防止弹出层超出页面的的大小。 由于这种弹出效果，对于浏览器的计算比较频繁，如何对结构进行优化。 对于各种需求的考虑，例如，有无背景，是否跟随等。
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>弹出层拖动api(简版)</title>
<script type="text/javascript" src="js/ec_popups.js"></script>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
* html{ background-image:url(about:blank); background-attachment:fixed;}
.wrap{ height:5000px;}
.btn{ position:fixed; _position:absolute;
这种模块其实无非就是 各种运算，运用 window.event 里面的方法来对各种功能进行实现。
思考 拖拉过程中，如果用户同时按下鼠标的同时，滚动滑轮…会发生什么事情。 弹出之后，改变 浏览器 大小的时候，如何防止弹出层超出页面的的大小。 由于这种弹出效果，对于浏览器的计算比较频繁，如何对结构进行优化。 对于各种需求的考虑，例如，有无背景，是否跟随等。
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>弹出层拖动api(简版)</title>
<script type="text/javascript" src="js/ec_popups.js"></script>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
* html{ background-image:url(about:blank); background-attachment:fixed;}
.wrap{ height:5000px;}
.btn{ position:fixed; _position:absolute;
javascript 实现位置移动test(三)
2011-12-1 11:26:00 阅读103 评论0 12011/12 Dec1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>javascript 实现位置移动test(三)</title>
<style type="text/css">
h3{text-shadow:1px 1px 3px rgba(50, 50, 50, 0.3); color:#333333}
a{color:#d30000; text-decoration:none}
ol{color:#d30000}
a:hover{text-decoration:underline}
#showpic{width:100px; height:100px; position:relative; overflow:hidden}
#wbgpic{ position:absolute}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>javascript 实现位置移动test(三)</title>
<style type="text/css">
h3{text-shadow:1px 1px 3px rgba(50, 50, 50, 0.3); color:#333333}
a{color:#d30000; text-decoration:none}
ol{color:#d30000}
a:hover{text-decoration:underline}
#showpic{width:100px; height:100px; position:relative; overflow:hidden}
#wbgpic{ position:absolute}
javascript 实现位置移动test(二)
2011-12-1 11:24:55 阅读79 评论0 12011/12 Dec1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>javascript 实现位置移动test(二)</title>
<style type="text/css">
h3{text-shadow:1px 1px 3px rgba(50, 50, 50, 0.3); color:#333333}
a{color:#d30000; text-decoration:none}
ol{color:#d30000}
a:hover{text-decoration:underline}
.showPic{width:100px; height:100px; position:relative; overflow:hidden}
</style>
<script type="text/javascript">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>javascript 实现位置移动test(二)</title>
<style type="text/css">
h3{text-shadow:1px 1px 3px rgba(50, 50, 50, 0.3); color:#333333}
a{color:#d30000; text-decoration:none}
ol{color:#d30000}
a:hover{text-decoration:underline}
.showPic{width:100px; height:100px; position:relative; overflow:hidden}
</style>
<script type="text/javascript">
javascript 实现位置移动test
2011-12-1 9:10:36 阅读65 评论0 12011/12 Dec1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>javascript 实现位置移动</title>
<script type="text/javascript">
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function')
{
window.onload=func;
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>javascript 实现位置移动</title>
<script type="text/javascript">
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function')
{
window.onload=func;
}
javascript判断输入汉字长度
2011-11-30 11:15:14 阅读440 评论0 302011/11 Nov30
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>计算汉字长度</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; font-family:"微软雅黑"; line-height:24px;}
textarea{display:block; width:600px; height:300px; outline:none; resize:none;}
</style>
<script type="text/javascript">
window.onload = function()
{
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>计算汉字长度</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; font-family:"微软雅黑"; line-height:24px;}
textarea{display:block; width:600px; height:300px; outline:none; resize:none;}
</style>
<script type="text/javascript">
window.onload = function()
{
IE下的纯CSS完美position:fixed实现方案
2011-11-15 14:56:53 阅读243 评论0 152011/11 Nov15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IE下的纯CSS完美position:fixed实现方案</title>
<style type="text/css">
html,body{margin:0px;height:100%;overflow:hidden;font-size:12px;}
/* 核心样式定义 */
.wrapper{
position:relative;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IE下的纯CSS完美position:fixed实现方案</title>
<style type="text/css">
html,body{margin:0px;height:100%;overflow:hidden;font-size:12px;}
/* 核心样式定义 */
.wrapper{
position:relative;
北京市 海淀区 狮子座
发消息 写留言
当裤子失去皮带,才懂得什么叫做依赖...... ...
| 近期心愿 | 事业梦想早日实现... ... Go Go Fighting```... |
| 博客等级 | 加载中... |
| 今日访问 | 加载中... |
| 总访问量 | 加载中... |
| 最后登录 | 加载中... |
自定义模块
模块内容加载中...
天气
模块内容加载中...
日历
模块内容加载中...
网易新闻资讯
列表加载中...