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

之前的不适用图片创建的对话气泡，需要一大段的JS代码，然后插入DOM里面很多的元素，还得要很多CSS，看起来很不爽。 CSS3开始改变我们的生活了。现在要创建一个在个浏览器下面都看起来不错的对话浮层就简单了很多，一个HTML元素，一些CSS3代码，不需要图片，也不需要Javascript。一点一点开始吧，先来看看HTML结构，只需要一个元素就可以了。

• 实现做出html的上标以及下标

数学公式：(X+Y)2 = X2 + 2XY + Y2 化学方程式：H2O = 2H + O 代码如下.....

• CSS图片替换

我们在做网站的时候，有时候需要把网站的Logo用图片代替，这样的方法有很多，但是那一种是最好的呢？使用图片最简单的最容易想到的办法自然就是使用图片了。然后给图片添加一个alt值，对搜索引擎友好一些。

• CSS圆角制作

CSS圆角在很多网页设计中都有使用，他的实现方法也有很多种，我们这次主要使用一个单张的图片来达到实现圆角的一个目的。也练习一下CSS Sprites的使用。例子点击这里，可以查看例子。图片我们需要一张图片来制作圆角的边框。 HTML代码 HTML的结构比较简单，容器的每一个圆角需要一个额外的span标签。

• CSS两列流式布局

流式布局一般设计者和开发者都会尽量避免，因为大家都觉得这个实现比较复杂。这篇文章的目的就是来打破这个认识，流式布局不是那么的难以实现。点击这里，查看示例。 HTML结构 HTML结构比较简单，需要一些容器和语义化的标记。

• 跨浏览器的HTML5占位文本(PlaceHolder)方案

HTML5里面一个非常不错的扩展功能就是可以在文本框上面增加占位文本。占位文本(PlaceHolder)是指当一个文本框没有被focus的时候显示的是提示文字，当他被点击之后就显示空白。这个功能很不错，但是并不是所有的浏览器都支持。这篇文章就来讨论一下怎样用比较简单的方法可以让所有浏览器都支持这个特性。这里是例子这里可以下载传统的解决办法在我们有这个属性之前，我们一般是通过Javascript来实现这个效果。这段文字被设置在...

• 圆角头像的重构优化

头像圆角的实现，似乎不单单是一种技术的方式，而是可以针对不同浏览器采用不同的方式，是渐进增强还是优雅降级，取决于你的用户、或者是你的经理。

• CSS3 文字渐变

之前，我们有发表过CSS文字渐变效果，但是其实那并不是纯粹的基于CSS的渐变，它需要一张半透明渐变的png图片。今天我们将介绍两种使用CSS3实现实现文字的方法。嗯，只有webkit浏览器支持，...

• 重置还是不重置-这是个CSS问题

每个浏览器都有他自己的一个默认样式。可以保证HTML可以在没有自定义样式的情况下也能被有据可循的渲染。你应该知道：未访问的链接是蓝色、访问过的是紫色、strong标签加粗显示、H1的字号大一些。然后，各厂商就是喜欢让我们的生活丰富多彩一点，然后每个浏览器的默认样式都不相同。所以，你怎么能保证你的自定义样式不会被浏览器的默认样式影响呢？ CSS重置，这个方法通常用来清除浏览器内置的默认样式。通常，所有的字体和line-h...

• CSS中变化Fixed的实现

有时候，一些看起来很简单的事情在CSS中就特别让人恼火。将页脚固定在页面的底部，但是当页面内容比较长的时候页脚就不固定在屏幕底部而是在内容底部，听起来很简单了，但是用CSS实现起来不是那么轻松了。下面这个教程就来讨论一下如何实现这样的效果。首先，这里是一个例子，可以看看。 HTML代码这部分的代码，跟我们之前的100%高度布局的文章中一样。额外添加的东西就是一个清除浮动的div和footer的div。

• CSS利用背景图做等高列

CSS布局相比table布局更加的灵活。但是使用CSS制作两个一样高度的列确是比较复杂的一件事情，但是有时候确实非常的有用。点击这里可以看看示例。技巧在于给父容器使用垂直重复的背景图片，就可以从视觉上实现等高列了。 HTML结构 HTML结构比较简单，主要就是头部、导航、以及内容和子内容。

• 有条件的添加Hover样式

给元素添加一个hover样式，很简单，我们来看一个透明度的例子吧

• 愚人节页面翻转效果的实现

昨天愚人节，逛pinterest.com的时候，发现页面上的有些地方翻转了，着实被愚了一把。所以在自己的博客上也加了一下效果，具体的实现通过ie滤镜和css3旋转。

• Firefox滚动残影

Firefox滚动残影这文章放在草稿箱有一阵子了，之前的3系列都有这BUG，当正想发表这文章的时候，alextang和我沟通刚刚升级的FF4已修复此BUG，所以搁置一阵在考虑到这文章还有没有价值，既然写了还是发吧，就当撑撑场面。相信FF3~4版本之间也需要一些时间做过渡，希望对各位还有用。这BUG算是老问题，困扰我很长一段时间，最近做项目又遇上但总算找到办法把它解决了。

• 拥抱并使用CSS3

网页设计是变化非常快的行业。在过去一两年，CSS3潜在地将网页设计带入了一个新的级别。这不仅仅是因为这个最新版本的CSS有很多新的功能特性，更重要的是因为CSS3使得原来需要更多工作，更多技术以及更多软件才能做到的事情变得更加简单。例如，基本的动画和动态图片功能（如颜色渐变）原来只能通过JavaScript和Flash来实现，并且图片需要像Photoshop等的来编辑。现在不再需要了。 CSS3有许多需要学习的东西，如果你希望让自己追上...

• Canvas学习教程 : Canvas介绍

这一系列教程会带你快速认识Canvas，这是第一篇，RockUX先带你简单认识一下Canvas。Canvas是现代浏览器中内建的一个画图的方法，这篇文章中，RockUX会介绍如何访问Canvas元素，怎么画图形，变换颜色以及擦除。这个新技术非常的令人激动。 Canvas元素简介当你听到Canvas的时候，你的第一反应应该是会想到HTML5的新元素。技术上来说，这只是一部分，从现在开始，我们先忘记那个吧。Canvas元素是浏览器新技术对外的一个窗口。

• HTML5 中 div section article 的区别

刚刚开始接触 HTML5 时，对它的标签很不适应，甚至一度有点反感。尤其是对 div、section、article 这几个标签，实在弄不清楚应该使用在什么场合下。

• 让你的网站也像Gmail一样支持文件拖放上传-HTML5之File API

Gmail推出了支持拖拽的附件上传功能，试用了下还真不错，其实很久以前就在想能有直接拖拽附件的功能，多亏有了HTML5，Web应用越来越像客户端的应用了。在好奇心驱使下，想了解一下Gmail到底是怎么做到的，了解了一下最新的HTML5 File API草案，这个接口主要提供的就是提供对文件对象的访问，别想歪了，这个接...

• 用css3写个logo

用css3写个logo

• 信XML，得自信

XML可能是计算有史以来最NB的发明了，以至于我们以没有XML的程序是难登大堂的程序，不用XML，你都不好意思当程序员。于是，我们看到了很多很雷人的用法（《信XML，得永生》），当然一些朋友当时并没有看懂，不过我不怪大家，因为我们依然深信使用XML可以让你有强大的Zhuangbility，于是我们有下面这两种相当Geiliable的用法。一、XML中的XML 这个例子是某公司的一个SOAP实现――我们的Webservice需要返回一个XML字符串，这怎么办...