摘要：
HTML5 横空出世，怎能不提神奇的 canvas。还记得多年前小探 GDI 和 opengl 时的心潮澎湃，那时一心想在web中实现画板功能，但困惑于如何在 html 中嵌入 c++ 编译后的 exe 文件。后来，flash 和 flash3D 的发展让人没理由再去纠结这个问题，在 web 中嵌入一个 swf 相比 exe 要轻松多啦。直到有一天，WHATWG 的那组人向世界宣称 HTML5 添加了对脚本和布局之间的原生交互能力，他们的目标是和插件说再见。哇，这太让人激动，当禁用屏蔽安装失败的隐患消除之后，世界将变得更加和谐，于是渺小的我，从 canvas 开始，开启 Html5 的入门之旅 阅读全文
随笔分类 - CSS+Html
Study DOM
2012-07-30 10:27 by @影子@, 203 阅读, 收藏, 编辑
摘要：
DOM 层次DOM1包括2个部分，分别为Core和HTML。DOM1 core提供了一系列文档结构的基本接口，同事定义了外部XML文档的接口。HTML1 提供了比DOM1更高层的接口，使得操作文档变得更为方便，所有的属性和方法都可以直接和XML、HTML进行交互DOM2DOM2包含六个部分，分别为 Core 、Views 、Events、 Style、 Traversal、 Range 和 DOM2 HTMLMozilla支持DOM2的大部分特性DOM Level 1The DOM Level 1 specification is separated into two parts: Core 阅读全文
用例子验证w3c的stack-level在不同浏览器中的显示
2012-07-17 15:29 by @影子@, 992 阅读, 收藏, 编辑
摘要：
z-index是我们非常熟悉的属性，用来确定定位元素在垂直于显示屏方向的层叠顺序 需要明确的是仅仅作用于定位元素，relative和absulute有效。没有继承性。 stack-level不同于z-index，在每一个stacking context中的每个box都有一个stack level， 值大的显示在上，值小的显示在下，同一stack-level的遵循后来居上的原则. w3c规定的stack-level规则 1、定位元素：父级的背景、边界 2、定位元素：z-index为负值的定位元素 3、非定位元素（文本流中）：block块级元素 4、非定位元素（文本流中）：flo... 阅读全文
转载：解决html的select(下拉框)宽度问题
2012-05-30 11:14 by @影子@, 2529 阅读, 收藏, 编辑
摘要：
本文转载自http://linjunhong.iteye.com/blog/462125我们经常要使用select ，但select的大小会随着内容的大小而变化。很烦人啊。网上有人说用层来替代，这个方法是可行的，就是觉得有点麻烦。本人喜欢投机取巧。。呵呵所以想了个懒办法--用脚本控制当select被点击（onclick或者onchange）的时候调用脚本函数改变这个select的width值当select失去焦点（onblur）的时候再一次调用脚本恢复这个select的width值。<select id="linjunhong" name="xiamen&q 阅读全文
转载：固定表格布局下的各浏览器对与表格宽度计算算法不同
2012-05-29 10:30 by @影子@, 709 阅读, 收藏, 编辑
摘要：
问题描述固定表格布局下的各浏览器对与表格宽度计算算法不同。造成的影响1. 内容溢出列的宽度不够容纳其内容时，IE6 IE7 IE8(Q) 会将溢出的内容隐藏，而其他浏览器则会根据单元格的 'overflow' 属性决定是否隐藏溢出内容，这时候溢出单元格的内容有可能与其他单元格的文字重叠。2. 列的实际宽度不是设定宽度有浏览器对于 TABLE 元素均是将宽度作用于 'border-box'，但是对于 TD 元素的宽度的作用范围在不同浏览器中却产生了差异，而 IE(Q) Chrome Safari 中的处理更接近标准，即单元格与表格一样，其宽度均作用于 border 阅读全文
兼容 FF&IE 的替换鼠标选择文字方法(转载)
2012-05-25 15:28 by @影子@, 248 阅读, 收藏, 编辑
摘要：
<script type="text/javascript">function changes(obj){var TextIn=document.getElementById("textin");if(TextIn.createTextRange){ //ie兼容 TextIn.focus(); document.selection.createRange().duplicate().text=obj;}else{ //firefox兼容 var iStart = TextIn.selectionStart; var iEnd = TextI 阅读全文
转：ie和firefox的区别：range操作
2012-05-24 23:59 by @影子@, 356 阅读, 收藏, 编辑
摘要：
//if firefoxirange = window.getSelection().getRangeAt(0);// if ieirange = document.selection.createRange();我先说一下代码的目的：要获得当前用户鼠标拖选内容所在的节点类型，我个人的功能目的在于判断当前是否一个A节点，如果是，那么取得他的href。我们先看firefox：在firefox的dom标准，定义了一个属性我们可以直接使用它来获得所选内容的父节点，同时使用nodeName来获得当前节点的类型：irange.startContainer.nodeName;我在firefox里面aler 阅读全文
转：haslayout：必须要理解的IE渲染概念
2012-05-16 10:08 by @影子@, 271 阅读, 收藏, 编辑
摘要：
本文转载自：http://www.52maomao.info/haslayout-we-must-understand-the-concept-of-ie-rendering.html很多的前端朋友喜欢把IE6的一些渲染BUG归结为haslayout的错，其实不然，haslayout作为IE渲染引擎的一个组件，自然有它的计算方式和使用方法，把所有的错误都归咎于它身上，其实有点名不副实，因为只要你知道在何时何地去使用它，触发它，就不会有所谓的渲染BUG和CSS Hack了。当然，要知道如何去使用haslayout和避免因为它而产生的IE渲染BUG，我们首先要了解haslayout是什么。hasl 阅读全文
CSS 必知的7个知识点
2012-04-13 13:52 by @影子@, 2693 阅读, 收藏, 编辑
摘要：
无敌的老公昨天给俺进行了一堂css的培训~~哎，为神马老公啥都知道，我神马都不懂，自愧不如啊~~555好记性不如烂笔头，遂在此一一总结。本人小菜，从最基础的内容开始。1、width是个雷 很多页面要求宽度自适应，那么width设百分比吧，否则块元素很容易变成粘着不走的狗皮膏药 当没有定义元素宽度时，浏览器撑满整行，实际上执行的是width：auto，宽度自适应。2、IE6不认识min-height 解决办法就是_height，有时候明明不需要可变高度，如果喜欢没原则的min-height，那么记得用_height对付下IE6这个屌丝。3、float和clear float和绝对定位都会... 阅读全文
css hack
2012-04-12 14:35 by @影子@, 250 阅读, 收藏, 编辑
摘要：
1.区别IE和非IE浏览器CSS HACK代码#divcss5{ background:blue; background:red \9; }2.区别IE6,IE7,IE8,FF CSSHACK 【区别符号】：「\9」、「*」、「_」 【示例】：#divcss5{ background:blue; background:red \9; *background:black; _background:orange; }【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏 览器正确的读取到自己看得懂得CSS语法 阅读全文
转：Google Chrome浏览调试工具
2012-04-12 10:44 by @影子@, 911 阅读, 收藏, 编辑
摘要：
【原文地址：http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html】在Google Chrome浏览器出来之前，我一直使用FireFox，因为FireFox的插件非常丰富，更因为FireFox有强大的Firebug，对于前端开发可谓神器。在 Chrome出来的时候，我就喜欢上它的简洁、快速，无论是启动速度还是页面解析速度还是Javascript执行速度（现在的FireFox4也比之前 的FireFox3有很大的进步）。不过当时由于Chrome的开发者工具还不是很完善，而我又不是很熟悉，加之对于Firebug的好感和依赖，当 阅读全文
转：web开发必须知道firebug调试技巧
2012-04-12 10:24 by @影子@, 328 阅读, 收藏, 编辑
摘要：
1、使用Firebug可以找到页面中的任何内容用鼠标右键选中某个元素，然后在弹出的菜单中，选择“查看元素”，马上就会在HTML页面代码 中找到该元素对应的代码，点esc退出，如下图所示：同样，也提供了更快速的方法：只需要点Firebug插件左上方的箭头，如下图所示，则每当鼠标在页面中移动时，在Firebug控制台中就马上显示移动时经过的HTML元素的代码：2、可以使用Firebug修改HTML和CSS通过Firebug，可以直接修改HTML，增加HTML的属性，删除元素，增加CSS样式及实现更多功能，如下图：在上图的菜单中可以清楚看到，你可以对HTML元素进行各样的修改操作，方法是先点击HTM 阅读全文
转：使用jQuery和CSS控制元素对齐
2012-04-10 14:15 by @影子@, 477 阅读, 收藏, 编辑
摘要：
本文转载自：http://www.w3cplus.com/jquery/Justify-elements-using-jQuery-and-CSS在Web页面中创建一个Web表单时（比如说注册信息表单，或者联系表单），你都必须做出一个功能和视觉对齐的布局。如下图所示：我们一般在Web页面中都需要制作如上图所示的美化后的表单风格。解决这种布局效果，最简单的方式就是将form用table来制作，将label放在一个td，而input放在另一个td中，并设置其对齐方式，这种方法是最早的使用方法，也是最方便的一种方法，以前我也常用；但随着Web技术的发展，后面改用div来布局form就使用另一种方法， 阅读全文
三种按钮hover的方法
2012-04-05 17:05 by @影子@, 6063 阅读, 收藏, 编辑
摘要：
给按钮加hover，发现有很多种方法，小试三种，测试后发现都OK，留在此地作一个备忘。1.直接改变背景图片 obj.style.backgroundImage="url(btnSmall.gif)";2.改变CSS obj.style.cssText= "background:url('btnSmallHover.gif')"; 3.jquery的hover jquery.hover(function(){},function(){});示例代码如下图所示：<html><head><script src=&q 阅读全文
[转]CSS优先级的详细讲解
2012-03-29 16:59 by @影子@, 320 阅读, 收藏, 编辑
摘要：
在讲CSS优先级之前，我们得要了解什么是CSS，CSS是用来做什么的。首先，我们对CSS作一个简单的说明：CSS是层叠样式表（Cascading Style Sheets）的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说，应该很少没有听说过CSS了，因为在制作网页过 程中我们经常需要用到。其次：我们能通过CSS为文档设置丰富且易于修改的外观，以减轻网页制作者的工作负担，从而减轻制作及后期维护的代价。其实现在还来讲CSS是什么，CSS有什么作用完全是多余的，相信从事网页制作的朋友都已经或多或少的接触过了。言归正传，我们开始进入今天的话题：一、什么是CSS优先级 阅读全文
块级元素和行内元素总结
2012-02-24 12:52 by @影子@, 1506 阅读, 收藏, 编辑
摘要：
行内内容是说由行内元素组成的内容，行内元素大家都知道吧，比如 SPAN 元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。
块级内容跟则是由块级元素构成，DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
块级元素和行内元素的区别是，块级元素会占一行显示，而行内元素可以在一行并排显示。 阅读全文