显示下一条  |  关闭

前端工程师 郭培的博客

新的一年,新的起点

 
 
 
 
 
 

[置顶] 实战中关于CSS的总结

2009-1-5 19:39:43 阅读565 评论18 52009/01 Jan5

1.如果利用<img>标签把图片放进表格单元里面,并注意到在图片下方有不需要的空间,那么设置它的display属性为block.

2.text-align可以被继承,vertical-align属性不会被继承

3.html提供<colgroup>和<col>标签相应地表示列组合和独立的列。

表格中的每个列都包括一个<col>标签,可以用类或ID来识别它们。只有两组属性对这些标签起作用:width和background属性。

<colgroup>

    <col id="brand"/>

    <col id="price"/>

    <col id="power"/>

</colgroup>

4.IE6.0兼容支持透明背景

* html .tit2 .ms{ zoom:1; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src="http://hszy00232.blog.163.com/blog/images/jia.png",sizingMethod="scale"); background:none;}

5.浏览器兼容处理半透明效果

作者  | 2009-1-5 19:39:43 | 阅读(565) |评论(18) | 阅读全文>>

[置顶] javascript实战总结

2010-5-31 16:08:05 阅读324 评论2 312010/05 May31

使用appendChild将<tr>元素直接增加到<table>中,则在IE中这一行并不出现,但在其他浏览器中却会显示出来。对此的解决之道是,将<tr>元素增加到表的<tbody>元素中,这种解决办法在所有浏览器中都能正确工作。 IE不能使用setAttribute正确地设置class属性。对此有一个跨浏览器的解决方法,即同时使用setAttribute("class", "new- ClassName") 和setAttribute("className","newClassName")。 在IE中不能使用setAttribute设置style属性。最能保证浏览器兼容的技术不是<element>.setAttribute("style, "font-weight:bold;"),而是<element>.style.cssText = "font- weight:bold;"。

XHR对象使用时对浏览器的判断

var xmlHTTP;

if(window.XMLHttpRequest){

xmlHTTP=new XMLHttpRequest();

}else{

try{xmlHTTP=new ActiveXObject("MSXML2.XMLHTTP.6.0")}catch(e){}

try{xmlHTTP=new ActiveXObject("MSXML2.XMLHTTP")}catch(e){}

作者  | 2010-5-31 16:08:05 | 阅读(324) |评论(2) | 阅读全文>>

主流浏览器对CSS选择符的兼容性总结

2012-2-10 11:23:03 阅读50 评论0 102012/02 Feb10

CSS选择符浏览器兼容性选择符版本IE6IE7IE8IE9FFCHOPSAE1yesyesyesyesyesyesyesyes*2yesyesyesyesyesyesyesyesE.classname1partyesyesyesyesyesyesyesE#idname1yesyesyesyesyesyesyesyesE F...1yesyesyesyesyesyesyesyesE > F...2noyesyesyesyesyesyesyesE + F2noyesyesyesyesyesyesyesE ~ F3noyesyesyesyesyesyesyesE[att]2noyesyesyesyesyesyesyesE[att=val]2noyesyesyesyesyesyesyes

作者  | 2012-2-10 11:23:03 | 阅读(50) |评论(0) | 阅读全文>>

css3伪类:after实现Speech Bubble

2012-2-8 22:53:04 阅读61 评论0 82012/02 Feb8

作者  | 2012-2-8 22:53:04 | 阅读(61) |评论(0) | 阅读全文>>

CSS3实现首字下沉

2012-2-8 22:50:51 阅读65 评论0 82012/02 Feb8

查看实现效果:http://jsfiddle.net/hszy00232/K2rCL/1/

这个案例涉及到2个知识点:

1.如何实现首字下沉

.container div:first-letter {

    float: left;

    font-size: 80px;

    line-height: 1;

    margin: 15px 5px 0 0;

    text-transform: uppercase;

}

2.@font-face的使用(自定义字体)

@font-face {

    font-family: celticmd;

    src: url("http://www.script-tutorials.com/demos/201/css/celticmd.ttf") format("truetype");

}

-------------------------------------------------------------------------------------------------

分隔线

-------------------------------------------------------------------------------------------------

@font-face的介绍使用

简介:它允许你在网页上显示一个自定义的字体。即使客户机器上可以没有安装这种字体,网页也可以显示。

语法:

@font-face {

作者  | 2012-2-8 22:50:51 | 阅读(65) |评论(0) | 阅读全文>>

JQuery最佳实践

2011-8-8 13:27:57 阅读311 评论0 82011/08 Aug8

作者: 阮一峰

日期: 2011年8月 4日

上周,我整理了《jQuery设计思想》

那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery"。今天的文章则是更进一步,讲解"如何用好jQuery"。

我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks)。他是jQuery开发团队的成员,具有一定的权威性,提出的结论都有测试数据支持,非常有价值。

==============================================

jQuery最佳实践

阮一峰 整理

1. 使用最新版本的jQuery

jQuery的版本更新很快,你应该总是使用最新的版本。因为新版本会改进性能,还有很多新功能。

作者  | 2011-8-8 13:27:57 | 阅读(311) |评论(0) | 阅读全文>>

适合前端开发者的iPhone Web App开发【转】

2011-8-2 18:17:43 阅读436 评论0 22011/08 Aug2

iphone有着丰富的软件资源,到目前为止,仅在appStore上架的软件就达十多万个,而相比之下,有着10年历史的WM系统却不过只有大约 2万个应用程序。 随着ipad和iphone 4的发布,iphone/ipad的app应用开发将再次掀起热潮。下面给大家介绍下iPhone App开发的两种途径及有优缺点,以及其中适合前端人员的iPhone webapp的一些开发工具,最后以无线UED Blog为例子看看iPhone webapp的开发过程。

一、什么是iPhone Web App?

目前有两种方式让你开发iphone上的应用:

编写Objective-C 及 iPhone SDK 直接运行在iphone上的原生应用程序在基于 WebKit 的safari上利用HTML5, CSS3及Javascript编写你所需要的WebApp网络应用程序

而Apple的官方网站上,除了有iPhone/iPad SDK开发的详细资料外,你也可以像SDK应用程序提交到App

作者  | 2011-8-2 18:17:43 | 阅读(436) |评论(0) | 阅读全文>>

程序员技术练级攻略

2011-7-31 17:56:07 阅读365 评论0 312011/07 July31

来源:http://coolshell.cn/articles/4990.html 作者:陈皓

月光博客6月12日发表了《写给新手程序员的一封信》,翻译自《An open letter to those who want to start programming》,我的朋友(他在本站的id是Mailper)告诉我,他希望在酷壳上看到一篇更具操作性的文章。因为他也是喜欢编程和技术的家伙,于是,我让他把他的一些学习Python和Web编程的一些点滴总结一下。于是他给我发来了一些他的心得和经历,我在把他的心得做了不多的增改,并根据我的经历增加了“进阶”一节。这是一篇由新手和我这个老家伙根据我们的经历完成的文章。

我的这个朋友把这篇文章取名叫Build Your Programming Technical Skills,我实在不知道用中文怎么翻译,但我在写的过程中,我觉得这很像一个打网游做任务升级的一个过程,所以取名叫“技术练级攻略”,题目有点大,呵呵,这个标题纯粹是为了好玩。这里仅仅

作者  | 2011-7-31 17:56:07 | 阅读(365) |评论(0) | 阅读全文>>

JQuery设计思想

2011-7-26 21:45:25 阅读241 评论1 262011/07 July26

 jQuery是目前使用最广泛的javascript函数库。

  据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

  对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。

  虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松。因为它涉及到网页开发的方方面面,提供的各种方法和内部变化有上千种之多。初学者常常感到,入门很方便,提高很困难。

  目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的《jQuery基础》(jQuery Fundamentals)。在Google里搜索"jQuery培训",此书排在第一位。jQuery官方团队已经

作者  | 2011-7-26 21:45:25 | 阅读(241) |评论(1) | 阅读全文>>

字体图形化设计小谈 (转)

2011-7-12 7:27:46 阅读406 评论2 122011/07 July12

来源:http://uedc.163.com/6045.html

当你在做设计的时候碰到一个标题,

你会怎么做?

翻字库?一遍一遍试各种字体?

来看看大湿都是怎么做的吧。

图形化视频

文字是一种记录与传达语言的符号,它的产生是人类文明进步的一种重要标志。随着图形化时代的来临,文字与图形的关系在设计领域尤其是平面设计当中, 起着举足轻重的作用。针对目前国际平面设计界以文字为主体元素的设计,本文以平面设计中文字的图形化表现为切入点,对文字图形化的表现形式和表现手法以及 在平面设计的应用进行探讨性分析,希望挖掘出文字与图形化设计的更多表现形式。

美国设计家保罗·兰德说:“好的设计字体是信息与灵感,昨天与今天,现实与幻想,工作与娱乐,工艺与艺术,意识与无意识的融合”。

我根据平时看到的一些文字图形化作品,简浅的归纳了一下文字图形化的一些方法。

替换法    共用法   叠加法   分解重构法   尖角法   横细竖粗法   简细法   联盟法   摆放法 

作者  | 2011-7-12 7:27:46 | 阅读(406) |评论(2) | 阅读全文>>

JavaScript,只有你想不到

2011-6-23 14:43:36 阅读379 评论0 232011/06 June23

出处:http://radar.oreilly.com/2011/06/time-to-learn-javascript.html

很长时间以来,JavaScript在我眼里都是编程语言中的二等公民。早先,它经常是很多安全问题的发源地,就像是胶水一样,它能把HTML应用与样式粘到一块,可没有人拿它来正正规规地编写程序;这样的情形太普遍了。而Java、Ruby、Python,这些才是真正能用来编写程序的语言。

过去几年间,我对JavaScript的态度有了彻底的改变。JavaScript已经“长大成人”了。我敢保证很多JavaScript开发人员都不会认同我前面的说法,他们会说JavaScript一直都是一个十分强大、成熟,深得人心的语言。或许他们说得没错,事实上只要是一门完整的编程语言,就能拿来编写程序,也包括BASIC这种滥东西。而一门语言真正有用,必须一方面自身具备很强的表达能力,另一方面还要有众多的库和开发工具。显然,JavaScript的表达能力早就没有问题了,即便是创建对象的方式有点不好让人接受,其实问题也不大。直到最近,一些极其重要的扭转局面的技术出现了:jQuery、JSON、Node.js和HTML5。或许JavaScript以前就是一门完善的语言了,但却是这些重要的相关技术(以及其他一些没有在这里提及的),让JavaScript成为了每一个开发人员都知道的语言。如果明年你要学一门新语言的话,那一定就是JavaScript。

作者  | 2011-6-23 14:43:36 | 阅读(379) |评论(0) | 阅读全文>>

Dreamweaver CS5 安装可能出现下面两种错误!

2011-6-16 6:38:13 阅读1246 评论2 162011/06 June16

今天早上安装DW CS5出现了问题,找到如下文章,问题得到了解决,因此把文章转到这里,希望对更多的同学有帮助。

转载自:http://ybpengzhi.blog.163.com/blog/static/13336930220115410353692/

Dreamweaver CS5 安装可能出现下面两种错误!

错误一

1、 安装程序检测到计算机重新启动操作可能处于挂起状态。建议您退出安装程序,重新启动并重试。

2、 这个错误很好解决window + R打开注册表regedit

3、 依次展开HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager目录,找到其中的 PendingFileRenameOperations 项目,直接右键,选择“删除”即可有人说没有这一项不可能PendingFileRenameOperations请仔细查看。

4、 dingFileRenameOperations 键值其实存放的就是当前系统会话的快照,通过它记录了一个

5、未成功进行文件重命名的操作,在安装 Adobe CS5系列软件时发现了这个键值的存在,它就会认为上一个安装程序没有完成,因此会提示让重新启动(ps:重启是没有任何作用的哟)。

作者  | 2011-6-16 6:38:13 | 阅读(1246) |评论(2) | 阅读全文>>

jQuery的.bind()、.live()和.delegate()之间区别

2011-6-7 12:47:15 阅读525 评论2 72011/06 June7

DOM树

首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子:

事件冒泡(又称事件传播)

当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。

1 $('a').bind('click',function(){alert('that tickles!')})

因此一个单击操作会触发alert函数的执行。

click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。

在操纵DOM的语境中,document是根节点。

现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。

.bind()

1 $('a').bind('click',function(){alert('That tickles!');})

这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。

.live()

$('a').live('click',function(){alert('That tickles!')})

JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到d

作者  | 2011-6-7 12:47:15 | 阅读(525) |评论(2) | 阅读全文>>

无团队,不可乐——我们如何使用TeamCola

2011-6-6 21:29:57 阅读413 评论2 62011/06 June6

摘要: 记得网上曾流传过这样一句话:“不怕神一样的对手,就怕猪一样的队友”,相信看过的人都会心一笑,明白与优秀的搭档默契地合作有多重要。 你需要信任你伙伴的能力和责任心,而信任的基础则是开放和透明——在一个扁平而高效的小团队里,每个人都可以,也应该知道团队中的其他人干...

记得网上曾流传过这样一句话:“不怕神一样的对手,就怕猪一样的队友”,相信看过的人都会心一笑,明白与优秀的搭档默契地合作有多重要。 你需要信任你伙伴的能力和责任心,而信任的基础则是开放和透明——在一个扁平而高效的小团队里,每个人都可以,也应该知道团队中的其他人干了些什么——于是我们开发了TeamCola并一直使用,最终发现它重新定义了我们团队管理和工作的方式——嗯,简单地说,它解放了我们。

以前的管理模式 彩程设计是一家位于成都,专注于移动互联网领域企业应用软件设计的小公司,我们只有14个成员。跟绝大多数微型创业公司一样,不可能设置专职的管理人员来对每个成员的工作效率进行管理和考核。我们凭借成员自发的工作热情和自律,辅以少量的公司规定,来保证团队的整体工作质量和效率。

在没有TeamCola之前,彩程设计有两条规定:

1.没孩子的成员,早晨9:30前到公司;有孩子的成员,10:30前到公司。下班时间不固定。

2.每天下午5:30,公司开例会,大家轮流发言,回答以下三个问题:

(1)今天做了什么?(2)明天准备做什么?(3)工作中有没有什么问题?

发言过程中,可以随时提问和讨论,保证团队里每个人都清楚公司的动态。

作者  | 2011-6-6 21:29:57 | 阅读(413) |评论(2) | 阅读全文>>

关于Modernizr的使用

2011-5-20 15:52:12 阅读544 评论2 202011/05 May20

modernizr就是为HTML5而生的——它是一个检测浏览器对HTML5和CSS3特性支持的JS库,通过检测你的浏览器对html5/css3的支持情况,返回特定的样式名称,从而可以针对不同的浏览器写出不同的样式。

Modernizr @ git

modernizr项目托管在git,你可以通过以下地址获取它:

http://github.com/Modernizr/Modernizr

作者还在git提供了一个简单的输出页:

http://modernizr.github.com/Modernizr/output.html

和一个详细测试页面:

http://modernizr.github.com/Modernizr/test/index.html

相关资料:

http://www.blueidea.com/tech/web/2011/8341_3.asphttp://www.qianduan.net/modernizr-and-html5.html

作者  | 2011-5-20 15:52:12 | 阅读(544) |评论(2) | 阅读全文>>

查看所有日志>>

 
 
 
 
 
 
 
 

北京市 东城区 天蝎座

 发消息  写留言

 
前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com
 
近期心愿能够快速尽其所知,学其所不能,从而完成事情并远超期望。
博客等级加载中...
今日访问加载中...
总访问量加载中...
最后登录加载中...
 
 
 
 
 

天气

 
 
模块内容加载中...
 
 
 
 
 

日志分类

 
 
日志分类列表加载中...
 
 
 
 
 

自定义模块

 
 
模块内容加载中...
 
 
 
 
 
 
 
模块内容加载中...
 
 
 
 
 
 
 
列表加载中...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2012

   
创建博客 登录  
 关注