CSS3教程

当前位置: HTML5技术网 > CSS3教程 > Web开发者不容错过的20段CSS代码

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

        Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。
      本文将分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。
1. CSS Resets
       网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。
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开发者之间广泛流传,这段类选择器要应用到持有浮动元素的容器中,确保后面的内容都不会浮动,但会被下推和清除。
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }.clearfix { display: inline-block; } <font></font> html[xmlns] .clearfix { display: block; }* html .clearfix { height: 1%; }
3.升级版的Clearfix
在表现上,新版本和经典版本不存在什么差异,这些类可以有效地清除所有floats,但它们只兼容现代浏览器和传统的IE 6-8。
.clearfix:before, .container:after { content: ""; display: table; }<font></font> .clearfix:after { clear: both; }/* IE 6/7 */.clearfix { zoom: 1; }
4. Cross-Browser Transparency 
     CSS3里的许多属性都与浏览器相兼容,但也有特例,比如opacity,需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。
.transparent {    filter: alpha(opacity=50);/* internet explorer */    -khtml-opacity: 0.5;     /* khtml, old safari */    -moz-opacity: 0.5;      /* mozilla, netscape */    opacity: 0.5;          /* fx, safari, opera */}源码地址: http://perishablepress.com/cross-browser-transparency-via-css/
5. CSS Blockquote模板
    这段代码主要用在页面上进行分离引用或复制内容,并且给页面文字提供了默认样式。 blockquote {    background: #f9f9f9;<    border-left: 10px solid #ccc;    margin: 1.5em 10px;    padding: .5em 10px;    quotes: "\201C""\201D""\2018""\2019";}blockquote:before {    color: #ccc;    content: open-quote;     font-size: 4em;    line-height: .1em;    margin-right: .25em;    vertical-align: -.4em;}blockquote p {    display: inline;}查看源码: http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

【Web开发者不容错过的20段CSS代码】相关文章

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

2. Web开发者不容错过的10段CSS代码

3. web开发者不可错过的11个JavaScript工具

4. 不容错过的window8 metro UI风格的web资源

5. 不容错过的jQuery图片动画及源码

6. Web开发者的福利:30段超实用CSS代码

7. Web开发者和设计师必备的20个在线实用工具

8. 不能错过的10个 HTML5 开发教程

9. 7 个面向Web开发者的实用CSS3教程推荐

10. 每个程序员需掌握的20个代码命名小贴士

本文来源:https://www.51html5.com/a985.html

点击展开全部

﹝Web开发者不容错过的20段CSS代码﹞相关内容

「Web开发者不容错过的20段CSS代码」相关专题

其它栏目

也许您还喜欢