2013年09月_Hobootu

原创关于float和inline-block实现不规则瀑布布局的探索

无标题 1div{ vertical-align:top; /*定义元素在行内的上下位置，比如sub*/ display:inline-block; margin:0; /*值为0，依然有外边距5px*/ background:black; width:200px; height:200px;}123无论是float还是inline-bloc

2013-09-23 11:01:09 1134

转载让IE6/IE7/IE8支持CSS3的8种方法

我们都知道，IE浏览器暂不支持CSS3的一些属性。国外的工程师们，不安于此现状，他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性，我觉得这些都是很有意义，很有价值的工作，可以推动整个技术领域的进步的。都目前为止，有不少可以让IE支持部分CSS3属性的工具。例如：1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js)这个玩意估计是试图让IE支持C

2013-09-23 02:16:06 32498 1

大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：data:image/png;base64,　iVBORw0KGgoAAAANSUhEUgnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Ac

2013-09-22 23:55:32 8835

原创 CSS优先级

两个角度比较：从级别上看，通常我们可以将CSS的优先级由高到低分为六组：无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6支持这个属性，但要注意bug，见上一篇博客。第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。第三级优先的属性是由一个或多个id选择器来定义的。例

2013-09-22 23:28:27 619

转载 @import和link的区别

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：XML/HTML代码 XML/HTML代码 @import url("CSS文件"); 两者都是外部引用CSS的方式，但是存在一定的区别：

2013-09-22 22:52:50 3777

转载 IE6支持important的小注意

