0%

:nth-child 可以选择父元素下的字元素,:nth-of-type 也可以。但是它们到底有什么区别呢?

其实区别很简单::nth-of-type 为什么要叫 :nth-of-type?因为它是以”type“来区分的。也就是说:ele:nth-of-type(n)是指父元素下第 nele 元素,

ele:nth-child(n) 是指父元素下第 n 个元素且这个元素为 ele,若不是,则选择失败。

eg:

1
2
3
4
5
6
7
<div>
<ul class="demo">
<p>zero</p>
<li>one</li>
<li>two</li>
</ul>
</div>
阅读全文 »

随着响应式设计模型的诞生,Web 网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内 IE6 用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的核心 CSS 技术 Media(媒体查询器)的用法。

准备工作 1:设置 Meta 标签

首先我们在使用 Media 的时候需要先设置下面这段代码,来兼容移动设备的展示效果:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

这段代码的几个参数解释:

阅读全文 »

HTML 提供了 5 种空格实体(space entity),它们拥有不同的宽度,非断行空格(&nbsp;)是常规空格的宽度,可运行于所有主流浏览器。其他几种空格(&ensp; &emsp; &thinsp; &zwnj; &zwj;)在不同浏览器中宽度各异。

&nbsp;

它叫不换行空格,全称 No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了  ,它是按下 space 键产生的空格。在 HTML 中,如果你用空格键产生此空格,空格是不会累加的(只算 1 个)。要使用 html 实体表示才可累加,该空格占据宽度受字体影响明显而强烈。

&ensp;

它叫半角空格,全称是 En Space,en 是字体排印学的计量单位,为 em 宽度的一半。根据定义,它等同于字体度的一半(如 16px 字体中就是 8px)。名义上是小写字母 n 的宽度。此空格传承空格家族一贯的特性:透明的,此空格有个相当稳健的特性,就是其占据的宽度正好是 1/2 个中文宽度,而且基本上不受字体影响。

阅读全文 »

IE6/IE7/FF 的 CSS Hacks

区别 IE 和非 IE 浏览器

1
2
3
4
#tip {
background: blue; /*非IE 背景藍色*/
background: red \9; /*IE6、IE7、IE8背景紅色*/
}

区别 IE6,IE7,IE8,FF

【区别符号】:\9*_

阅读全文 »

前端已经被玩儿坏了!像 console.log() 可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到 Quora 上一个帖子,瞬间又 GET 了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来。现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容。

HTML 篇

浏览器地址栏运行 JavaScript 代码

这个很多人应该还是知道的,在浏览器地址栏可以直接运行 JavaScript 代码,做法是以 javascript: 开头后跟要执行的语句。比如:

1
javascript: alert('hello from address bar :)');
阅读全文 »

我们知道,IE6 的存在,因其预装于目前市场占有率最大的 Windows XP 操作系统。对于老态龙钟的 IE6,说拜拜还需要很长的时间。

IE 虽然给我们网页设计师,带来了不少多麻烦,还好,IE 条件注释,给我们解决浏览器兼容问题带来了一个很好的方法。

什么是 IE 条件注释

IE 条件注释,顾名思义就是使用 IE 特有的条件语句来显示代码块。

这些巧妙的逻辑片段只能被 IE 浏览器所支持,其它的浏览器理解为纯粹的 HTML 注释,不起任何作用。条件注释在 IE5 中首次出现,并且得到了 Widnows 浏览器所有后续版本的支持。IE 条件注释及其有效,而且非常容易记住。通过这些技巧,我们可以为基于 Windows 的 IE5、6、7、8 添加一些特殊的行为。这样做的好处是,HTML 和 CSS 代码可以通过验证。主要的缺点是这些注释需要放在 HTML 页面中,而不是放在 CSS 中。这样,当你不需要这些东西,或者有所更改的时候,就需要维护很多的地方。好处是通过这种方式使用条件注释,可以很轻松的管理项目中的目标浏览器,并使得 CSS 补丁文件保持独立自由。更重要的是它帮助我们优化了 CSS 样式表,保证了主要样式表的干净,这对于大型网站来说就很重要了,也许你还没有感觉到它的可爱之处。

阅读全文 »