零度の热情

10款浏览器CSS Reset的方法

Fri, 06 Aug 2010 06:15:28 +0000

Generic Reset CSS
Esse com certeza é o mais conhecido e utilizado pelos desenvolvedores:

* {
padding: 0;
margin: 0;
border: 0;
}

Ateneu Popular CSS Reset
CSS inicial sugerido pelo site Ateneu Popular:

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
table { border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

Chris Poteet's Reset CSS
Técnica sugerida por Chris Poteet's para Reset CSS:

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Yahoo's CSS Reset
Técnica de Reset CSS proposta pelo Yahoo:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}

Eric Meyer Reset CSS
Esse com certeza deve ser o mais utilizado entre os desenvolvedores, proposto por Eric Meyer, é o que eu utilizo atualmente:

html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Tantek Celik Reset CSS
Técnica de Reset CSS proposta por Tantek Celik:

:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

Christian Montoya Reset CSS
Técnica sugeria por Christian Montoya:

html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
li, dd, blockquote {
margin-left: 1em;
}
form label {
cursor: pointer;
}
fieldset {
border: none;
}
input, select, textarea {
font-size: 100%;
font-family: inherit;
}

Rudeworks Reset CSS
Técinca de Reset CSS proposta por Rudeworks:

* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 5% "Lucida Grande", Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottom: 3em;
vertical-align: baseline;
}
sub {
position: relative;
bottom: -2em;
vertical-align: baseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type='text'], textarea {
font-size: 100%;
font-family: monaco, "Lucida Console", courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a abbr, a acronym {
border: none;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 8em;
}
h3 {
font-size: 6em;
}
h4 {
font-size: 4em;
}
h5 {
font-size: 2em;
}
h6 {
font-size: 1em;
}
a, a:link, a:visited, a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
}
label, button {
cursor: pointer;
}
input:focus, select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}

Anieto2K Reset CSS
Técnica de Reset CSS proposta por Andrés Nieto:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: ""
}
blockquote, q {
quotes: "" ""
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}

