CSS是大家在web开发中常用的语言,但是有时候使用非常不爽。某一个CSS可能应用在不同的浏览器中行为不全一样。所以大家得花很多时间来进行调试。
幸运的是,网络上大家可以找到很多不错的CSS代码片断,能够有效地帮助大家解决一般性的或者设计问题。这里我们收集了30个CSS的代码片断帮助大家调试。希望大家喜欢!
代码
1. Chris Poteet’s CSS浏览器重置代码
这个代码能够有效地帮助大家解决跨浏览器问题。虽然不支持IE6,但是对于这种美国占有率低于1%的浏览器,大家大可以放弃。
- /*
- Reset Default Browser Styles
- - Place first in the listing of external style sheets for cascading.
- - Be sure to explicitly set margin/padding styles.
- - Styles are not reset that have to do with display (block, inline) are not reset.
- By: Chris Poteet & various influences
- */
- * {
- vertical-align: baseline;
- font-family: inherit;
- font-style: inherit;
- font-size: 100%;
- border: none;
- padding: 0;
- margin: 0;
- }
- body {
- padding: 5px;
- }
- h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
- margin: 20px 0;
- }
- li, dd, blockquote {
- margin-left: 40px;
- }
- dt {
- font-weight: bold;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
2. Eric Meyer’s CSS Reset
Eric的CSS代码片断可能是最受欢迎的代码之一。甚至支持Blueprint CSS Framework.
- /* http://meyerweb.com/eric/tools/css/reset/
- v2.0 | 20110126
- License: none (public domain)
- */
- 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;
- }
- /* HTML5 display-role reset for older browsers */
- article, aside, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section {
- display: block;
- }
- body {
- line-height: 1;
- }
- ol, ul {
- list-style: none;
- }
- blockquote, q {
- quotes: none;
- }
- blockquote:before, blockquote:after,
- q:before, q:after {
- content: '';
- content: none;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
3. How to Create Multiple Borders in CSS3
非常酷的方式创建box阴影,允许你创建多个边框
- box-shadow:
- 0 0 0 2px #000,
- 0 0 0 3px #999,
- 0 0 0 9px #fa0,
- 0 0 0 10px #666,
- 0 0 0 16px #fd0,
- 0 0 0 18px #000;
(责任编辑:ken)