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

若干星期前，承玉心痒痒的推荐了一篇文章：Using CSS3 Transitions, Transforms and Animation. 我也心痒痒，但没啥时间。于是撮合龚浩一起折腾 S.Anim. 若干天的努力，终于有了成果，小结下。原理所谓动画，就是在一段时间内，连续改变 DOM 元素的属性。因此用 JavaScript 实现动画，最传统的方法就是采用定时器，在一段时间内（duration 时长），遵循特定规律（easing 平滑函数），改变 DOM 元素的属性（props, 最常见的是...

• display属性及其对SEO的影响

搜索引擎虽然没有表示符合 W3C标准的网站或页面会影响到网站排名，但事实证明使用web标准架构的网站排名状况一般都不错。这两天在优化博客的过程中发现，也许正是一些CSS属性影响到了搜索引擎对网站的排名。我在博客的一些关键标记处使用了display的一些属性，3天后我发现博客标题排名较原来靠前了一两位，排在了搜索引擎结果的较前位置，从网上搜索了一些关于display属性的知识，带着一些疑问，记录下来。也许很火星，希望大家...

• 防止垃圾邮件小技巧两则

防止垃圾邮件小技巧两则写一下我博客中用到的网页防止垃圾邮件小技巧两则，也许火星了，小技巧分享出来更新一下博客。以前总是不明白为什么有人不好好写自己的邮件地址，反而要把@替换成[at]或者#等，后来才明白，这是为了防止自己的邮箱收到垃圾短信的骚扰。

• OverFlow -- 创建BFC,清除浮动

如果你已经理解了block formatting contexts那么请继续，否则请先看看这篇文章。 Overflow能够做一些很牛掰的事情，比如: 创建BFC (block formatting contexts via W3c css2.1) 清除浮动生成块级元素 overyflow属性...

• IE6下position:absolute相邻元素margin-top失效的bug

昨天发现了一个ie6的bug，绝对定义(position:absolute)的相邻元素margin-top竟然会失效。

• 样式的作用域──页面重构中的模块化设计（一）

模块化设计我已经提过很多了，像《从宜家的家具设计讲模块化》、《页面重构中的模块化思维》、《页面重构中的组件制作要点》都是跟模块化相关的，不过之前一直没有讲到具体实现

• HTML5中的FORM2.0

FORM在HTML5中的变化算是比较大的，一方面体现在新增了大量的2.0时代的控件，另一方面则是整个FORM结构的变化。与新增的控件相比，新的FORM结构一样为将来的开发工作提供了很大的便利性。一、2.0的FORM结构 1. 可以随便放置的表单控件在HTML4的表单实现中，如果不借助脚本则必须将表单控件放置在

• HTML5中的自定义属性

在WEB页面中，为了配合Javascript的交互功能，很多时候都需要给HTML标签添加自定义属性（虽然标准不支持这么做），而关于自定义属性的名字则大都也是各自为战的自定义的，或根据功能、或根据项目等等

• 白话Block Formatting Context

当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

• 触发hasLayout引起的BUG

在IE6下面，很多显示的BUG都可以用触发hasLayout的方式去解决。但有种情况正好相反，触发hasLayout之后会产生显示的BUG。

• 底部浮动条的一种兼容方案

底部浮动条的一种兼容方案。

• 让IE支持RGBa的背景色

老版本的IE不支持RGBa的背景色，不过我们可以用滤镜实现同样的效果。

• 消失的列表背景

IE6中设定了position: relative; float: left的容器下，如果存在着多个带有背景的列表，那么这些列表中有一部分会显示不正常，具体的表现为背景消失。解决的方法是给li加上position: relative。

• IE6，IE7中负缩进的问题

在IE6，IE7下面给display: inline-block的元素设置text-indent: -9999px会把这个元素以及后面的元素拉走。

• IE6浮动引起的一些BUG

在IE6下，因为浮动带来的BUG有很多种，在这里记录一下。

• 多栏自适应布局问题浅谈

在网页局部的布局上，需要采用大量的自适应，来满足不同长度数据、内容的合理呈现。以此保证页面不至于因为内容过多等原因，导致重叠、溢出、撑开等破坏整体视觉效果的情况。这里就简单谈谈几个自己碰到过的自适应问题。 1、两栏自适应布局在实际项目中，常常遇到如红色线框部分的两栏自适应问题。其关键点是，左右两栏均不定宽，右侧栏条目数量不定。针对这种场景，可以采用两栏均浮动的方法。参考 Object-oriented CSS 中应用...

• CSS3 appearance简介

我们来简单了解一下上文中提到的css appearance。在之前研究HTML5表单的时候，一直很好奇浏览器是通过什么渲染不同的表单界面的，后来在Chrome中查看类型为range的input的时候，发现了这个有趣的...

• li水平居中css实现

其实这个是凑数来的。只是好久没动博客了，实在是说不过去了，丫的太懒了。其实是淡水没有时间（好假的借口）。闲话不多说了。现在一般都是用li做菜单了，淡水也就从了。li的float:left,可以了变成横向的菜单了。但是它们怎么跑到区域里居中显示呢（一般是页脚的链接是居中的）？li的display:inline;就可以了，float：left都不要了，自己跑一行去了。

• 阻止Firefox缓存input的值

在Firefox里面input的值会被缓存起来，刷新页面之后，会恢复成刷新之前的值。有的时候我们并不希望这么做，可以用autocomplete="off"来阻止Firefox的默认机制。

• 用CSS禁用输入法

用简单的一行CSS就可以在表单元素里禁用输入法，不一定兼容所有浏览器，目前测试过并且支持ime-mode的有IE6和FF。