50个常用的CSS代码(上)
::::::::::::::::::::::: {.con .news_content}
1. CSS Resets
网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer's reset codes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。
::: {#highlighter_782267 .syntaxhighlighter .css}
+--------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::::::::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | html, body, div, span, applet, object, iframe, h{.css .plain}1{.css .value}, h{.css .plain}2{.css .value}, h{.css |
| | .plain}3{.css .value}, h{.css .plain}4{.css .value}, h{.css .plain}5{.css .value}, h{.css .plain}6{.css |
| ::: {.line .number2 .index1 .alt1} | .value}, p, blockquote, {.css .plain}pre{.css .value}, a, abbr, acronym, address, big, cite, {.css .plain}code{.css |
| 2 | .value}, del, dfn, em, img, ins, kbd, q, s, samp, {.css .plain}small{.css .value}, strike, strong, {.css .plain}sub{.css |
| ::: | .value}, sup, tt, var, b, u, i, {.css .plain}center{.css |
| | .value}, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, {.css .plain}caption{.css |
| ::: {.line .number3 .index2 .alt2} | .value}, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, {.css .plain}embed{.css |
| 3 | .value}, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {{.css |
| ::: | .plain} |
| | ::: |
| ::: {.line .number4 .index3 .alt1} | |
| 4 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.css .spaces}margin{.css .keyword}: {.css .plain}0{.css .value};{.css .plain} |
| | ::: |
| ::: {.line .number5 .index4 .alt2} | |
| 5 | ::: {.line .number3 .index2 .alt2} |
| ::: | {.css .spaces}padding{.css .keyword}: {.css .plain}0{.css .value};{.css .plain} |
| | ::: |
| ::: {.line .number6 .index5 .alt1} | |
| 6 | ::: {.line .number4 .index3 .alt1} |
| ::: | {.css .spaces}border{.css .keyword}: {.css .plain}0{.css .value};{.css .plain} |
| | ::: |
| ::: {.line .number7 .index6 .alt2} | |
| 7 | ::: {.line .number5 .index4 .alt2} |
| ::: | {.css .spaces}font-size{.css .keyword}: {.css .plain}100%{.css .value};{.css .plain} |
| | ::: |
| ::: {.line .number8 .index7 .alt1} | |
| 8 | ::: {.line .number6 .index5 .alt1} |
| ::: | {.css .spaces}font{.css .keyword}: inherit;{.css .plain} |
| | ::: |
| ::: {.line .number9 .index8 .alt2} | |
| 9 | ::: {.line .number7 .index6 .alt2} |
| ::: | {.css .spaces}vertical-align{.css .keyword}: {.css .plain}baseline{.css .value};{.css .plain} |
| | ::: |
| ::: {.line .number10 .index9 .alt1} | |
| 10 | ::: {.line .number8 .index7 .alt1} |
| ::: | {.css .spaces}outline{.css .keyword}: {.css .plain}none{.css .value};{.css .plain} |
| | ::: |
| ::: {.line .number11 .index10 .alt2} | |
| 11 | ::: {.line .number9 .index8 .alt2} |
| ::: | {.css .spaces}-webkit-box-sizing: border-box;{.css .plain} |
| | ::: |
| ::: {.line .number12 .index11 .alt1} | |
| 12 | ::: {.line .number10 .index9 .alt1} |
| ::: | {.css .spaces}-moz-box-sizing: border-box;{.css .plain} |
| | ::: |
| ::: {.line .number13 .index12 .alt2} | |
| 13 | ::: {.line .number11 .index10 .alt2} |
| ::: | {.css .spaces}box-sizing: border-box;{.css .plain} |
| | ::: |
| ::: {.line .number14 .index13 .alt1} | |
| 14 | ::: {.line .number12 .index11 .alt1} |
| ::: | }{.css .plain} |
| | ::: |
| ::: {.line .number15 .index14 .alt2} | |
| 15 | ::: {.line .number13 .index12 .alt2} |
| ::: | html { {.css .plain}height{.css .keyword}: {.css .plain}101%{.css .value}; }{.css .plain} |
| | ::: |
| ::: {.line .number16 .index15 .alt1} | |
| 16 | ::: {.line .number14 .index13 .alt1} |
| ::: | body { {.css .plain}font-size{.css .keyword}: {.css .plain}62.5%{.css .value}; {.css .plain}line-height{.css |
| | .keyword}: {.css .plain}1{.css .value}; {.css .plain}font-family{.css .keyword}: {.css .plain}Arial{.css |
| ::: {.line .number17 .index16 .alt2} | .color1}, {.css .plain}Tahoma{.css .color1}, {.css .plain}sans-serif{.css .color1}; }{.css .plain} |
| 17 | ::: |
| ::: | |
| | ::: {.line .number15 .index14 .alt2} |
| ::: {.line .number18 .index17 .alt1} | |
| 18 | ::: |
| ::: | |
| | ::: {.line .number16 .index15 .alt1} |
| ::: {.line .number19 .index18 .alt2} | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { {.css .plain}display{.css |
| 19 | .keyword}: {.css .plain}block{.css .value}; }{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number20 .index19 .alt1} | ::: {.line .number17 .index16 .alt2} |
| 20 | ol, ul { {.css .plain}list-style{.css .keyword}: {.css .plain}none{.css .value}; }{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number21 .index20 .alt2} | ::: {.line .number18 .index17 .alt1} |
| 21 | |
| ::: | ::: |
| | |
| ::: {.line .number22 .index21 .alt1} | ::: {.line .number19 .index18 .alt2} |
| 22 | blockquote, q { {.css .plain}quotes{.css .keyword}: {.css .plain}none{.css .value}; }{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number23 .index22 .alt2} | ::: {.line .number20 .index19 .alt1} |
| 23 | blockquote:before, blockquote:after, q:before, q:after { {.css .plain}content{.css .keyword}: {.css .plain}''{.css |
| ::: | .string}; {.css .plain}content{.css .keyword}: {.css .plain}none{.css .value}; }{.css .plain} |
| | ::: |
| ::: {.line .number24 .index23 .alt1} | |
| 24 | ::: {.line .number21 .index20 .alt2} |
| ::: | strong { {.css .plain}font-weight{.css .keyword}: {.css .plain}bold{.css .value}; }{.css .plain} |
| | ::: |
| ::: {.line .number25 .index24 .alt2} | |
| 25 | ::: {.line .number22 .index21 .alt1} |
| ::: | |
| | ::: |
| ::: {.line .number26 .index25 .alt1} | |
| 26 | ::: {.line .number23 .index22 .alt2} |
| ::: | table { {.css .plain}border-collapse{.css .keyword}: {.css .plain}collapse{.css .value}; {.css |
| | .plain}border-spacing{.css .keyword}: {.css .plain}0{.css .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number24 .index23 .alt1} |
| | img { {.css .plain}border{.css .keyword}: {.css .plain}0{.css .value}; {.css .plain}max-width{.css .keyword}: {.css |
| | .plain}100%{.css .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number25 .index24 .alt2} |
| | |
| | ::: |
| | |
| | ::: {.line .number26 .index25 .alt1} |
| | p { {.css .plain}font-size{.css .keyword}: {.css .plain}1.2em{.css .value}; {.css .plain}line-height{.css |
| | .keyword}: {.css .plain}1.0em{.css .value}; {.css .plain}color{.css .keyword}: {.css .plain}#333{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | ::::::::::::::::::::::::::::: |
+--------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------+
:::
2.经典的CSS Clearfix
这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。
::: {#highlighter_615363 .syntaxhighlighter .css}
+------------------------------------+------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | .clearfix:after { {.css |
| | .plain}content{.css |
| ::: {.line .number2 .index1 .alt1} | .keyword}: {.css |
| 2 | .plain}"."{.css |
| ::: | .string}; {.css |
| | .plain}display{.css |
| ::: {.line .number3 .index2 .alt2} | .keyword}: {.css |
| 3 | .plain}block{.css |
| ::: | .value}; {.css |
| | .plain}clear{.css |
| ::: {.line .number4 .index3 .alt1} | .keyword}: {.css |
| 4 | .plain}both{.css |
| ::: | .value}; {.css |
| | .plain}visibility{.css |
| ::: {.line .number5 .index4 .alt2} | .keyword}: {.css |
| 5 | .plain}hidden{.css |
| ::: | .value}; {.css |
| | .plain}line-height{.css |
| | .keyword}: {.css .plain}0{.css |
| | .value}; {.css |
| | .plain}height{.css |
| | .keyword}: {.css .plain}0{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number2 .index1 .alt1} |
| | .clearfix { {.css |
| | .plain}display{.css |
| | .keyword}: inline-{.css |
| | .plain}block{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number3 .index2 .alt2} |
| | {.css .spaces} {.css .plain} |
| | ::: |
| | |
| | ::: {.line .number4 .index3 .alt1} |
| | html[xmlns] .clearfix { {.css |
| | .plain}display{.css |
| | .keyword}: {.css |
| | .plain}block{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number5 .index4 .alt2} |
| | * html .clearfix { {.css |
| | .plain}height{.css |
| | .keyword}: {.css |
| | .plain}1%{.css .value}; }{.css |
| | .plain} |
| | ::: |
| | :::::::: |
+------------------------------------+------------------------------------+
:::
3.升级版的Clearfix
在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE 6-8。
::: {#highlighter_289963 .syntaxhighlighter .css}
+------------------------------------+----------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | .clearfix:before, .container:after { {.css |
| | .plain}content{.css .keyword}: {.css |
| ::: {.line .number2 .index1 .alt1} | .plain}""{.css .string}; {.css |
| 2 | .plain}display{.css |
| ::: | .keyword}: table; } {.css .plain} |
| | ::: |
| ::: {.line .number3 .index2 .alt2} | |
| 3 | ::: {.line .number2 .index1 .alt1} |
| ::: | .clearfix:after { {.css |
| | .plain}clear{.css .keyword}: {.css |
| ::: {.line .number4 .index3 .alt1} | .plain}both{.css .value}; }{.css .plain} |
| 4 | ::: |
| ::: | |
| | ::: {.line .number3 .index2 .alt2} |
| | /* IE 6/7 */{.css .comments} |
| | ::: |
| | |
| | ::: {.line .number4 .index3 .alt1} |
| | .clearfix { zoom: {.css .plain}1{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | ::::::: |
+------------------------------------+----------------------------------------------+
:::
4. Cross-Browser Transparency
CSS3里的许多属性都与浏览器相兼容，但也有特例，比如opacity，需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。
::: {#highlighter_62754 .syntaxhighlighter .css}
+------------------------------------+---------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | .{.css .plain}transparent{.css |
| | .value} {{.css .plain} |
| ::: {.line .number2 .index1 .alt1} | ::: |
| 2 | |
| ::: | ::: {.line .number2 .index1 .alt1} |
| | {.css |
| ::: {.line .number3 .index2 .alt2} | .spaces}filter: alpha(opacity={.css |
| 3 | .plain}50{.css .value});{.css |
| ::: | .plain}/* internet explorer */{.css |
| | .comments} |
| ::: {.line .number4 .index3 .alt1} | ::: |
| 4 | |
| ::: | ::: {.line .number3 .index2 .alt2} |
| | {.css |
| ::: {.line .number5 .index4 .alt2} | .spaces}-khtml-opacity: {.css |
| 5 | .plain}0.5{.css |
| ::: | .value}; {.css |
| | .plain}/* khtml, old safari */{.css |
| ::: {.line .number6 .index5 .alt1} | .comments} |
| 6 | ::: |
| ::: | |
| | ::: {.line .number4 .index3 .alt1} |
| | {.css |
| | .spaces}-moz-opacity: {.css |
| | .plain}0.5{.css |
| | .value}; {.css |
| | .plain}/* mozilla, netscape */{.css |
| | .comments} |
| | ::: |
| | |
| | ::: {.line .number5 .index4 .alt2} |
| | {.css .spaces}opacity: {.css |
| | .plain}0.5{.css |
| | .value}; {.css |
| | .plain}/* fx, safari, opera */{.css |
| | .comments} |
| | ::: |
| | |
| | ::: {.line .number6 .index5 .alt1} |
| | }{.css .plain} |
| | ::: |
| | ::::::::: |
+------------------------------------+---------------------------------------+
:::
源码地址： http://perishablepress.com/cross-browser-transparency-via-css/
5. CSS Blockquote模板
这段代码主要用在页面上进行分离引用或复制内容，并且给页面文字提供了默认样式。
::: {#highlighter_837803 .syntaxhighlighter .css}
+--------------------------------------+--------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | blockquote {{.css .plain} |
| | ::: |
| ::: {.line .number2 .index1 .alt1} | |
| 2 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.css |
| | .spaces}background{.css |
| ::: {.line .number3 .index2 .alt2} | .keyword}: {.css |
| 3 | .plain}#f9f9f9{.css |
| ::: | .value};<{.css .plain} |
| | ::: |
| ::: {.line .number4 .index3 .alt1} | |
| 4 | ::: {.line .number3 .index2 .alt2} |
| ::: | {.css |
| | .spaces}border-left{.css |
| ::: {.line .number5 .index4 .alt2} | .keyword}: {.css |
| 5 | .plain}10px{.css |
| ::: | .value} solid{.css |
| | .value} #ccc{.css .value};{.css |
| ::: {.line .number6 .index5 .alt1} | .plain} |
| 6 | ::: |
| ::: | |
| | ::: {.line .number4 .index3 .alt1} |
| ::: {.line .number7 .index6 .alt2} | {.css .spaces}margin{.css |
| 7 | .keyword}: {.css |
| ::: | .plain}1.5em{.css |
| | .value} 10px{.css .value};{.css |
| ::: {.line .number8 .index7 .alt1} | .plain} |
| 8 | ::: |
| ::: | |
| | ::: {.line .number5 .index4 .alt2} |
| ::: {.line .number9 .index8 .alt2} | {.css .spaces}padding{.css |
| 9 | .keyword}: .{.css |
| ::: | .plain}5em{.css |
| | .value} 10px{.css .value};{.css |
| ::: {.line .number10 .index9 .alt1} | .plain} |
| 10 | ::: |
| ::: | |
| | ::: {.line .number6 .index5 .alt1} |
| ::: {.line .number11 .index10 .alt2} | {.css .spaces}quotes{.css |
| 11 | .keyword}: {.css |
| ::: | .plain}"\201C"{.css |
| | .string}"\201D"{.css |
| ::: {.line .number12 .index11 .alt1} | .string}"\2018"{.css |
| 12 | .string}"\2019"{.css |
| ::: | .string};{.css .plain} |
| | ::: |
| ::: {.line .number13 .index12 .alt2} | |
| 13 | ::: {.line .number7 .index6 .alt2} |
| ::: | }{.css .plain} |
| | ::: |
| ::: {.line .number14 .index13 .alt1} | |
| 14 | ::: {.line .number8 .index7 .alt1} |
| ::: | blockquote:before {{.css .plain} |
| | ::: |
| ::: {.line .number15 .index14 .alt2} | |
| 15 | ::: {.line .number9 .index8 .alt2} |
| ::: | {.css .spaces}color{.css |
| | .keyword}: {.css |
| ::: {.line .number16 .index15 .alt1} | .plain}#ccc{.css .value};{.css |
| 16 | .plain} |
| ::: | ::: |
| | |
| ::: {.line .number17 .index16 .alt2} | ::: {.line .number10 .index9 .alt1} |
| 17 | {.css .spaces}content{.css |
| ::: | .keyword}: {.css |
| | .plain}open-quote{.css |
| ::: {.line .number18 .index17 .alt1} | .value}; {.css .plain} |
| 18 | ::: |
| ::: | |
| | ::: {.line .number11 .index10 .alt2} |
| | {.css .spaces}font-size{.css |
| | .keyword}: {.css .plain}4em{.css |
| | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number12 .index11 .alt1} |
| | {.css |
| | .spaces}line-height{.css |
| | .keyword}: .{.css |
| | .plain}1em{.css .value};{.css |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number13 .index12 .alt2} |
| | {.css |
| | .spaces}margin-right{.css |
| | .keyword}: .{.css |
| | .plain}25em{.css .value};{.css |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number14 .index13 .alt1} |
| | {.css |
| | .spaces}vertical-align{.css |
| | .keyword}: -.{.css |
| | .plain}4em{.css .value};{.css |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number15 .index14 .alt2} |
| | }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number16 .index15 .alt1} |
| | blockquote p {{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number17 .index16 .alt2} |
| | {.css .spaces}display{.css |
| | .keyword}: {.css |
| | .plain}inline{.css .value};{.css |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number18 .index17 .alt1} |
| | }{.css .plain} |
| | ::: |
| | ::::::::::::::::::::: |
+--------------------------------------+--------------------------------------+
:::
查看源码： http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
6. 个性化的圆角代码
许多CSS开发者都非常熟悉圆角语法，但如何为每个角设置不同的值？不如看看下面这段代码吧！
::: {#highlighter_672928 .syntaxhighlighter .css}
+--------------------------------------+----------------------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | #container {{.css .plain} |
| | ::: |
| ::: {.line .number2 .index1 .alt1} | |
| 2 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.css .spaces}-webkit-border-radius: {.css |
| | .plain}4px{.css .value} 3px{.css .value} 6px{.css |
| ::: {.line .number3 .index2 .alt2} | .value} 10px{.css .value};{.css .plain} |
| 3 | ::: |
| ::: | |
| | ::: {.line .number3 .index2 .alt2} |
| ::: {.line .number4 .index3 .alt1} | {.css .spaces}-moz-border-radius: {.css |
| 4 | .plain}4px{.css .value} 3px{.css .value} 6px{.css |
| ::: | .value} 10px{.css .value};{.css .plain} |
| | ::: |
| ::: {.line .number5 .index4 .alt2} | |
| 5 | ::: {.line .number4 .index3 .alt1} |
| ::: | {.css .spaces}-o-border-radius: {.css |
| | .plain}4px{.css .value} 3px{.css .value} 6px{.css |
| ::: {.line .number6 .index5 .alt1} | .value} 10px{.css .value}; {.css .plain} |
| 6 | ::: |
| ::: | |
| | ::: {.line .number5 .index4 .alt2} |
| ::: {.line .number7 .index6 .alt2} | {.css .spaces}border-radius: {.css |
| 7 | .plain}4px{.css .value} 3px{.css .value} 6px{.css |
| ::: | .value} 10px{.css .value};{.css .plain} |
| | ::: |
| ::: {.line .number8 .index7 .alt1} | |
| 8 | ::: {.line .number6 .index5 .alt1} |
| ::: | }{.css .plain} |
| | ::: |
| ::: {.line .number9 .index8 .alt2} | |
| 9 | ::: {.line .number7 .index6 .alt2} |
| ::: | /* alternative syntax broken into each line */{.css |
| | .comments} |
| ::: {.line .number10 .index9 .alt1} | ::: |
| 10 | |
| ::: | ::: {.line .number8 .index7 .alt1} |
| | #container {{.css .plain} |
| ::: {.line .number11 .index10 .alt2} | ::: |
| 11 | |
| ::: | ::: {.line .number9 .index8 .alt2} |
| | {.css |
| ::: {.line .number12 .index11 .alt1} | .spaces}-webkit-border-top-left-radius: {.css |
| 12 | .plain}4px{.css .value};{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number13 .index12 .alt2} | ::: {.line .number10 .index9 .alt1} |
| 13 | {.css |
| ::: | .spaces}-webkit-border-top-rightright-radius: {.css |
| | .plain}3px{.css .value};{.css .plain} |
| ::: {.line .number14 .index13 .alt1} | ::: |
| 14 | |
| ::: | ::: {.line .number11 .index10 .alt2} |
| | {.css |
| ::: {.line .number15 .index14 .alt2} | .spaces}-webkit-border-bottom-rightright-radius: {.css |
| 15 | .plain}6px{.css .value};{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number16 .index15 .alt1} | ::: {.line .number12 .index11 .alt1} |
| 16 | {.css |
| ::: | .spaces}-webkit-border-bottom-left-radius: {.css |
| | .plain}10px{.css .value};{.css .plain} |
| ::: {.line .number17 .index16 .alt2} | ::: |
| 17 | |
| ::: | ::: {.line .number13 .index12 .alt2} |
| | {.css .spaces}-moz-border-radius-topleft: {.css |
| | .plain}4px{.css .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number14 .index13 .alt1} |
| | {.css .spaces}-moz-border-radius-topright: {.css |
| | .plain}3px{.css .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number15 .index14 .alt2} |
| | {.css |
| | .spaces}-moz-border-radius-bottomright: {.css |
| | .plain}6px{.css .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number16 .index15 .alt1} |
| | {.css |
| | .spaces}-moz-border-radius-bottomleft: {.css |
| | .plain}10px{.css .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number17 .index16 .alt2} |
| | }{.css .plain} |
| | ::: |
| | :::::::::::::::::::: |
+--------------------------------------+----------------------------------------------------------+
:::
7. 一般媒体查询
这是一段非常好的模板，用于各种零零碎碎的媒体查询，在移动设备上也可以使用，这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。
::: {#highlighter_889609 .syntaxhighlighter .css}
+--------------------------------------+---------------------------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::::::::::::::::::::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | /* Smartphones (portrait and landscape) ----------- */{.css |
| | .comments} |
| ::: {.line .number2 .index1 .alt1} | ::: |
| 2 | |
| ::: | ::: {.line .number2 .index1 .alt1} |
| | @media only {.css .plain}screen{.css .value} |
| ::: {.line .number3 .index2 .alt2} | ::: |
| 3 | |
| ::: | ::: {.line .number3 .index2 .alt2} |
| | and (min-device-width : {.css .plain}320px{.css |
| ::: {.line .number4 .index3 .alt1} | .value}) and (max-device-width : {.css .plain}480px{.css |
| 4 | .value}) { {.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number5 .index4 .alt2} | ::: {.line .number4 .index3 .alt1} |
| 5 | {.css .spaces}/* Styles */{.css .comments} |
| ::: | ::: |
| | |
| ::: {.line .number6 .index5 .alt1} | ::: {.line .number5 .index4 .alt2} |
| 6 | } {.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number7 .index6 .alt2} | ::: {.line .number6 .index5 .alt1} |
| 7 | /* Smartphones (landscape) ----------- */{.css .comments} |
| ::: | ::: |
| | |
| ::: {.line .number8 .index7 .alt1} | ::: {.line .number7 .index6 .alt2} |
| 8 | @media only {.css .plain}screen{.css |
| ::: | .value} and (min-width : {.css .plain}321px{.css |
| | .value}) {{.css .plain} |
| ::: {.line .number9 .index8 .alt2} | ::: |
| 9 | |
| ::: | ::: {.line .number8 .index7 .alt1} |
| | {.css .spaces}/* Styles */{.css .comments} |
| ::: {.line .number10 .index9 .alt1} | ::: |
| 10 | |
| ::: | ::: {.line .number9 .index8 .alt2} |
| | } {.css .plain} |
| ::: {.line .number11 .index10 .alt2} | ::: |
| 11 | |
| ::: | ::: {.line .number10 .index9 .alt1} |
| | /* Smartphones (portrait) ----------- */{.css .comments} |
| ::: {.line .number12 .index11 .alt1} | ::: |
| 12 | |
| ::: | ::: {.line .number11 .index10 .alt2} |
| | @media only {.css .plain}screen{.css |
| ::: {.line .number13 .index12 .alt2} | .value} and (max-width : {.css .plain}320px{.css |
| 13 | .value}) {{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number14 .index13 .alt1} | ::: {.line .number12 .index11 .alt1} |
| 14 | {.css .spaces}/* Styles */{.css .comments} |
| ::: | ::: |
| | |
| ::: {.line .number15 .index14 .alt2} | ::: {.line .number13 .index12 .alt2} |
| 15 | }{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number16 .index15 .alt1} | ::: {.line .number14 .index13 .alt1} |
| 16 | /* iPads (portrait and landscape) ----------- */{.css |
| ::: | .comments} |
| | ::: |
| ::: {.line .number17 .index16 .alt2} | |
| 17 | ::: {.line .number15 .index14 .alt2} |
| ::: | @media only {.css .plain}screen{.css |
| | .value} and (min-device-width : {.css .plain}768px{.css |
| ::: {.line .number18 .index17 .alt1} | .value}) and (max-device-width : {.css .plain}1024px{.css |
| 18 | .value}) {{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number19 .index18 .alt2} | ::: {.line .number16 .index15 .alt1} |
| 19 | {.css .spaces}/* Styles */{.css .comments} |
| ::: | ::: |
| | |
| ::: {.line .number20 .index19 .alt1} | ::: {.line .number17 .index16 .alt2} |
| 20 | }{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number21 .index20 .alt2} | ::: {.line .number18 .index17 .alt1} |
| 21 | {.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number22 .index21 .alt1} | ::: {.line .number19 .index18 .alt2} |
| 22 | /* iPads (landscape) ----------- */{.css .comments} |
| ::: | ::: |
| | |
| ::: {.line .number23 .index22 .alt2} | ::: {.line .number20 .index19 .alt1} |
| 23 | @media only {.css .plain}screen{.css |
| ::: | .value} and (min-device-width : {.css .plain}768px{.css |
| | .value}) and (max-device-width : {.css .plain}1024px{.css |
| ::: {.line .number24 .index23 .alt1} | .value}) and (orientation : {.css .plain}landscape{.css |
| 24 | .value}) {{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number25 .index24 .alt2} | ::: {.line .number21 .index20 .alt2} |
| 25 | {.css .spaces}/* Styles */{.css .comments} |
| ::: | ::: |
| | |
| ::: {.line .number26 .index25 .alt1} | ::: {.line .number22 .index21 .alt1} |
| 26 | }{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number27 .index26 .alt2} | ::: {.line .number23 .index22 .alt2} |
| 27 | /* iPads (portrait) ----------- */{.css .comments} |
| ::: | ::: |
| | |
| ::: {.line .number28 .index27 .alt1} | ::: {.line .number24 .index23 .alt1} |
| 28 | @media only {.css .plain}screen{.css |
| ::: | .value} and (min-device-width : {.css .plain}768px{.css |
| | .value}) and (max-device-width : {.css .plain}1024px{.css |
| ::: {.line .number29 .index28 .alt2} | .value}) and (orientation : {.css .plain}portrait{.css |
| 29 | .value}) {{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number30 .index29 .alt1} | ::: {.line .number25 .index24 .alt2} |
| 30 | {.css .spaces}/* Styles */{.css .comments} |
| ::: | ::: |
| | |
| ::: {.line .number31 .index30 .alt2} | ::: {.line .number26 .index25 .alt1} |
| 31 | } {.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number32 .index31 .alt1} | ::: {.line .number27 .index26 .alt2} |
| 32 | /* Desktops and laptops ----------- */{.css .comments} |
| ::: | ::: |
| | |
| ::: {.line .number33 .index32 .alt2} | ::: {.line .number28 .index27 .alt1} |
| 33 | @media only {.css .plain}screen{.css |
| ::: | .value} and (min-width : {.css .plain}1224px{.css |
| | .value}) {{.css .plain} |
| ::: {.line .number34 .index33 .alt1} | ::: |
| 34 | |
| ::: | ::: {.line .number29 .index28 .alt2} |
| | {.css .spaces}/* Styles */{.css .comments} |
| ::: {.line .number35 .index34 .alt2} | ::: |
| 35 | |
| ::: | ::: {.line .number30 .index29 .alt1} |
| | }{.css .plain} |
| ::: {.line .number36 .index35 .alt1} | ::: |
| 36 | |
| ::: | ::: {.line .number31 .index30 .alt2} |
| | /* Large screens ----------- */{.css .comments} |
| ::: {.line .number37 .index36 .alt2} | ::: |
| 37 | |
| ::: | ::: {.line .number32 .index31 .alt1} |
| | @media only {.css .plain}screen{.css |
| ::: {.line .number38 .index37 .alt1} | .value} and (min-width : {.css .plain}1824px{.css |
| 38 | .value}) {{.css .plain} |
| ::: | ::: |
| | |
| | ::: {.line .number33 .index32 .alt2} |
| | {.css .spaces}/* Styles */{.css .comments} |
| | ::: |
| | |
| | ::: {.line .number34 .index33 .alt1} |
| | }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number35 .index34 .alt2} |
| | /* iPhone 4 ----------- */{.css .comments} |
| | ::: |
| | |
| | ::: {.line .number36 .index35 .alt1} |
| | @media only {.css .plain}screen{.css |
| | .value} and (-webkit-min-device-pixel-ratio:{.css |
| | .plain}1.5{.css .value}), only {.css .plain}screen{.css |
| | .value} and (min-device-pixel-ratio:{.css .plain}1.5{.css |
| | .value}) {{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number37 .index36 .alt2} |
| | {.css .spaces}/* Styles */{.css .comments} |
| | ::: |
| | |
| | ::: {.line .number38 .index37 .alt1} |
| | }{.css .plain} |
| | ::: |
| | ::::::::::::::::::::::::::::::::::::::::: |
+--------------------------------------+---------------------------------------------------------------+
:::
源码地址： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
8. 现代字体栈
在新网页上设计属于自己的字体栈还是件比较困难的事情，希望下面这段代码能给你带来启发和开发模板，关于更多字体栈源码，你可以访问CSS Font Stacks。
::: {#highlighter_937934 .syntaxhighlighter .css}
+--------------------------------------+-----------------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::::::::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | /* Times New Roman-based serif */{.css .comments} |
| | ::: |
| ::: {.line .number2 .index1 .alt1} | |
| 2 | ::: {.line .number2 .index1 .alt1} |
| ::: | font-family{.css .keyword}: Cambria, {.css |
| | .plain}"Hoefler Text"{.css |
| ::: {.line .number3 .index2 .alt2} | .string}, Utopia, {.css |
| 3 | .plain}"Liberation Serif"{.css .string}, {.css |
| ::: | .plain}"Nimbus Roman No9 L Regular"{.css |
| | .string}, Times, {.css |
| ::: {.line .number4 .index3 .alt1} | .plain}"Times New Roman"{.css .string}, {.css |
| 4 | .plain}serif{.css .color1}; {.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number5 .index4 .alt2} | ::: {.line .number3 .index2 .alt2} |
| 5 | {.css .spaces} |
| ::: | ::: |
| | |
| ::: {.line .number6 .index5 .alt1} | ::: {.line .number4 .index3 .alt1} |
| 6 | /* A modern Georgia-based serif */{.css |
| ::: | .comments} |
| | ::: |
| ::: {.line .number7 .index6 .alt2} | |
| 7 | ::: {.line .number5 .index4 .alt2} |
| ::: | font-family{.css .keyword}: Constantia, {.css |
| | .plain}"Lucida Bright"{.css |
| ::: {.line .number8 .index7 .alt1} | .string}, Lucidabright, {.css |
| 8 | .plain}"Lucida Serif"{.css |
| ::: | .string}, Lucida, {.css |
| | .plain}"DejaVu Serif,"{.css |
| ::: {.line .number9 .index8 .alt2} | .string} "Bitstream Vera Serif"{.css |
| 9 | .string}, {.css .plain}"Liberation Serif"{.css |
| ::: | .string}, Georgia, {.css .plain}serif{.css |
| | .color1}; {.css .plain} |
| ::: {.line .number10 .index9 .alt1} | ::: |
| 10 | |
| ::: | ::: {.line .number6 .index5 .alt1} |
| | {.css .spaces} |
| ::: {.line .number11 .index10 .alt2} | ::: |
| 11 | |
| ::: | ::: {.line .number7 .index6 .alt2} |
| | /*A more traditional Garamond-based serif */{.css |
| ::: {.line .number12 .index11 .alt1} | .comments} |
| 12 | ::: |
| ::: | |
| | ::: {.line .number8 .index7 .alt1} |
| ::: {.line .number13 .index12 .alt2} | font-family{.css .keyword}: {.css |
| 13 | .plain}"Palatino Linotype"{.css |
| ::: | .string}, Palatino, Palladio, {.css |
| | .plain}"URW Palladio L"{.css .string}, {.css |
| ::: {.line .number14 .index13 .alt1} | .plain}"Book Antiqua"{.css |
| 14 | .string}, Baskerville, {.css |
| ::: | .plain}"Bookman Old Style"{.css .string}, {.css |
| | .plain}"Bitstream Charter"{.css .string}, {.css |
| ::: {.line .number15 .index14 .alt2} | .plain}"Nimbus Roman No9 L"{.css |
| 15 | .string}, Garamond, {.css |
| ::: | .plain}"Apple Garamond"{.css .string}, {.css |
| | .plain}"ITC Garamond Narrow"{.css |
| ::: {.line .number16 .index15 .alt1} | .string}, {.css |
| 16 | .plain}"New Century Schoolbook"{.css |
| ::: | .string}, {.css |
| | .plain}"Century Schoolbook"{.css |
| ::: {.line .number17 .index16 .alt2} | .string}, {.css |
| 17 | .plain}"Century Schoolbook L"{.css |
| ::: | .string}, Georgia, {.css .plain}serif{.css |
| | .color1}; {.css .plain} |
| ::: {.line .number18 .index17 .alt1} | ::: |
| 18 | |
| ::: | ::: {.line .number9 .index8 .alt2} |
| | {.css .spaces} |
| ::: {.line .number19 .index18 .alt2} | ::: |
| 19 | |
| ::: | ::: {.line .number10 .index9 .alt1} |
| | /*The Helvetica/Arial-based sans serif */{.css |
| ::: {.line .number20 .index19 .alt1} | .comments} |
| 20 | ::: |
| ::: | |
| | ::: {.line .number11 .index10 .alt2} |
| ::: {.line .number21 .index20 .alt2} | font-family{.css .keyword}: Frutiger, {.css |
| 21 | .plain}"Frutiger Linotype"{.css |
| ::: | .string}, Univers, Calibri, {.css |
| | .plain}"Gill Sans"{.css .string}, {.css |
| ::: {.line .number22 .index21 .alt1} | .plain}"Gill Sans MT"{.css .string}, {.css |
| 22 | .plain}"Myriad Pro"{.css |
| ::: | .string}, Myriad, {.css |
| | .plain}"DejaVu Sans Condensed"{.css |
| ::: {.line .number23 .index22 .alt2} | .string}, {.css .plain}"Liberation Sans"{.css |
| 23 | .string}, {.css .plain}"Nimbus Sans L"{.css |
| ::: | .string}, {.css .plain}Tahoma{.css |
| | .color1}, Geneva, {.css |
| | .plain}"Helvetica Neue"{.css .string}, {.css |
| | .plain}Helvetica{.css .color1}, {.css |
| | .plain}Arial{.css .color1}, {.css |
| | .plain}sans-serif{.css .color1}; {.css .plain} |
| | ::: |
| | |
| | ::: {.line .number12 .index11 .alt1} |
| | {.css .spaces} |
| | ::: |
| | |
| | ::: {.line .number13 .index12 .alt2} |
| | /*The Verdana-based sans serif */{.css .comments} |
| | ::: |
| | |
| | ::: {.line .number14 .index13 .alt1} |
| | font-family{.css .keyword}: Corbel, {.css |
| | .plain}"Lucida Grande"{.css .string}, {.css |
| | .plain}"Lucida Sans Unicode"{.css |
| | .string}, {.css .plain}"Lucida Sans"{.css |
| | .string}, {.css .plain}"DejaVu Sans"{.css |
| | .string}, {.css |
| | .plain}"Bitstream Vera Sans"{.css |
| | .string}, {.css .plain}"Liberation Sans"{.css |
| | .string}, {.css .plain}Verdana{.css |
| | .color1}, {.css .plain}"Verdana Ref"{.css |
| | .string}, {.css .plain}sans-serif{.css |
| | .color1}; {.css .plain} |
| | ::: |
| | |
| | ::: {.line .number15 .index14 .alt2} |
| | {.css .spaces} |
| | ::: |
| | |
| | ::: {.line .number16 .index15 .alt1} |
| | /*The Trebuchet-based sans serif */{.css |
| | .comments} |
| | ::: |
| | |
| | ::: {.line .number17 .index16 .alt2} |
| | font-family{.css .keyword}: {.css |
| | .plain}"Segoe UI"{.css .string}, Candara, {.css |
| | .plain}"Bitstream Vera Sans"{.css |
| | .string}, {.css .plain}"DejaVu Sans"{.css |
| | .string}, {.css |
| | .plain}"Bitstream Vera Sans"{.css |
| | .string}, {.css .plain}"Trebuchet MS"{.css |
| | .string}, {.css .plain}Verdana{.css |
| | .color1}, {.css .plain}"Verdana Ref"{.css |
| | .string}, {.css .plain}sans-serif{.css |
| | .color1}; {.css .plain} |
| | ::: |
| | |
| | ::: {.line .number18 .index17 .alt1} |
| | {.css .spaces} |
| | ::: |
| | |
| | ::: {.line .number19 .index18 .alt2} |
| | /*The heavier “Impact” sans serif */{.css |
| | .comments} |
| | ::: |
| | |
| | ::: {.line .number20 .index19 .alt1} |
| | font-family{.css |
| | .keyword}: Impact, Haettenschweiler, {.css |
| | .plain}"Franklin Gothic Bold"{.css |
| | .string}, Charcoal, {.css |
| | .plain}"Helvetica Inserat"{.css .string}, {.css |
| | .plain}"Bitstream Vera Sans Bold"{.css |
| | .string}, {.css .plain}"Arial Black"{.css |
| | .string}, {.css .plain}sans-serif{.css |
| | .color1}; {.css .plain} |
| | ::: |
| | |
| | ::: {.line .number21 .index20 .alt2} |
| | {.css .spaces} |
| | ::: |
| | |
| | ::: {.line .number22 .index21 .alt1} |
| | /*The monospace */{.css .comments} |
| | ::: |
| | |
| | ::: {.line .number23 .index22 .alt2} |
| | font-family{.css .keyword}: Consolas, {.css |
| | .plain}"Andale Mono WT"{.css .string}, {.css |
| | .plain}"Andale Mono"{.css .string}, {.css |
| | .plain}"Lucida Console"{.css .string}, {.css |
| | .plain}"Lucida Sans Typewriter"{.css |
| | .string}, {.css .plain}"DejaVu Sans Mono"{.css |
| | .string}, {.css |
| | .plain}"Bitstream Vera Sans Mono"{.css |
| | .string}, {.css .plain}"Liberation Mono"{.css |
| | .string}, {.css .plain}"Nimbus Mono L"{.css |
| | .string}, Monaco, {.css |
| | .plain}"Courier New"{.css .string}, {.css |
| | .plain}Courier{.css .color1}, {.css |
| | .plain}monospace{.css .color1};{.css .plain} |
| | ::: |
| | :::::::::::::::::::::::::: |
+--------------------------------------+-----------------------------------------------------+
:::
源码地址： http://www.sitepoint.com/eight-definitive-font-stacks/
9. 自定义文本选择
一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色，下面代码的默认颜色是浅蓝色，当然，你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。
::: {#highlighter_894122 .syntaxhighlighter .css}
+------------------------------------+------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | ::selection { {.css |
| | .plain}background{.css |
| ::: {.line .number2 .index1 .alt1} | .keyword}: {.css |
| 2 | .plain}#e2eae2{.css |
| ::: | .value}; }{.css .plain} |
| | ::: |
| ::: {.line .number3 .index2 .alt2} | |
| 3 | ::: {.line .number2 .index1 .alt1} |
| ::: | ::-moz-selection { {.css |
| | .plain}background{.css |
| | .keyword}: {.css |
| | .plain}#e2eae2{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number3 .index2 .alt2} |
| | ::-webkit-selection { {.css |
| | .plain}background{.css |
| | .keyword}: {.css |
| | .plain}#e2eae2{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | :::::: |
+------------------------------------+------------------------------------+
:::
10.隐藏Logo上的H1文本
::: {#highlighter_776956 .syntaxhighlighter .css}
+------------------------------------+------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | h{.css .plain}1{.css |
| | .value} {{.css .plain} |
| ::: {.line .number2 .index1 .alt1} | ::: |
| 2 | |
| ::: | ::: {.line .number2 .index1 .alt1} |
| | {.css |
| ::: {.line .number3 .index2 .alt2} | .spaces}text-indent{.css |
| 3 | .keyword}: {.css |
| ::: | .plain}-9999px{.css |
| | .value}; {.css .plain} |
| ::: {.line .number4 .index3 .alt1} | ::: |
| 4 | |
| ::: | ::: {.line .number3 .index2 .alt2} |
| | {.css .spaces}margin{.css |
| ::: {.line .number5 .index4 .alt2} | .keyword}: {.css .plain}0{.css |
| 5 | .value} auto{.css |
| ::: | .value};{.css .plain} |
| | ::: |
| ::: {.line .number6 .index5 .alt1} | |
| 6 | ::: {.line .number4 .index3 .alt1} |
| ::: | {.css .spaces}width{.css |
| | .keyword}: {.css |
| ::: {.line .number7 .index6 .alt2} | .plain}320px{.css |
| 7 | .value};{.css .plain} |
| ::: | ::: |
| | |
| | ::: {.line .number5 .index4 .alt2} |
| | {.css .spaces}height{.css |
| | .keyword}: {.css |
| | .plain}85px{.css .value};{.css |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number6 .index5 .alt1} |
| | {.css |
| | .spaces}background{.css |
| | .keyword}: {.css |
| | .plain}transparent{.css |
| | .value} url{.css .value}({.css |
| | .plain}"images/logo.png"{.css |
| | .string}) {.css |
| | .plain}no-repeat{.css |
| | .value} scroll{.css |
| | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number7 .index6 .alt2} |
| | }{.css .plain} |
| | ::: |
| | :::::::::: |
+------------------------------------+------------------------------------+
:::
11. 为图片创建拍立得效果边框
运用下面代码可以在图片上实现拍立得相片效果------一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。
::: {#highlighter_478038 .syntaxhighlighter .css}
+-------------------------------------+-----------------------------------------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | img.polaroid {{.css .plain} |
| | ::: |
| ::: {.line .number2 .index1 .alt1} | |
| 2 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.css .spaces}background{.css .keyword}:{.css .plain}#000{.css |
| | .value};{.css |
| ::: {.line .number3 .index2 .alt2} | .plain}/*Change this to a background image or remove*/{.css .comments} |
| 3 | ::: |
| ::: | |
| | ::: {.line .number3 .index2 .alt2} |
| ::: {.line .number4 .index3 .alt1} | {.css .spaces}border{.css .keyword}:{.css .plain}solid{.css |
| 4 | .value} #fff{.css .value};{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number5 .index4 .alt2} | ::: {.line .number4 .index3 .alt1} |
| 5 | {.css .spaces}border-width{.css .keyword}:{.css .plain}6px{.css |
| ::: | .value} 6px{.css .value} 20px{.css .value} 6px{.css .value};{.css |
| | .plain} |
| ::: {.line .number6 .index5 .alt1} | ::: |
| 6 | |
| ::: | ::: {.line .number5 .index4 .alt2} |
| | {.css .spaces}box-shadow:{.css .plain}1px{.css .value} 1px{.css |
| ::: {.line .number7 .index6 .alt2} | .value} 5px{.css .value} #333{.css .value};{.css |
| 7 | .plain}/* Standard blur at 5px. Increase for more depth *{.css .comments} |
| ::: | ::: |
| | |
| ::: {.line .number8 .index7 .alt1} | ::: {.line .number6 .index5 .alt1} |
| 8 | {.css .spaces}-webkit-box-shadow:1px 1px 5px #333;{.css .comments} |
| ::: | ::: |
| | |
| ::: {.line .number9 .index8 .alt2} | ::: {.line .number7 .index6 .alt2} |
| 9 | {.css .spaces}-moz-box-shadow:1px 1px 5px #333;{.css .comments} |
| ::: | ::: |
| | |
| ::: {.line .number10 .index9 .alt1} | ::: {.line .number8 .index7 .alt1} |
| 10 | {.css |
| ::: | .spaces}height:200px; /*Set to height of your image or desired div*/{.css |
| | .comments} |
| | ::: |
| | |
| | ::: {.line .number9 .index8 .alt2} |
| | {.css .spaces}width{.css .keyword}:{.css .plain}200px{.css |
| | .value};{.css .plain}/*Set to width of your image or desired div*/{.css |
| | .comments} |
| | ::: |
| | |
| | ::: {.line .number10 .index9 .alt1} |
| | }{.css .plain} |
| | ::: |
| | ::::::::::::: |
+-------------------------------------+-----------------------------------------------------------------------------+
:::
源码地址： http://www.smipple.net/snippet/kettultim/Polaroid%20Image%20Border%20-%20CSS3
12. 锚链接伪类选择器
::: {#highlighter_948103 .syntaxhighlighter .css}
+------------------------------------+------------------------------------+
| ::: {.line .number1 .index0 .alt2} | ::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | a:link { {.css |
| | .plain}color{.css |
| ::: {.line .number2 .index1 .alt1} | .keyword}: {.css |
| 2 | .plain}blue{.css |
| ::: | .value}; }{.css .plain} |
| | ::: |
| ::: {.line .number3 .index2 .alt2} | |
| 3 | ::: {.line .number2 .index1 .alt1} |
| ::: | a:visited { {.css |
| | .plain}color{.css |
| ::: {.line .number4 .index3 .alt1} | .keyword}: {.css |
| 4 | .plain}purple{.css |
| ::: | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number3 .index2 .alt2} |
| | a:hover { {.css |
| | .plain}color{.css |
| | .keyword}: {.css |
| | .plain}red{.css |
| | .value}; }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number4 .index3 .alt1} |
| | a:active { {.css |
| | .plain}color{.css |
| | .keyword}: yellow; }{.css |
| | .plain} |
| | ::: |
| | ::::::: |
+------------------------------------+------------------------------------+
:::
源码地址： http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers
13. 花俏地CSS3 Pull-Quotes
Pull-quotes不同于页面里的blockquote，它们通常用在文章中来引用文本。
::: {#highlighter_266879 .syntaxhighlighter .css}
+--------------------------------------+-----------------------------------------------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::::::::::::::::::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | .has-pullquote:before {{.css .plain} |
| | ::: |
| ::: {.line .number2 .index1 .alt1} | |
| 2 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.css .spaces}/* Reset metrics. */{.css .comments} |
| | ::: |
| ::: {.line .number3 .index2 .alt2} | |
| 3 | ::: {.line .number3 .index2 .alt2} |
| ::: | {.css .spaces}padding{.css .keyword}: {.css .plain}0{.css |
| | .value};{.css .plain} |
| ::: {.line .number4 .index3 .alt1} | ::: |
| 4 | |
| ::: | ::: {.line .number4 .index3 .alt1} |
| | {.css .spaces}border{.css .keyword}: {.css .plain}none{.css |
| ::: {.line .number5 .index4 .alt2} | .value}; {.css .plain} |
| 5 | ::: |
| ::: | |
| | ::: {.line .number5 .index4 .alt2} |
| ::: {.line .number6 .index5 .alt1} | {.css .spaces}/* Content */{.css .comments} |
| 6 | ::: |
| ::: | |
| | ::: {.line .number6 .index5 .alt1} |
| ::: {.line .number7 .index6 .alt2} | {.css .spaces}content{.css .keyword}: {.css .plain}attr{.css |
| 7 | .value}(data-pullquote);{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number8 .index7 .alt1} | ::: {.line .number7 .index6 .alt2} |
| 8 | {.css |
| ::: | .spaces}/* Pull out to the right, modular scale based margins. */{.css |
| | .comments} |
| ::: {.line .number9 .index8 .alt2} | ::: |
| 9 | |
| ::: | ::: {.line .number8 .index7 .alt1} |
| | {.css .spaces}float{.css .keyword}: rightright;{.css .plain} |
| ::: {.line .number10 .index9 .alt1} | ::: |
| 10 | |
| ::: | ::: {.line .number9 .index8 .alt2} |
| | {.css .spaces}width{.css .keyword}: {.css .plain}320px{.css |
| ::: {.line .number11 .index10 .alt2} | .value};{.css .plain} |
| 11 | ::: |
| ::: | |
| | ::: {.line .number10 .index9 .alt1} |
| ::: {.line .number12 .index11 .alt1} | {.css .spaces}margin{.css .keyword}: {.css .plain}12px{.css |
| 12 | .value} -140px{.css .value} 24px{.css .value} 36px{.css .value};{.css |
| ::: | .plain} |
| | ::: |
| ::: {.line .number13 .index12 .alt2} | |
| 13 | ::: {.line .number11 .index10 .alt2} |
| ::: | {.css .spaces}/* Baseline correction */{.css .comments} |
| | ::: |
| ::: {.line .number14 .index13 .alt1} | |
| 14 | ::: {.line .number12 .index11 .alt1} |
| ::: | {.css .spaces}position{.css .keyword}: {.css .plain}relative{.css |
| | .value};{.css .plain} |
| ::: {.line .number15 .index14 .alt2} | ::: |
| 15 | |
| ::: | ::: {.line .number13 .index12 .alt2} |
| | {.css .spaces}top{.css .keyword}: {.css .plain}5px{.css |
| ::: {.line .number16 .index15 .alt1} | .value};{.css .plain} |
| 16 | ::: |
| ::: | |
| | ::: {.line .number14 .index13 .alt1} |
| ::: {.line .number17 .index16 .alt2} | {.css |
| 17 | .spaces}/* Typography (30px line-height equals 25% incremental leading) */{.css |
| ::: | .comments} |
| | ::: |
| ::: {.line .number18 .index17 .alt1} | |
| 18 | ::: {.line .number15 .index14 .alt2} |
| ::: | {.css .spaces}font-size{.css .keyword}: {.css .plain}23px{.css |
| | .value};{.css .plain} |
| ::: {.line .number19 .index18 .alt2} | ::: |
| 19 | |
| ::: | ::: {.line .number16 .index15 .alt1} |
| | {.css .spaces}line-height{.css .keyword}: {.css .plain}30px{.css |
| ::: {.line .number20 .index19 .alt1} | .value};{.css .plain} |
| 20 | ::: |
| ::: | |
| | ::: {.line .number17 .index16 .alt2} |
| ::: {.line .number21 .index20 .alt2} | }{.css .plain} |
| 21 | ::: |
| ::: | |
| | ::: {.line .number18 .index17 .alt1} |
| ::: {.line .number22 .index21 .alt1} | .pullquote-adelle:before {{.css .plain} |
| 22 | ::: |
| ::: | |
| | ::: {.line .number19 .index18 .alt2} |
| ::: {.line .number23 .index22 .alt2} | {.css .spaces}font-family{.css .keyword}: {.css |
| 23 | .plain}"adelle-1"{.css .string}, {.css .plain}"adelle-2"{.css |
| ::: | .string};{.css .plain} |
| | ::: |
| ::: {.line .number24 .index23 .alt1} | |
| 24 | ::: {.line .number20 .index19 .alt1} |
| ::: | {.css .spaces}font-weight{.css .keyword}: {.css .plain}100{.css |
| | .value};{.css .plain} |
| ::: {.line .number25 .index24 .alt2} | ::: |
| 25 | |
| ::: | ::: {.line .number21 .index20 .alt2} |
| | {.css .spaces}top{.css .keyword}: {.css .plain}10px{.css |
| ::: {.line .number26 .index25 .alt1} | .value} !important{.css .color3};{.css .plain} |
| 26 | ::: |
| ::: | |
| | ::: {.line .number22 .index21 .alt1} |
| ::: {.line .number27 .index26 .alt2} | }{.css .plain} |
| 27 | ::: |
| ::: | |
| | ::: {.line .number23 .index22 .alt2} |
| ::: {.line .number28 .index27 .alt1} | |
| 28 | ::: |
| ::: | |
| | ::: {.line .number24 .index23 .alt1} |
| ::: {.line .number29 .index28 .alt2} | .pullquote-{.css .plain}helvetica{.css .color1}:before {{.css .plain} |
| 29 | ::: |
| ::: | |
| | ::: {.line .number25 .index24 .alt2} |
| ::: {.line .number30 .index29 .alt1} | {.css .spaces}font-family{.css .keyword}: {.css |
| 30 | .plain}"Helvetica Neue"{.css .string}, {.css .plain}Arial{.css |
| ::: | .color1}, {.css .plain}sans-serif{.css .color1};{.css .plain} |
| | ::: |
| ::: {.line .number31 .index30 .alt2} | |
| 31 | ::: {.line .number26 .index25 .alt1} |
| ::: | {.css .spaces}font-weight{.css .keyword}: {.css .plain}bold{.css |
| | .value};{.css .plain} |
| ::: {.line .number32 .index31 .alt1} | ::: |
| 32 | |
| ::: | ::: {.line .number27 .index26 .alt2} |
| | {.css .spaces}top{.css .keyword}: {.css .plain}7px{.css |
| ::: {.line .number33 .index32 .alt2} | .value} !important{.css .color3};{.css .plain} |
| 33 | ::: |
| ::: | |
| | ::: {.line .number28 .index27 .alt1} |
| | }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number29 .index28 .alt2} |
| | .pullquote-facit:before {{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number30 .index29 .alt1} |
| | {.css .spaces}font-family{.css .keyword}: {.css |
| | .plain}"facitweb-1"{.css .string}, {.css .plain}"facitweb-2"{.css |
| | .string}, {.css .plain}Helvetica{.css .color1}, {.css .plain}Arial{.css |
| | .color1}, {.css .plain}sans-serif{.css .color1};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number31 .index30 .alt2} |
| | {.css .spaces}font-weight{.css .keyword}: {.css .plain}bold{.css |
| | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number32 .index31 .alt1} |
| | {.css .spaces}top{.css .keyword}: {.css .plain}7px{.css |
| | .value} !important{.css .color3};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number33 .index32 .alt2} |
| | }{.css .plain} |
| | ::: |
| | :::::::::::::::::::::::::::::::::::: |
+--------------------------------------+-----------------------------------------------------------------------------------+
:::
源码地址： http://miekd.com/articles/pull-quotes-with-html5-and-css/
14. CSS3的全屏背景效果
如果你想使用大图片作为网站背景，并希望在页面滚动时保持固定，该代码片段非常适合，不过这段代码无法在旧的浏览器上工作。
::: {#highlighter_434432 .syntaxhighlighter .css}
+------------------------------------+------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | html {{.css .plain} |
| | ::: |
| ::: {.line .number2 .index1 .alt1} | |
| 2 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.css |
| | .spaces}background{.css |
| ::: {.line .number3 .index2 .alt2} | .keyword}: {.css |
| 3 | .plain}url{.css .value}({.css |
| ::: | .plain}'images/bg.jpg'{.css |
| | .string}) {.css |
| ::: {.line .number4 .index3 .alt1} | .plain}no-repeat{.css |
| 4 | .value} center{.css |
| ::: | .value} center{.css |
| | .value} fixed{.css |
| ::: {.line .number5 .index4 .alt2} | .value}; {.css .plain} |
| 5 | ::: |
| ::: | |
| | ::: {.line .number3 .index2 .alt2} |
| ::: {.line .number6 .index5 .alt1} | {.css |
| 6 | .spaces}-webkit-background-{.css |
| ::: | .plain}size{.css |
| | .keyword}: cover;{.css .plain} |
| ::: {.line .number7 .index6 .alt2} | ::: |
| 7 | |
| ::: | ::: {.line .number4 .index3 .alt1} |
| | {.css |
| | .spaces}-moz-background-{.css |
| | .plain}size{.css |
| | .keyword}: cover;{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number5 .index4 .alt2} |
| | {.css |
| | .spaces}-o-background-{.css |
| | .plain}size{.css |
| | .keyword}: cover;{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number6 .index5 .alt1} |
| | {.css |
| | .spaces}background-{.css |
| | .plain}size{.css |
| | .keyword}: cover;{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number7 .index6 .alt2} |
| | }{.css .plain} |
| | ::: |
| | :::::::::: |
+------------------------------------+------------------------------------+
:::
源码： http://css-tricks.com/perfect-full-page-background-image/
15. 内容垂直集中
相对于内容在水平位置，内容在垂直方向是不好把控的，尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。
::: {#highlighter_660673 .syntaxhighlighter .css}
+------------------------------------+------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | .container {{.css .plain} |
| | ::: |
| ::: {.line .number2 .index1 .alt1} | |
| 2 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.css |
| | .spaces}min-height{.css |
| ::: {.line .number3 .index2 .alt2} | .keyword}: {.css |
| 3 | .plain}6.5em{.css |
| ::: | .value};{.css .plain} |
| | ::: |
| ::: {.line .number4 .index3 .alt1} | |
| 4 | ::: {.line .number3 .index2 .alt2} |
| ::: | {.css .spaces}display{.css |
| | .keyword}: {.css |
| ::: {.line .number5 .index4 .alt2} | .plain}table-cell{.css |
| 5 | .value};{.css .plain} |
| ::: | ::: |
| | |
| | ::: {.line .number4 .index3 .alt1} |
| | {.css |
| | .spaces}vertical-align{.css |
| | .keyword}: {.css |
| | .plain}middle{.css |
| | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number5 .index4 .alt2} |
| | }{.css .plain} |
| | ::: |
| | :::::::: |
+------------------------------------+------------------------------------+
:::
源码地址： http://www.w3.org/Style/Examples/007/center
16. 垂直滚动条
这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。
::: {#highlighter_927176 .syntaxhighlighter .css}
+------------------------------------+------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | html { {.css |
| | .plain}height{.css |
| | .keyword}: {.css |
| | .plain}101%{.css |
| | .value} }{.css .plain} |
| | ::: |
| | :::: |
+------------------------------------+------------------------------------+
:::
17. CSS3 Gradients模板
::: {#highlighter_468555 .syntaxhighlighter .css}
+------------------------------------+---------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | #colorbox {{.css .plain} |
| | ::: |
| ::: {.line .number2 .index1 .alt1} | |
| 2 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.css .spaces}background{.css |
| | .keyword}: {.css .plain}#629721{.css |
| ::: {.line .number3 .index2 .alt2} | .value};{.css .plain} |
| 3 | ::: |
| ::: | |
| | ::: {.line .number3 .index2 .alt2} |
| ::: {.line .number4 .index3 .alt1} | {.css .spaces}background-image{.css |
| 4 | .keyword}: -webkit-gradient(linear, {.css |
| ::: | .plain}left{.css .value} top{.css |
| | .value}, {.css .plain}left{.css |
| ::: {.line .number5 .index4 .alt2} | .value} bottombottom, from({.css |
| 5 | .plain}#83b842{.css .value}), to({.css |
| ::: | .plain}#629721{.css .value}));{.css |
| | .plain} |
| ::: {.line .number6 .index5 .alt1} | ::: |
| 6 | |
| ::: | ::: {.line .number4 .index3 .alt1} |
| | {.css .spaces}background-image{.css |
| ::: {.line .number7 .index6 .alt2} | .keyword}: -webkit-linear-gradient({.css |
| 7 | .plain}top{.css .value}, {.css |
| ::: | .plain}#83b842{.css .value}, {.css |
| | .plain}#629721{.css .value});{.css |
| ::: {.line .number8 .index7 .alt1} | .plain} |
| 8 | ::: |
| ::: | |
| | ::: {.line .number5 .index4 .alt2} |
| ::: {.line .number9 .index8 .alt2} | {.css .spaces}background-image{.css |
| 9 | .keyword}: -moz-linear-gradient({.css |
| ::: | .plain}top{.css .value}, {.css |
| | .plain}#83b842{.css .value}, {.css |
| | .plain}#629721{.css .value});{.css |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number6 .index5 .alt1} |
| | {.css .spaces}background-image{.css |
| | .keyword}: -ms-linear-gradient({.css |
| | .plain}top{.css .value}, {.css |
| | .plain}#83b842{.css .value}, {.css |
| | .plain}#629721{.css .value});{.css |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number7 .index6 .alt2} |
| | {.css .spaces}background-image{.css |
| | .keyword}: -o-linear-gradient({.css |
| | .plain}top{.css .value}, {.css |
| | .plain}#83b842{.css .value}, {.css |
| | .plain}#629721{.css .value});{.css |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number8 .index7 .alt1} |
| | {.css .spaces}background-image{.css |
| | .keyword}: linear-gradient({.css |
| | .plain}top{.css .value}, {.css |
| | .plain}#83b842{.css .value}, {.css |
| | .plain}#629721{.css .value});{.css |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number9 .index8 .alt2} |
| | }{.css .plain} |
| | ::: |
| | :::::::::::: |
+------------------------------------+---------------------------------------------+
:::
18. @Font-Face模板
使用@font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站，并生成自定义font families。
::: {#highlighter_573771 .syntaxhighlighter .css}
+--------------------------------------+------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | @font-face {{.css .plain} |
| | ::: |
| ::: {.line .number2 .index1 .alt1} | |
| 2 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.css .spaces}font-family{.css |
| | .keyword}: {.css |
| ::: {.line .number3 .index2 .alt2} | .plain}'MyWebFont'{.css |
| 3 | .string};{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number4 .index3 .alt1} | ::: {.line .number3 .index2 .alt2} |
| 4 | {.css .spaces}src{.css |
| ::: | .keyword}: {.css .plain}url{.css |
| | .value}({.css |
| ::: {.line .number5 .index4 .alt2} | .plain}'webfont.eot'{.css |
| 5 | .string});{.css |
| ::: | .plain}/* IE9 Compat Modes */{.css |
| | .comments} |
| ::: {.line .number6 .index5 .alt1} | ::: |
| 6 | |
| ::: | ::: {.line .number4 .index3 .alt1} |
| | {.css .spaces}src{.css |
| ::: {.line .number7 .index6 .alt2} | .keyword}: {.css .plain}url{.css |
| 7 | .value}({.css |
| ::: | .plain}'webfont.eot?#iefix'{.css |
| | .string}) {.css .plain}format{.css |
| ::: {.line .number8 .index7 .alt1} | .value}({.css |
| 8 | .plain}'embedded-opentype'{.css |
| ::: | .string}),{.css |
| | .plain}/* IE6-IE8 */{.css .comments} |
| ::: {.line .number9 .index8 .alt2} | ::: |
| 9 | |
| ::: | ::: {.line .number5 .index4 .alt2} |
| | {.css .spaces}url{.css |
| ::: {.line .number10 .index9 .alt1} | .value}({.css |
| 10 | .plain}'webfont.woff'{.css |
| ::: | .string}) {.css .plain}format{.css |
| | .value}({.css .plain}'woff'{.css |
| ::: {.line .number11 .index10 .alt2} | .string}),{.css |
| 11 | .plain}/* Modern Browsers */{.css |
| ::: | .comments} |
| | ::: |
| | |
| | ::: {.line .number6 .index5 .alt1} |
| | {.css .spaces}url{.css |
| | .value}({.css |
| | .plain}'webfont.ttf'{.css |
| | .string}) {.css .plain}format{.css |
| | .value}({.css .plain}'truetype'{.css |
| | .string}),{.css |
| | .plain}/* Safari, Android, iOS */{.css |
| | .comments} |
| | ::: |
| | |
| | ::: {.line .number7 .index6 .alt2} |
| | {.css .spaces}url{.css |
| | .value}({.css |
| | .plain}'webfont.svg#svgFontName'{.css |
| | .string}) {.css .plain}format{.css |
| | .value}({.css .plain}'svg'{.css |
| | .string});{.css |
| | .plain}/* Legacy iOS */{.css |
| | .comments} |
| | ::: |
| | |
| | ::: {.line .number8 .index7 .alt1} |
| | }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number9 .index8 .alt2} |
| | body {{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number10 .index9 .alt1} |
| | {.css .spaces}font-family{.css |
| | .keyword}: {.css |
| | .plain}'MyWebFont'{.css |
| | .string}, {.css .plain}Arial{.css |
| | .color1}, {.css |
| | .plain}sans-serif{.css |
| | .color1};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number11 .index10 .alt2} |
| | }{.css .plain} |
| | ::: |
| | :::::::::::::: |
+--------------------------------------+------------------------------------------+
:::
源码地址： http://css-tricks.com/snippets/css/using-font-face/
19.创建缝合效果
::: {#highlighter_337844 .syntaxhighlighter .css}
+--------------------------------------+------------------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::::::::::::::::::::::::::::::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | p {{.css .plain} |
| | ::: |
| ::: {.line .number2 .index1 .alt1} | |
| 2 | ::: {.line .number2 .index1 .alt1} |
| ::: | {.css .spaces}position{.css |
| | .keyword}:{.css .plain}relative{.css |
| ::: {.line .number3 .index2 .alt2} | .value};{.css .plain} |
| 3 | ::: |
| ::: | |
| | ::: {.line .number3 .index2 .alt2} |
| ::: {.line .number4 .index3 .alt1} | {.css .spaces}z-index{.css |
| 4 | .keyword}:{.css .plain}1{.css |
| ::: | .value}; {.css .plain} |
| | ::: |
| ::: {.line .number5 .index4 .alt2} | |
| 5 | ::: {.line .number4 .index3 .alt1} |
| ::: | {.css .spaces}padding{.css |
| | .keyword}: {.css .plain}10px{.css |
| ::: {.line .number6 .index5 .alt1} | .value};{.css .plain} |
| 6 | ::: |
| ::: | |
| | ::: {.line .number5 .index4 .alt2} |
| ::: {.line .number7 .index6 .alt2} | {.css .spaces}margin{.css |
| 7 | .keyword}: {.css .plain}10px{.css |
| ::: | .value};{.css .plain} |
| | ::: |
| ::: {.line .number8 .index7 .alt1} | |
| 8 | ::: {.line .number6 .index5 .alt1} |
| ::: | {.css .spaces}font-size{.css |
| | .keyword}: {.css .plain}21px{.css |
| ::: {.line .number9 .index8 .alt2} | .value};{.css .plain} |
| 9 | ::: |
| ::: | |
| | ::: {.line .number7 .index6 .alt2} |
| ::: {.line .number10 .index9 .alt1} | {.css .spaces}line-height{.css |
| 10 | .keyword}: {.css .plain}1.3em{.css |
| ::: | .value};{.css .plain} |
| | ::: |
| ::: {.line .number11 .index10 .alt2} | |
| 11 | ::: {.line .number8 .index7 .alt1} |
| ::: | {.css .spaces}color{.css |
| | .keyword}: {.css .plain}#fff{.css |
| ::: {.line .number12 .index11 .alt1} | .value};{.css .plain} |
| 12 | ::: |
| ::: | |
| | ::: {.line .number9 .index8 .alt2} |
| ::: {.line .number13 .index12 .alt2} | {.css .spaces}background{.css |
| 13 | .keyword}: {.css .plain}#ff0030{.css |
| ::: | .value};{.css .plain} |
| | ::: |
| ::: {.line .number14 .index13 .alt1} | |
| 14 | ::: {.line .number10 .index9 .alt1} |
| ::: | {.css |
| | .spaces}-webkit-box-shadow: {.css |
| ::: {.line .number15 .index14 .alt2} | .plain}0{.css .value} 0{.css |
| 15 | .value} 0{.css .value} 4px{.css |
| ::: | .value} #ff0030{.css .value}, {.css |
| | .plain}2px{.css .value} 1px{.css |
| ::: {.line .number16 .index15 .alt1} | .value} 4px{.css .value} 4px{.css |
| 16 | .value} rgba({.css .plain}10{.css |
| ::: | .value},{.css .plain}10{.css |
| | .value},{.css .plain}0{.css |
| ::: {.line .number17 .index16 .alt2} | .value},.{.css .plain}5{.css |
| 17 | .value});{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number18 .index17 .alt1} | ::: {.line .number11 .index10 .alt2} |
| 18 | {.css .spaces}-moz-box-shadow: {.css |
| ::: | .plain}0{.css .value} 0{.css |
| | .value} 0{.css .value} 4px{.css |
| ::: {.line .number19 .index18 .alt2} | .value} #ff0030{.css .value}, {.css |
| 19 | .plain}2px{.css .value} 1px{.css |
| ::: | .value} 4px{.css .value} 4px{.css |
| | .value} rgba({.css .plain}10{.css |
| ::: {.line .number20 .index19 .alt1} | .value},{.css .plain}10{.css |
| 20 | .value},{.css .plain}0{.css |
| ::: | .value},.{.css .plain}5{.css |
| | .value});{.css .plain} |
| ::: {.line .number21 .index20 .alt2} | ::: |
| 21 | |
| ::: | ::: {.line .number12 .index11 .alt1} |
| | {.css .spaces}box-shadow: {.css |
| ::: {.line .number22 .index21 .alt1} | .plain}0{.css .value} 0{.css |
| 22 | .value} 0{.css .value} 4px{.css |
| ::: | .value} #ff0030{.css .value}, {.css |
| | .plain}2px{.css .value} 1px{.css |
| ::: {.line .number23 .index22 .alt2} | .value} 6px{.css .value} 4px{.css |
| 23 | .value} rgba({.css .plain}10{.css |
| ::: | .value},{.css .plain}10{.css |
| | .value},{.css .plain}0{.css |
| ::: {.line .number24 .index23 .alt1} | .value},.{.css .plain}5{.css |
| 24 | .value});{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number25 .index24 .alt2} | ::: {.line .number13 .index12 .alt2} |
| 25 | {.css |
| ::: | .spaces}-webkit-border-radius: {.css |
| | .plain}3px{.css .value};{.css .plain} |
| ::: {.line .number26 .index25 .alt1} | ::: |
| 26 | |
| ::: | ::: {.line .number14 .index13 .alt1} |
| | {.css |
| ::: {.line .number27 .index26 .alt2} | .spaces}-moz-border-radius: {.css |
| 27 | .plain}3px{.css .value};{.css .plain} |
| ::: | ::: |
| | |
| ::: {.line .number28 .index27 .alt1} | ::: {.line .number15 .index14 .alt2} |
| 28 | {.css .spaces}border-radius: {.css |
| ::: | .plain}3px{.css .value};{.css .plain} |
| | ::: |
| ::: {.line .number29 .index28 .alt2} | |
| 29 | ::: {.line .number16 .index15 .alt1} |
| ::: | }{.css .plain} |
| | ::: |
| ::: {.line .number30 .index29 .alt1} | |
| 30 | ::: {.line .number17 .index16 .alt2} |
| ::: | p:before {{.css .plain} |
| | ::: |
| ::: {.line .number31 .index30 .alt2} | |
| 31 | ::: {.line .number18 .index17 .alt1} |
| ::: | {.css .spaces}content{.css |
| | .keyword}: {.css .plain}""{.css |
| ::: {.line .number32 .index31 .alt1} | .string};{.css .plain} |
| 32 | ::: |
| ::: | |
| | ::: {.line .number19 .index18 .alt2} |
| ::: {.line .number33 .index32 .alt2} | {.css .spaces}position{.css |
| 33 | .keyword}: {.css .plain}absolute{.css |
| ::: | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number20 .index19 .alt1} |
| | {.css .spaces}z-index{.css |
| | .keyword}: {.css .plain}-1{.css |
| | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number21 .index20 .alt2} |
| | {.css .spaces}top{.css |
| | .keyword}: {.css .plain}3px{.css |
| | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number22 .index21 .alt1} |
| | {.css .spaces}bottombottom: {.css |
| | .plain}3px{.css .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number23 .index22 .alt2} |
| | {.css .spaces}left{.css |
| | .value} :{.css .plain}3px{.css |
| | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number24 .index23 .alt1} |
| | {.css .spaces}rightright: {.css |
| | .plain}3px{.css .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number25 .index24 .alt2} |
| | {.css .spaces}border{.css |
| | .keyword}: {.css .plain}2px{.css |
| | .value} dashed{.css .value} #fff{.css |
| | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number26 .index25 .alt1} |
| | } {.css .plain} |
| | ::: |
| | |
| | ::: {.line .number27 .index26 .alt2} |
| | p a {{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number28 .index27 .alt1} |
| | {.css .spaces}color{.css |
| | .keyword}: {.css .plain}#fff{.css |
| | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number29 .index28 .alt2} |
| | {.css .spaces}text-decoration{.css |
| | .keyword}:{.css .plain}none{.css |
| | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number30 .index29 .alt1} |
| | }{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number31 .index30 .alt2} |
| | p a:hover, p a:focus, p a:active {{.css |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number32 .index31 .alt1} |
| | {.css .spaces}text-decoration{.css |
| | .keyword}:{.css .plain}underline{.css |
| | .value};{.css .plain} |
| | ::: |
| | |
| | ::: {.line .number33 .index32 .alt2} |
| | }{.css .plain} |
| | ::: |
| | :::::::::::::::::::::::::::::::::::: |
+--------------------------------------+------------------------------------------------+
:::
20. CSS3 斑马线效果
当用户在浏览许多行数据时，很难分清哪一个单元格是属于哪一行的。默认情况下，通过添加斑马线，用户可以给奇偶行更新不同的背景色。
::: {#highlighter_233648 .syntaxhighlighter .css}
+------------------------------------+------------------------------------+
| ::: {.line .number1 .index0 .alt2} | :::::: container |
| 1 | ::: {.line .number1 .index0 .alt2} |
| ::: | tbody tr:nth-child(odd) {{.css |
| | .plain} |
| ::: {.line .number2 .index1 .alt1} | ::: |
| 2 | |
| ::: | ::: {.line .number2 .index1 .alt1} |
| | {.css |
| ::: {.line .number3 .index2 .alt2} | .spaces}background-color{.css |
| 3 | .keyword}: {.css |
| ::: | .plain}#ccc{.css .value};{.css |
| | .plain} |
| | ::: |
| | |
| | ::: {.line .number3 .index2 .alt2} |
| | }{.css .plain} |
| | ::: |
| | :::::: |
+------------------------------------+------------------------------------+
:::
源码地址： http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/
来自： HONGKIAT.COM{target="_blank"}
湘公网安备 43010302000398号