Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。

分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。

1. CSS Resets

网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。

 1 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 {
 2   margin: 0;
 3   padding: 0;
 4   border: 0;
 5   font-size: 100%;
 6   font: inherit;
 7   vertical-align: baseline;
 8   outline: none;
 9   -webkit-box-sizing: border-box;
10   -moz-box-sizing: border-box;
11   box-sizing: border-box;
12 }
13 html { height: 101%; }
14 body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
15 
16 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
17 ol, ul { list-style: none; }
18 
19 blockquote, q { quotes: none; }
20 blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
21 strong { font-weight: bold; } 
22 
23 table { border-collapse: collapse; border-spacing: 0; }
24 img { border: 0; max-width: 100%; }
25 
26 p { font-size: 1.2em; line-height: 1.0em; color: #333; }
View Code

相关文章:

  • 2022-12-23
  • 2021-08-20
  • 2022-12-23
  • 2022-12-23
  • 2021-12-21
  • 2021-09-17
  • 2022-12-23
猜你喜欢
  • 2021-10-09
  • 2021-08-11
  • 2021-10-31
  • 2021-09-15
  • 2021-12-04
相关资源
相似解决方案