IE6真的不认识不支持!important吗？答案是:No!现在举几个例子说明这个问题，以下面的 XHTML 代码为例：这里是第一行文字那这里就是第二行文字咯这里应该是第三行里吧这里绝对是第四行了第一个例子的 CSS 代码：ul{margin:20px auto;padding:0;width:500px;list-style:none;

2013-09-22 22:40:35 1340

原创 outline和border的区别

outline(轮廓)是绘制在元素周围的一条线，位于边框边缘的外围，起突出元素的作用轮廓线不会占用空间，也不一定是矩形

2013-09-22 21:38:58 5206

转载 p不能嵌入<div>

那哪些块元素里面不能放哪些块元素呢？我知道你有这个疑问，也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的，我们已经知道是在最外层，下一级里面只会有、、、，而我们已经知道了可视的元素只会出现在里，所以我们把划在第一个级里面，接着，把不可以自由嵌套的元素划在第三个级，其他的就归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的、、、、

2013-09-22 20:44:19 4811

原创 onkeypress,onkeyup,onkeydown的区别

JS中onkeypress,onkeyup,onkeydown的区别onkeypress是在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。onkeyup 是在用户放开任何先前按下的键盘键时发生。onkeypress是在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。因此做搜索建议s

2013-09-22 18:00:11 694

转载 .gray.p1 多类选择器IE6显示不正常

24号那天一不小心加班到了9点多，原因是页面在ie6下一塌糊涂，我就觉得奇怪，我规规矩矩地写，一点没用什么取巧奇葩的方法，不至于这么乱七八糟啊，又没办法把问题描述清楚去google，只好自己硬着头皮找原因，后面终于被我发现问题的原因了，是ie对多类选择器的支持不正常。.green.p1{} //.green .p1{}结果相同 .red.p1{}

2013-09-22 17:46:59 1139

原创 meta标准属性用法总结

常用的HTTP-EQUIV类型有：Set-Cookie(cookie设定)说明：如果网页过期，那么存盘的cookie将被删除。用法：注意：必须使用GMT的时间格式。js相同用法：在 JS(JavaScript) 中使用 expires 时应该和 cookie 同时写入，如：document.cookie = "clr=red; expires=" + e

2013-09-22 17:29:43 1009

原创网页知识——（移动web篇）

一、基本概念（1） CSS pixels与device pixelsCSS pixels：浏览器使用的抽象单位，主要用来在网页上绘制内容。device pixels：显示屏幕的的最小物理单位，每个dp包含自己的颜色、亮度。等值的 CSS pixels在手机屏幕上占多大的位置，这不是固定的，这取决于很多属性。经过分析和总结，我们可以得出这么一条公式： 1 CSS p

2013-09-16 17:39:53 804

转载 CSS精灵优化Retina显示屏下的网站图像

CSS精灵优化Retina显示屏下的网站图像转载http://www.shejidaren.com/css-sprites-optimize-retina-2x-image.htmlRetina Display的出现有好有坏吧，坏处就是我们设计师要多做一份@2x版本的图像，如果不做的话在Retina显屏下会模糊。既然要做2份了，哪么我们可以利用CSS精灵（c

2013-09-16 00:58:46 1036

转载各种浏览器内核的区别

一、浏览器内核 Rending Engine, 顾名思义，称之为渲染网页内容的，将网页的代码转换为你看得见的页面，因为是排版，所以排版，所以肯定会有排版错误等问题。为什么会有排版错误呢，一部分是由于网站本身编写不规范，另一方面是浏览器本身的不规范现在有一些主流的排版引擎，因为这些排版引擎都有其代表的浏览器，所以常常会把排版引擎的名称和浏览器的名称混用，其实这

2013-09-15 22:11:20 1124

原创汇总几篇IE attribute hack的文章

说明：IE8+表示IE9、IE10......IE8: hack： http://www.css88.com/archives/1681IE9 hack：http://www.css88.com/archives/3746看了会觉得很奇怪，结合起来写成background-color:blue\9\0; /* ie8+,注意顺序*/ 居然变成IE9 的hack

2013-09-07 02:33:25 639

原创浏览器的浏览模式——兼容模式

首先申明浏览器的浏览模式，不是文档解析模式（标准模式和怪异模式）。简单地说，就是浏览器的浏览网页时用什么版本的内核。所谓的兼容模式就是用某个历史版本浏览。网上搜集结果，可以设置网页浏览模式的浏览器如下： IE：当要模拟IE7时，指定IE=EmulateIE7，指定IE=5, IE=7, 或IE=8来选择其中一种兼容性模式。你也可以指定IE=edge来指示I

2013-09-07 00:19:17 1914

原创 document.documentElement和document.body区别

区别：body是DOM对象里的body子节点，即标签；documentElement 是整个节点树的根节点root，即标签；没使用DTD情况即怪异模式BackCompat下：document.documentElement.clientHeight=0document.body.clientHeight=618使用DTD情况即标准模式CSS

2013-09-06 23:47:15 1505

原创关注javascript的语言标准规范和发展——ECMAScript

一、简介ECMAScript（ES）是脚本语言的标准，正式名ECMA-262。javascript、jscript、ActionScript都是建立在它之上，但他们也扩充了自己。比如，了解一下ES，就知道javascript包含ECMAScript了。因此关注ES就差不多知道js的发展情况了。ECMA都是欧洲计算机制造协会的简称。二、版本至今为止有五个ECMA-262版本。

2013-09-06 20:51:31 1792

转载 Ajax解析之一——XMLHTTPRequest对象的方法和属性

方法： void open(string method, string url, boolean asynch, string username, string password)：这个方法会建立对服务器的调用。这是初始化一个请求的纯脚本方法。它有两个必要的参数，还有3个可选参数。要提供调用的特定方法（GET、POST或PUT），还要提供所调用资源的URL。另外还可以传递一个Boolean值

2013-09-05 22:41:58 533

原创效果解密之一——循环图片探秘（新浪Qing首页轮换图）

代码：人车一体成一道靓丽风景线我就喜欢lomo一下你永远是校园中的焦点

2013-09-05 21:25:02 739

原创 javascript对象小探之十一——innerHTML、outerHTML、innerText、textContent区别

test1 test2 test.innerHTML（所有浏览器支持）：“test1 test2 ”test.outerHTML（所有浏览器支持）: 　　除了包含innerHTML的全部内容外, 还包含对象标签本身。　　上例中的text.outerHTML的值也就是test1 test2 test.innerText（IE仅支持）: 　　从起始位

2013-09-05 00:46:40 3413

转载判断是否为IE的几种方法

前几天在网上看到一个技术牛人写的世界上判断是否IE浏览器之最短的js代码，如下： if(!+[1,])alert("这是ie浏览器"); 　　 else alert("这不是ie浏览器"); 怎么样，强悍吧。今天在博客园又看到一位朋友总结了其它一些判断方法（实例代码），于是烈火把这些教程转载给大家，期待对您有所帮助：其实有

2013-09-04 22:53:15 1082

转载 javascript对象小探之十——onload和onreadystatechange句柄

仅IE9/10同时支持script元素的onload和onreadystatechange事件如下?12345678910<!DOCTYPE HTML>html> head> meta charset="ut

2013-09-04 22:35:47 1380

原创 javascript对象小探之九——==和===、!=和!==

1、对于string,number等基础类型，==和===是有区别的1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等2）同类型比较，直接进行“值”比较，两者结果一样2、对于Array,Object等高级类型，==和===是没有区别的进行“指针地址”比较.所以如果两个值都引用同一个对象或函数，那么==[相等]；否则[不

2013-09-04 20:54:37 640

转载 javascript对象小探之八——函数声明与定义位置要求

在JS中有两种定义函数的方式，1、var aaa=function(){...}2、function aaa(){...} var 方式定义的函数，不能先调用函数，后声明，只能先声明函数，然后调用。 function方式定义函数可以先调用，后声明。请看代码： //aaa();这样调用就会出错

2013-09-04 20:37:32 1707

原创 javascript对象小探之七——数值进制的表示、解析、转化

//数值的表示方法 document.writeln(5*020); //结果是5*16=80 document.writeln(5*09); //非进制内的字符转化10进制，结果为45 document.writeln(5*0x10) //结果为5*16=80 //数值的解析方式 document.writeln(parseInt(01180,2)); //按二进

2013-09-04 13:05:47 559

原创 javascript对象小探之五—— void()方法

一、作用：进行操作，但不是返回任何值二、使用条件：必须传递一个参数expression。否则会出错三、调用格式： void (expression)四、用法举例：<A href="javascript:doTest2();void(0);">总结：1、void(0);表示什么也不做；2、html引入js可以使用“javascript：”,积累这个

2013-09-03 23:51:50 1190

原创 javascript对象小探之四---undefined、null、NaN的相互运算

浏览器的JavaScript版本支持测试 var a; var b=a+9; var c="dd"+a; var d=a+null; var e=9+null; var f="dd"+undefined; var h=a>>>1; var g=h>>1; var i=null>>1; document.writeln(b); //undefined无

2013-09-03 23:33:57 708

原创 web标准---html、css、js分离

简单的说，就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。 we

2013-09-01 21:47:19 2437

转载网页浏览器缓存meta

网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。其作用根据不同的重新浏览方式分为以下几种情况：（1）打开新窗口如果指定cache-control的值为private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问

2013-09-01 21:14:17 598

我的博客