Web开发者不容错过的20段CSS代码.docVIP

Web开发者不容错过的20段CSS代码 发表于2013-05-24 17:50|?30941次阅读| 来源CSDN|?184?条评论| 作者张红月CSSHTML前端开发 摘要：共享已成为互联网的一种主流，尤其是分享一些非常实用的技术，本文收集了20段非常专业的CSS 2/CSS 3代码片段给大家，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。 Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。 本文将分享20段非常专业的CSS2/CSS3代码供大家使用，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。 1. CSS Resets 网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。 [css]?view plaincopy html,?body,?div,?span,?applet,?object,?iframe,?h1,?h2,?h3,?h4,?h5,?h6,?p,?blockquote,?pre,?a,?abbr,?acronym,?address,?big,?cite,?code,?del,?dfn,?em,?img,?ins,?kbd,?q,?s,?samp,?small,?strike,?strong,?sub,?sup,?tt,?var,?b,?u,?i,?center,?dl,?dt,?dd,?ol,?ul,?li,?fieldset,?form,?label,?legend,?table,?caption,?tbody,?tfoot,?thead,?tr,?th,?td,?article,?aside,?canvas,?details,?embed,?figure,?figcaption,?footer,?header,?hgroup,?menu,?nav,?output,?ruby,?section,?summary,?time,?mark,?audio,?video?{?? ??margin:?0;?? ??padding:?0;?? ??border:?0;?? ??font-size:?100%;?? ??font:?inherit;?? ??vertical-align:?baseline;?? ??outline:?none;?? ??-webkit-box-sizing:?border-box;?? ??-moz-box-sizing:?border-box;?? ??box-sizing:?border-box;?? }?? html?{?height:?101%;?}?? body?{?font-size:?62.5%;?line-height:?1;?font-family:?Arial,?Tahoma,?sans-serif;?}?? ?? article,?aside,?details,?figcaption,?figure,?footer,?header,?hgroup,?menu,?nav,?section?{?display:?block;?}?? ol,?ul?{?list-style:?none;?}?? ?? blockquote,?q?{?quotes:?none;?}?? blockquote:before,?blockquote:after,?q:before,?q:after?{?content:?;?content:?none;?}?? strong?{?font-weight:?bold;?}??? ?? table?{?border-collapse:?collapse;?border-spacing:?0;?}?? img?{?border:?0;?max-width:?100%;?}?? ?? p?{?font-size:?1.2em;?line-height:?1.0em;?color:?#333;?}?? 2.经典的CSS Clearfix 这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。 [css]?view plaincopy .clearfix:after?{?content:?.;?display:?block;?clear:?both;?visibility:?hidden;?line-height:?0;?heig