大家在Web页面制作中时常有碰到浮动元素被周围的文环绕的现像，这种现像时常发生在当浮动元素周围的内容高度大小于浮动元素的本身高度时，其内容就会环绕浮动元素，如下图所示：

可是我们时常需要的不是这种效果，而以需要达到下图所示的效果：

我一直在扣facebook前端代码，今天扣了一段有关于Tooltip的HTML和CSS。Tooltips的制作方法很多，但主要是我认为他的tooltip很轻巧，很优雅：

下面把这个tooltips的HTML和CSS代码贴上来与大家分享：

现在使用CSS3属性制作Buttons越来越普及了。早前在站上也放了一些相关方面的制作方法，在《CSS3 Gradient Buttons》一文中第一使用CSS3的Gradient、Border-radius、box-shadow等属性制作了Buttons。

Web页面的大背景制作有时的确烦人，今天看到了web designer wall写了一篇有关于这方面的教程《How to: CSS Large Background 》。从中学习了一下，特意整理一下贴上来与大家分享。

如果你对本站比较观注的话，应该很清楚，前面就有这方面的介绍。因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的，所以最近花全力在学习这方面的制作。在本站有关于这样制作有好几个教程了，比如说：

CSS要学会并不是一件难事，但要在一个大项目中写好CSS和管理好CSS还是有一定的难度的。不过并不可怕，如果你遵循一定的方法，还是很容易写出一个较好的CSS，也能很好的管理好你的CSS样式。下面搜集了几个这方面的技巧，希望能帮助大家写出一个更好的CSS样式。

大家都知道，在Web的Form中美化是最头痛的，尤其是表单中的“input[type=checkbox]”、“input[type="radio"]”、“input[type=file]”和select这些元素我们单单只使用CSS是无法匹配设计图的，像背景颜色或者背景图片，甚至说margin和padding等等在各浏览器下都没法实现一致的效果，具体大家可以看看这里所展示的页面效果。为了解决这样的问题，我们只有另选其他的途径。使用CSS和js配合，使用他们实现各浏览器的统一样式。

前面我们整了一个有关于CSS3的颜色属性的教程《CSS3 RGBA》，在这个教程中主要介绍了CSS3的RGBA属性的使用。传统上，我们给CSS设置颜色一般都是十六进制和rgb格式，比如“#abcdef”，而使用相对应的RGB应该就是“brg(171，205，239)”。

CSS3的到来，在CSS样式中，我们增加了一些其他的颜色控制方式，比如：HSL(H：色调，S:饱和度，L:亮度)和透明度apacity。不幸的是，现在CSS3的这些属性只有Firefox3+,Opera10+,Chrome1.0+和Safari3+支持，而在IE6-8是不支持这些属性，但Internet Explorer 9开始支持这些属性。

表单的制作常常给我们带来无比的烦恼，比如说表单中的“input[type="radio"]、input[type="checkbox"]、select和input[type="file"]”之类，我们都无法直接通过样式来达到设计的设计要求，如果为了实现设计的设计的优美效果，我们必须通过CSS和js来实现。前面我们在《自定义表单——jQuery制作个性化Checkbox》一文中一起学习了通过jQuery和CSS3来美化表单中的“input[type="radio"]”和“input[type="checkbox"]”。

写Web页面就像我们建设房子一样，地基牢固，房子才不会倒。同样的，我们制作Web页面也一样，一个良好的HTML结构是制作一个美丽的网站的开始，同样的，良好的CSS只存在同样良好的HTML中，所以一个干净的，语义的HTML的优点很多，那么平时制作中，我们做到了这一点吗？我们一起来看一张图片：

上图展示了两段代码，我想大家都只会喜欢第一种，我们先不说其语义，至少他的结构让我们看上去清爽，而第二种呢？一看就是糟糕的代码的代码，让人讨厌的代码。那么要怎么样才能写出一个好的代码，整洁的代码呢？下面我们就从以下十二个方面一起来学习，只要大家以后在写代码的时候能坚持下面的十二个原则，保准 你的代码质量能上去，而且你写的代码会人见人爱。

一、DOCTYPE的声明

如果我们想做好一件事情，首先要知道我们有哪些权利去做，就如“DOCTYPE”的声明，我们没有必要去讨论是否使用HTML4.01或者XHTML1.0或者说现在的HTML5都提供了严格版本或者过渡版本，这些都能很好的支持我们写的代码：