2Guy's Blog

Google Chrome Developer Tools 中文教程(1)

Author:
by： sliuqin
Date:
6. December 2009 20:41
Tagged in:
Comments:
0
[原文]Google Chrome Developer Tools Tutorial [译文]Google Chrome Developer Tools 中文教程(1) Google Chrome开发者工具包帮助你诊断和修复页面及应用中加载,执行与布局的问题。该工具还可以帮助确保页面或应用使用尽可能小的cpu和内存。 通过本套教程你将熟悉Google Chrome 开发者工具包。该教程被分为一下几个部分： 开始前 如何进入开发者工具包 开发者工具包窗口 如何使用Element面板 如何使用Resources面板(待续) 如何使...
[More]

有道中秋创意首页

Author:
by： sliuqin
Date:
4. October 2009 14:22
Tagged in:
Comments:
0
中秋节各大网站都推出来Logo和皮肤设计,做一个有道首页的demo
[More]

使用高效的css选择器

Author:
by： linkto
Date:
5. September 2009 08:56
Tagged in:
,
Comments:
0
原文：Use efficient CSS selectors 概述 避免使用大量元素匹配低效的关键选择器能加快页面的渲染速度。 详情 浏览器解析HTML时，会构造一个文档树来显示那些需要展示的所有元素。然后匹配元素到各个样式表指定的样式，根据标准样式乘积、继承和排序规则。对于Mozilla（或许其它厂商也是这样），对于每个元素，样式引擎搜寻所有的样式规则来找寻匹配的元素。样式引擎从右到左渲染每一条规则，从最右边的选择器（叫做关键字）开始，逐步筛选每一个选择器，直到找到匹配或无用的规则。（这个选择器指的是这个规则说指向的文档元素。） 根据这个系统可以看出，规则越少样式引擎评估的越好。当...
[More]

css float 示例

Author:
by： sliuqin
Date:
2. September 2009 21:30
Tagged in:
Comments:
0
css float是css中一个比较重要的概念，All About Floats 【中文翻译：关于浮动的前世今生】很好的介绍了这个概念，根据文章做了下面的示例，在线demo
[More]

内联图片实现css sprite

Author:
by： linkto
Date:
25. August 2009 10:12
Tagged in:
Comments:
0
一晃两个月没写博客了，捶胸、顿足、迷茫、大彻大悟。。。哎，太懒了。 大笨推荐了这篇CSS Sprites with Inline Images，非常的不错。特此奉上我的精简加强版： CSS Sprite是一种网页图片应用处理方式，允许我们将页面中的零星图片整合到一个大图中，使用background-image选择sprite图片，width、height设置图片显示的区域，background-position设置所需图片的坐标位置。通过CSS Sprite方法将多张图片组装成一张，不但有效减少http请求，还有降低了图片的尺寸。 这里我们仍然需要使用sprite来组装图片，只是使用的方...
[More]

一个简单的水平和垂直居中布局DIV的方法

Author:
by： sliuqin
Date:
12. August 2009 20:47
Tagged in:
,
Comments:
1
原文：The simplest way to horizontally and vertically center a DIV   我已经用过很多中方法来水平垂直居中布局DIV了。很多代码片段是通过将子DIV1放在父DIV2中，让DIV1居中的。他们能很好的工作，但是我发现了一种更简单的方法：通过CSS来居中一个单独的DIV。 我不确定是否所有人都知道了，但是我试验并想出了这段简单的CSS代码片段。 下面这种图片直观的现实了它是如何工作的： 这里是CSS代码片段，使得DIV能被居中，这个DIV是 100 × 100 px的（正如上图所示） CSS ...
[More]

IE7-/Win: inline-block and hasLayout

Author:
by： linkto
Date:
19. May 2009 21:10
Tagged in:
Comments:
1
再次翻看 IE7-/Win: inline-block and hasLayout，有种豁然开朗的感觉，想起《塔木德》： 复习的意义是无穷的。 复习100遍的人没法跟复习101遍的人相比。 下面就是熊猫的学习笔记。呵呵 在IE-/Win中，inline-block会触发hasLayout。或许这也是这个真正的作用。 inline-block的行为在IE7-中可以实现，但是不同类型的元素效果不尽相同。 HTML中的行内元素 对于行内元素，display:inline-block的作用就是触发hasLayout，并让该元素由行内元素转换为行内块状元素。可以这么说：触发了h...
[More]

CSS常见问题及解决方法

Author:
by： linkto
Date:
30. April 2009 18:13
Tagged in:
Comments:
1
1.IE6下双倍外边距 但元素在浮动的同时又设置该方向的外边距就会出现这个问题，解决方法是将元素的display设置为inline 2.重叠的外边距 1)浏览器会重叠垂直外边距，如果兄弟快元素都设置了顶部和底部的外边距，如一个块元素的底外边距为15px，其下一个兄弟块元素的上外边距为10px，那么他们见的边距仅为15px（未叠加为25px） 2)容器中第一个块元素的上外边距和最后一个快元素的下外边距会重叠到父元素中。可以通过为父元素增加边框和内边距阻止重叠。 3.IE6下实现min-height(min-width)效果 IE6不支持min-height，不过它对待height其实...
[More]

负margin实现流动布局

Author:
by： linkto
Date:
9. April 2009 09:13
Tagged in:
Comments:
0
有朋友问到主内容区不固定宽度的布局方式，可以使用的方法有很多，这里我要说的是负margin的方法。 1.两列布局 1)主内容在右 HTML <div id="wrap"> <div id="main"> <div id="inner"> This is the main content </div> ...
[More]

left和margin-left的区别

Author:
by： linkto
Date:
30. March 2009 18:02
Tagged in:
Comments:
0
今天在论坛中看到有人询问left和margin-left的区别，好像一直以来都没深究过这两者的区别，多实验下整理出下面内容。 通常情况下我们只能通过margin来控制元素的偏移，只有在某一元素运用了相对、绝对或固定这三种定位的情况下left(right、top、bottom)才会起作用。其实定位方式还有一种：静态定位，这也是各个元素默认的定位方式，所以left(right、top、bottom)并不会产生效果。 对于left和margin-left在定位中的区别我分为下面两种来说明： 1.相对定位position:relative 应用相对定位的元素，仍然占据着文档流的空间，所以其它元素的位...
[More]

Powered by BlogEngine.NET 1.4.5.0
Theme by Linkto