CSSLab CSS Reset
Técnica de CSS Reset proposta pelo site CSSLab:

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ol, ul {
list-style: none;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
/* Fixes incorrect placement of numbers in ol's in IE6/7 */
ol { margin-left:2em; }
/* == clearfix == */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

Javascript调试错误小技巧

Fri, 06 Aug 2010 05:19:59 +0000

做前端开发的同学们，也许比较能体会到脚本错误的痛苦，脚本错误产生有很多种原因，从大的方向来分，分为两种，一种是人为的，一种是浏览器加载不全导致。

对于第二种情况，暂时来说是无能为力，至于人为的脚本错误，很多也是不经意所产生的，同样是因为不经意，所以你要找到原因也不容易，在这里给各位同学说说我平时是怎么调试的。

得到的结果是

引用

Error:a is not defined
Url:file:///C:/Users/hdj/Desktop/html/jserror.html
Line:13

Tags - javascript , debug

仿腾讯微博/谷歌阅读器滚动加载效果

Mon, 28 Jun 2010 14:22:13 +0000

腾讯微博在“我的主页”查看最新的广播列表时，为了更好的用户体验，并没有使用传统的分页，而是改用滚动加载，当用户把页面滚动到底部的时候，自动加载下一页的内容。谷歌阅读器也正是使用了这种效果。

花了一点点时间山寨了一个，欢迎指正和交流。

Demo:http://www.hdj.me/demo/javascript/reachBottom/index.html

关于URL组成部分的扫盲

Fri, 26 Feb 2010 02:36:48 +0000

让我们来解剖一个 URL 的所有部分。我将告诉你，在 Google 通常所涉及的分别指 URl 的哪些不同部分。这是一个有效的 URL，并包含很多元素：

http://video.google.co.uk:80/videoplay?docid=-7246927612831078230&hl=en#00h02m30s

以上 URL 的组成元素分解：

传输协议是：http，类似的协议还包含：https，ftp， etc。
主机或主机名：video.google.co.uk 。
子域名是：video。
域名是：google.co.uk。
顶级域名（TLD）是：uk。uk 指的是国家顶级域名（ccTLD）。比如：google.com 其中顶级域名是 com。
二级域名（SLD）是：com.uk。
端口：80，这是 web 服务器的默认端口。其他的端口也是允许的，比如：web 服务器还可以听端口8000。当端口是80 时，很多人放空不写。
路径：/videoplay。路径通常指一个文件或 web 服务器上的一个位置。如：/directory/file.html 。
以上 URL 包含参数。参数名字是 docid，参数的值是-7246927612831078230。URLs 可以有很多参数。参数以问号（?）开始，以（&）隔开。
看到了“#00h02m30s”了吗？这称为一个字符串或一个命名锚链。字符串过去通常指网页文件中的一个内部片段。在这个例子中，这个命名锚链的意思是 “2分30秒后跳转到视频”。我现在想起来，Google 通过移除字符串以实现 URL 标准化。

什么是静态 URL 或动态 URL？技术上，我们认为静态 URL 指的是服务器返回一个页面时不需要进行任何数据库操作。动态 URL 指，在返回页面之前，服务器需要进行相应的运算。

一些人通过问一个问题来简单区别静态 URL和动态 URL：“这个URL 中有没有问号（？）”。如果有问号，则一般认为是动态 URL；相反，则一般是静态 URL。当然，这不是一个硬性而有效的规则。

jquery1.4正式版发布了，吼！

Fri, 15 Jan 2010 04:37:21 +0000

如题！
E文不是很好，就不给大家翻译更新日志了，链接在些http://jquery14.com/day-01/jquery-14，有兴趣的同学可以看一下：）

基于Google Analytics的点出统计

Wed, 13 Jan 2010 07:44:35 +0000

大部分web引用统计系统都实现了基于站内的点击行为分析，但是对于点出到其他网站的链接，由于点出链接地址不一定都部署了相通的统计。那么这些点击行为就要在链接所在的页面在点击的时候触发统计了。传统的是中间转向页面，但这样的链接机制非常不利于SEO，给蜘蛛带来了大量的麻烦用于识别真正的目标地址；之前介绍过一些基于鼠标触发机制的页面点出统计方法：一般是通过在点击的时候触发在当前页面插入一个 img bean，然后统计相应的img 请求实现，现在连这样的点击触发器在Google Analytics统计中也可以自定义实现了：以下例子在页面点击的时候，会触发Google Analytics生成一个对clickto/TAGET_URL 一个自定义的地址（clickto实际上不存在的）请求访问；

在统计报表中看到的效果就是这样的：

在所有访问url中过滤出clickto即可；感谢XD同学，这个点出统计例子从very.cd上学到的；一个好的例子胜过长篇大论，可以看到very.cd通过对onclick的触发机制，结合站内的cookie等还实现了客户回访率统计等；
在CSDN大会上VeryCD的Dash说他最恨的是制造网络阻尼的人，这点，我是严重支持的；

document.onclick = function(e) {
e = e || event;
var el = e.target || e.srcElement;
if ( el.tagName=='A' ) {
pageTracker._trackPageview("\/clickto/" + window.location.pathname + el.href.replace("http:\/\/", "\/"));
}
}

javascript字符串对象几个扩展函数ucfirst,lcfirst,ucwords,lcwords

Mon, 30 Nov 2009 07:42:06 +0000

//字符首字母转大写
String.prototype.ucfirst = function(){
    var str = this, s='';
  if(!str.match(/^[a-z]/i)) return str;
    s = str.slice(0, 1).toUpperCase();
  s += str.slice(1);
    return s;
}

//字符首字母转小写
String.prototype.lcfirst = function(){
    var str = this, s='';
  if(!str.match(/^[a-z]/i)) return str;
    s = str.slice(0, 1).toUpperCase();
  s += str.slice(1);
    return s;
}

//所有单词首字母转大写
String.prototype.ucwords = function(){
    var s='';
  var arr = this.split(/\s+/);
  for(i in arr){
    s += (!s?'':' ') + arr[i].ucfirst();
  }
  return s;
}

//所有单词首字母转小写
String.prototype.lcwords = function(){
    var s='';
  var arr = this.split(/\s+/);
  for(i in arr){
    s += (!s?'':' ') + arr[i].lcfirst();
  }
  return s;
}

用法：

var str = "hello world";
var uc = str.ucfirst();//Hello world
var lc = uc.lcfirst();//hellw word
var ucw = lc.ucwords(); //Hello World
var lcw = ucw.lcwords()//hello world

JAVASCRIPT学习札记-对象的私有属性

Thu, 26 Nov 2009 05:54:48 +0000

在jQuery Learning群里和几个好友讨论关于JAVASCRIPT对象私有属性时，发现貌似JAVASCRIPT的对象没有private或者protected类型，所有的都是public，不过可以通过闭名（别的高级语言称之为空间）来模拟实现。
看代码吧：

建议直接COPY到FIREBUG运行看效果。

万恶的expression

Thu, 12 Nov 2009 09:56:25 +0000

_height:expression(this.offsetHeight < 600 ? 600 : this.offsetHeight); overflow:auto;

居然能让IE6直接挂掉！

原因是，over-flow是自动延伸，当DIV里的内容超出原定高度，就会自动延伸，直到刚好等于里面内容的高度，expression的作用DIV改变的时候执行JS脚本。

以上两个正好组成了一个无聊的死循环，故IE6挂了！

CSS实现垂直居

Wed, 11 Nov 2009 01:26:18 +0000

CSS代码：

#test{
width:200px;
height:80px;
position:absolute;
top:50%;
left:50%;
margin:-40px 0 0 -100px;
border:1px solid #ccc;
}

HTML代码：

some strings

不作详细解析了，大家直接看演示吧！