情境文本颜色，情境背景色，关闭按钮，三角符号，快速浮动，让内容块居中，清除浮动，显示或隐藏内容，屏幕阅读器和键盘导航，图片替换。
工具/原料
电脑，DW软件（Dreamweaver）
方法/步骤
1
让内容块居中为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用
2
清除浮动通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。
3
显示或隐藏内容.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题，就像 quick floats 一样的做法。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only 。
4
.invisible 类可以被用来仅仅影响元素的可见性，也就是所，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。
5
屏幕阅读器和键盘导航.sr-only 类可以对屏幕阅读器以外的设备隐藏内容。.sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）。对于遵循 可访问性的最佳实践 很有必要。这个类也可以作为 mixin 使用。
6
图片替换使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。
注意事项
F12可打开查看器查看源代码
下一篇：大型活动脚本怎么写