/* CSS样式代码片段 */ p { font-size: 16px; color: #333; line-height: 1.5; } /* CSS替代技术-图片替代文字 */ .logo { width: 200px; height: 50px; background: url(logo.png) no-repeat center/contain; text-indent: -9999px; } /* CSS替代技术-制作三角形 */ .arrow { width: 0; height: 0; border-width: 10px; border-style: solid; border-color: transparent transparent #333 transparent; } /* CSS替代技术-清除浮动 */ .clearfix:after { content: ""; display: block; clear: both; }
CSS替代技术是指通过CSS以外的方式来实现某些网页效果,主要包括图片替代文字、制作三角形、清除浮动等。例如,大家可以通过替换文字为图片的方式来实现logo图标的展示,这样不仅可以减少页面渲染时间,还可以提高搜索引擎友好性;利用CSS画出三角形不仅能增加页面的美观程度,还可以避免在HTML中添加不必要的标签;使用clearfix技巧能够有效清除浮动,避免产生盒子塌陷问题。这些CSS替代技术虽然看起来有些hack,但是在某些特定场景下,却是非常实用的。