CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

• 制作CSS气泡框

气泡状文本框，是一种很生动的网页设计手段。它可以用来表示用户的发言。也可以用来作为特定信息的提示符。DVD租借网站Netflix，还用它显示碟片的详细信息

• XML路径语言:XPath

XPath基于XML的树状结构，提供在数据结构树中找寻节点的能力。最常见的XPath表达式是路径表达式。路径表达式是从一个XML节点（当前的上下文节点）到另一个节点、或一组节点的书面步骤顺序。这些步骤以“／”字符分开，每一步有三个构成成分：轴描述（用最直接的方式接近目标节点）节点测试（用于筛选节点位置和名称）节点描述（用于筛选节点的属性和子节点特征）一般情况下，我们使用简写后的语法。虽然完整的轴描述是一种更...

• 你真的了解HTML吗

出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。

• 理解CSS3线性渐变

为了显示一个渐变而专门制作一个图片的做法是不灵活的，而且很快会成为一种不好的做法。但是遗憾的是，截至写这篇文章，可能还必须这样做，但是希望不会持续太久。多亏Firefox 和Safari/Ch...

• SmartSprites - 命令行形式的CSS Sprites生成器

SmartSprites（http://csssprites.org/）是一个基于java开发的命令行形式的CSS Sprites生成器。它根据CSS文件中的特别注释自动合成图片，然后自动替换原来的图片，最后生成一个新的CSS文件。显然比手工上传、下载，再手工修改CSS方便多了。它可以指定生成－个或多个sprites图片，要合并哪些图片也是由你指定的。这一点要比SpriteMe（http://spriteme.org/）好。SpriteMe本身不是开发阶段的工具。简单介绍一下怎么用：环境要求：...

• iPad Orientation CSS

iPad终于发布了，那么如果用样式区分iPad和iPhone中的safari浏览器，Jason Grigsby做了一个有用的实验...

• CSS3开发工具收集

通常来说，CSS非常简单。但是当浏览器厂商开始实现CSS3特性，问题开始变得有些复杂了。不难，只是有些复杂。这可能包括两个方面：首先有些心得CSS3属性(比如，transition、渐变、transform等)不...

• superLink，让伪链接更有可用性

前几天，看到有人写了个superLink的东东，主要的做什么用呢？我们有时会给在大块元素加个window.location=\'http://www.aoao.org.cn\'，还顺便把光标定义成移上去会变成手势还代替链接，为什么不直接用因为有时东西太多，不能放在链接里，比如hx、p、 li之类的。那问题来了，用js处理会让链接的功能没了一堆，作者在他的文章说到：中键：新tab打开（aoao注：...

• CSS Sprites：鱼翅还是三鹿？

如果开发人员花点时间来考虑下所有可以提升网站性能的因素，再权衡下利弊，也许就有较好的理由可以避免滥用 CSS sprite 了，并且会把精力放在那些物有所值的方面。

• 人民币的符号的正确表示法？一杠？两杠？￥还是yen呢？

因为做的项目会跟钱打了交道，所以被研究了。那是一杠还是两杠呢？最简单的方式就是拿出钱包，掏出张“新”的50或100，翻到背面的银线上，就会发现两杠的符号。这个是以前跟同事在讨论是一杠还是两杠时，发现最有效的方案。杠杠数的问题解决了，可￥（指的是通常输入法中文全角模式下按shift+4的那个）在宋体（v3.03, v5.0）的情况下是显示一杠

• MHTML在ie7/vista bug 解决方案

在多数情况下，以增加文件大小代价来换连接数是有价值。而MHTML+dataURI = 省连接数，如果你不知道这是什么东东，可以看秦歌写的Data URI 和 MHTML 因为之前发现在vista上的ie7有bug，且没有好解决方案，所以一直不敢项目上使用，之前虽然有看到有个用304的方案(via Data URIs, MHTML and IE7/Win7/Vista blues)，但觉一来做起来折腾，一来效果也不好，特别是hover时。 ie7 vista的bu...

• 用私有属性来拯救IE7缩放图片的失真

图片缩放会失真是真理，在浏览器里也一样，貌似使用传说中的双三次插值可以让失真看起来比较不明显，但是真的想不通IE7已经实现了，却不默认打开，是体谅我们的CPU还是内存呢？简单来说，我们在图片的CSS 加-ms-interpolation-mode: bicubic 就可以让IE7的图片在有缩放的情况下，失真变得不怎样明显，更多的测试可以到可以到MSDN做的例子看一下效果，或者到血...

• CSS简写指南

高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小，更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们系统地总结一下CSS属性的缩写...

• CSS使用技巧大全

最近，我开始升级网志了。在修改模板的过程中，需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章，我就把它整理出来，供自己参考，也希望对大家有用。未来，本文将持续更新。

• [译]渐进增强：纯CSS聊天泡泡

聊天泡泡做为一种UI表现形式是广大网民群众所喜闻乐见，但许多教程实现它却总是需要上使用非语义的HTML或者JavaScript。而本教程中的各种聊天泡泡只需要使用到CSS2.1来构建，并用CSS3来增强效果。不使用图片，也不使用JavaScript和更加不使用当前语义没用到的HTML哦。

• 简单的全系列浏览器css hack

跨浏览器的网页设计一直是让人很头疼的问题，这不只是因为浏览器的版本众多，还有一个重要的原因是相同浏览器的不同时期的版本也会有差异，甚至是在不同操作同台上还会有不同。因此使CSS hack技术进行浏览器区分是实现跨浏览器访问一个好方法。

• CSS3常用功能的写法

随着浏览器的升级，CSS3已经可以投入实际应用了。但是，不同的浏览器有不同的CSS3实现，兼容性是一个大问题。上周的YDN介绍了CSS3 Please网站，该网站总结了一些常用功能的写法。以下就是这些写法的详细介绍。所有代码都经过了Firefox 3.6和IE 8.0的验证，原文的错误之处也已得到改正。一、圆角（Rounded Corner）.box_round {　　-moz-border-radius: 30px; /* FF1+ */　　-webkit-border-radius: 30px; /* Saf3+, Chrome */　　b...

• CSS设置字体大小

当你使用CSS设置字体大小事，你有很多种选择，你可以使用“keyword”，像 p { font-size: small; } 或者是一个数值。当使用数值时，你需要考虑使用哪种单位，那一种单位是最好的呢？下面让我来看看。 Keyword 有效地设置字体尺寸的keyword有：xx-small, x-small, small, medium, large, x-large, and xx-large 还有比较 keyword（smaller 和 larger）。令人惊奇的是，各种平台和浏览器都能很好的兼容 keyword font size，看一下...

• 两侧背景自动延伸的CSS实现方法

方法来源于土豆网的导航，在这里纪录一下实现的思路。主要是利用 position 属性的 absolute 和 relative 配合 z-index 来实现的，通过position:absolute将需要平铺的背景层叠在另一背景上，这样即可以实现同一位置的两个背景，再使用z-index将内容提升到最高阶显示。

• 用于打印的页面设计

在网站的一些应用中需要提供用户直接打印页面的功能，最明显的就是电子优惠券，商家根据网站提供的模板输入内容，然后生成优惠券页面，用户打印这个页面即是优惠券。当然最优的做法是根据这个页面生成一个图片文件，用户下载这个图片再去打印，打印的效果就不会受浏览器的设置而受影响打印出来的效果。但如果由于一些原因，为了快速或者节约成本，不去将页面存为图片文件的操作，那么就只有直接将HTML页面直接打印下来，这样就需...