CSS图形
- GLORY - 酷壳 - CoolShell.cn下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.
为了让页面在各不同浏览器之间显示效果一致,CSS样式清除和重置是前端开发必需要做的事情,结合前车之鉴,整理了份CSS重置样式代码供参考。
@charset "utf-8"; /* ------------------------------------------------------------ version : 1.0 author : tongqian.zhang email : [email protected] create: 2013-05-10 ------------------------------------------------------------ */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, dl, dt, dd, ul, ol, li, th, td, div, span, img, fieldset, lengend, button, input, select, textarea{margin: 0;padding: 0;} /* color & background */ html{color:#000; background:#FFF;} /* font */ body, button, input, select, textarea { /* for ie */ font: 12px/18px Arial, Verdana, Microsoft YaHei; } /* fix center */ html,body {height: 100%;margin: 0 auto;} /* h1~h6 */ h1 {font-size: 18px;} h2 {font-size: 16px;} h3 {font-size: 14px;} h4, h5, h6 {font-size: 100%;} /* a */ a { text-decoration: none; } a:hover { text-decoration: underline; } /* list */ ul,ol {list-style: none;} /* img border */ fieldset,img{border: 0} /* table */ table {border-collapse: collapse;border-spacing: 0;font:inherit;} /* margin */ .alpha {margin-left: 0;} .omega {margin-right: 0;} /* float & clear */ .left{float:left;} .right{float:right;} .clear {clear: both;display: block;} /* clearfix */ .clearfix:after{content:".";display:block;} .clearfix{display:inline-table;} /* Hides from IE-mac */ * html .clearfix{height:1%;} .clearfix{display:block;} /* End hide from IE-mac */ *+html .clearfix{min-height:1%;}/* IE7 */