说起浮动大家并不陌生,因为有 Word 中看到太多的浮动围绕现象。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”

大家非常的清楚CSS是我们Web制作中不可或缺的一部分。HTML提供了Web制作的结构，但他不能让我们实现美丽的页面制作，此时我们需要CSS的帮助。CSS虽然能帮我们完善Web制作的效果，但其在不同的浏览器下是有不可预知的效果，为了让你的CSS能解决这些不一致下，今天给大家介绍25个CSS技巧代码，我相信这些对你肯家有很大的作用。

一、使用text-indent来隐藏文本

这个常用在图片替换文本中，最常见的就是使用使用图片来替换Logo，这个是非常有用的，使用“text-indent”我们可以达到图片替换文本的效果，而且方便搜索引擎的优化，还能支持阅读器阅读网页内容：

			h1 {
				text-indent:-9999px;
				margin:0 auto;
				width:400px;
				height:100px;
				background:transparent url("images/logo.jpg") no-repeat scroll;
			}
		

当然，这个只是使用“text-indent"替换文本的一种效果，其实他还有更多的方法。

扩展阅读：

早前在《CSS3 box-shadow》一文中详细介绍了Box-shadow的使用。

Float在CSS中是一个重中之重的东西，因为他是一个强大的，极有作用的一个CSS属性，但如果你没有理解透这个Float的话，那将是一个难搞的事情，特别是对于初学者来说，更是一个棘手事情。那么从今天开始我们一起来探讨这个Float。

刚才说过了，Float是一个极有用的属性，首先表现在布局上，全前提是你要清楚他，了解他。这样才能达到知已知彼，方能百战百胜。下面我们先来看一段代码：

HTML Markup

在这篇教程中，主要是跟着Alen Grakalic学习3种CSS制作缩略图的方法。我们在Web页面中时常碰到缩略图的应用，那么下面我将学习三种使用CSS的技巧来主内容显示图像的一部分。这几种技巧贵在于，我们不需要去切图片，而只要使用CSS代码，能帮我们在页面中显示我们需要显示的部分图像出来，而图像的其他部分将被隐藏起来。

另外需要提醒大家的是，我们这里所说的图片是指内容图像（<img>）而不是背景图片，下面我们一起来学习一下如何通过简单的CSS技巧，达到切图的效果。

W3cplus第二版本刚上线时，好多位朋友向我问起站上的分页导航样式是怎么制作，像是图片一样。前面都是随便说了一下制作的过程，为了报答各位朋友一持对本站的大力支持，今天我特意把这个分页导航的效果当作一个小教程来说。希望大家会喜欢。

目标

今天我们主要的目的是使用CSS3等相关属性来制作W3cplus站点上的分页导航效果，大家可以这点击这里查看站点上的效果，也可以直击下面的效果图：

在这个效果中，其实只有两大看点：

很多网站的logo都使用图片替换文本来实现，而且在一些情况下也有使用图片效果来替换难以实现的文本效果。这些制作我想大家在平时制作中都或多或少的碰到过，那么今天我老话重谈，整理了十种图片替换文本的制作方法。希望对大家有所帮助。

制作原理：

使用图片替换文本，其原理是相当的简单：就是在样式中使用背景图片来替换掉HTML模板中的文本内容，从而达到一种样式无法实现的页面渲染效果。使用图片替换有其优点也有其缺点，优点就是能实现一些特殊的页面效果，缺点就是需要加载图片，而且一些不好的替换方法给残障人员浏览网页会造成一定的不良之处，另外据说会对搜索引擎的搜索有影响，对于这一点没有考究过。那么我们也不去控寻这方面的问题，我们一起来看今天所要说的图片替换文本的制作方法。

随着现在的大显屏越来越多，实现整个页面的背景相对来说是越来越困难。前段时间在《如何用CSS实现大背景样式》中和大家一起学习了web designer wall大师介绍的几种实现大背景制作的样式方法。但我们有时需要整个页面放一张大的背景图，而且让他适应任显屏的大小。听起来好像蛮复杂的一样，因为我们不知道我们的用户使用多大的显屏，所以我们也不知道我们要制作多大的背景图片才能适合。大家不用担心，今天给大家提供几种另个的大背景图的制作方法，用来帮助大家制作完美的页面背景。

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

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

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

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