目录
1. CSS Resets
3.升级版的Clearfix
4. Cross-Browser Transparency 
5. CSS Blockquote模板
6. 个性化的圆角代码
7. 一般媒体查询
8. 现代字体栈
9. 自定义文本选择
10.隐藏Logo上的H1文本
11. 为图片创建拍立得效果边框
12. 锚链接伪类选择器
13. 花俏地CSS3 Pull-Quotes
14. CSS3的全屏背景效果
15. 内容垂直集中
16. 垂直滚动条
17. CSS3 Gradients模板
18. @Font-Face模板
19.创建缝合效果
20. CSS3 斑马线效果
首页 web前端 html教程 不容错过的20段CSS代码_html/css_WEB-ITnose

不容错过的20段CSS代码_html/css_WEB-ITnose

Jun 24, 2016 pm 12:05 PM
css 代码

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; }
登录后复制

2.经典的CSS Clearfix

这个clearfix代码已在Web开发者之间广泛流传,这段类选择器要应用到持有浮动元素的容器中,确保后面的内容都不会浮动,但会被下推和清除。

1 .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }2 .clearfix { display: inline-block; }3  <font></font>  4 html[xmlns] .clearfix { display: block; }5 * html .clearfix { height: 1%; }  
登录后复制

3.升级版的Clearfix

在表现上,新版本和经典版本不存在什么差异,这些类可以有效地清除所有floats,但它们只兼容现代浏览器和传统的IE 6-8。

1 .clearfix:before, .container:after { content: ""; display: table; }<font></font>  2 .clearfix:after { clear: both; }3 /* IE 6/7 */4 .clearfix { zoom: 1; }  
登录后复制

4. Cross-Browser Transparency

CSS3里的许多属性都与浏览器相兼容,但也有特例,比如opacity,需要对它进行一些更新才可以。附加过滤属性可以兼容任何老版的IE浏览器。

1 .transparent {2     filter: alpha(opacity=50); /* internet explorer */3     -khtml-opacity: 0.5;      /* khtml, old safari */4     -moz-opacity: 0.5;       /* mozilla, netscape */5     opacity: 0.5;           /* fx, safari, opera */6 }  
登录后复制

源码地址: 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/

6. 个性化的圆角代码

许多CSS开发者都非常熟悉圆角语法,但如何为每个角设置不同的值?不如看看下面这段代码吧!

 1 #container { 2     -webkit-border-radius: 4px 3px 6px 10px; 3     -moz-border-radius: 4px 3px 6px 10px; 4     -o-border-radius: 4px 3px 6px 10px;   5     border-radius: 4px 3px 6px 10px; 6 } 7 /* alternative syntax broken into each line */ 8 #container { 9     -webkit-border-top-left-radius: 4px;10     -webkit-border-top-rightright-radius: 3px;11     -webkit-border-bottom-rightright-radius: 6px;12     -webkit-border-bottom-left-radius: 10px;13     -moz-border-radius-topleft: 4px;14     -moz-border-radius-topright: 3px;15     -moz-border-radius-bottomright: 6px;16     -moz-border-radius-bottomleft: 10px;17 }  
登录后复制

7. 一般媒体查询

这是一段非常好的模板,用于各种零零碎碎的媒体查询,在移动设备上也可以使用,这段代码甚至可以通过使用min-device-pixel-ratio引用到视网膜设备上。

 1 /* Smartphones (portrait and landscape) ----------- */ 2 @media only screen   3 and (min-device-width : 320px) and (max-device-width : 480px) {   4   /* Styles */  5 }   6 /* Smartphones (landscape) ----------- */ 7 @media only screen and (min-width : 321px) { 8   /* Styles */ 9 }  10 /* Smartphones (portrait) ----------- */11 @media only screen and (max-width : 320px) {12   /* Styles */  13 } 14 /* iPads (portrait and landscape) ----------- */15 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {16   /* Styles */  17 } 18 <font></font>  19 /* iPads (landscape) ----------- */20 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {21   /* Styles */22 } 23 /* iPads (portrait) ----------- */24 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 25   /* Styles */26 }   27 /* Desktops and laptops ----------- */28 @media only screen and (min-width : 1224px) {29   /* Styles */30 }31 /* Large screens ----------- */32 @media only screen and (min-width : 1824px) {33   /* Styles */34 } 35 /* iPhone 4 ----------- */36 @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {37   /* Styles */38 }  
登录后复制

源码地址: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

8. 现代字体栈

在新网页上设计属于自己的字体栈还是件比较困难的事情,希望下面这段代码能给你带来启发和开发模板,关于更多字体栈源码,你可以访问CSS Font Stacks。

 1 /* Times New Roman-based serif */   2 font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;   3    4 /* A modern Georgia-based serif */   5 font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;   6    7 /*A more traditional Garamond-based serif */   8 font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;   9   10 /*The Helvetica/Arial-based sans serif */  11 font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;  12   13 /*The Verdana-based sans serif */  14 font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;  15   16 /*The Trebuchet-based sans serif */  17 font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;  18   19 /*The heavier “Impact” sans serif */  20 font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;  21   22 /*The monospace */  23 font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;  
登录后复制

源码地址: http://www.sitepoint.com/eight-definitive-font-stacks/

9. 自定义文本选择

一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色,下面代码的默认颜色是浅蓝色,当然,你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。

1 ::selection { background: #e2eae2; }2 ::-moz-selection { background: #e2eae2; }3 ::-webkit-selection { background: #e2eae2; }  
登录后复制

10.隐藏Logo上的H1文本

1 h1 {2     text-indent: -9999px;  3     margin: 0 auto;4     width: 320px;5     height: 85px;6     background: transparent url("images/logo.png") no-repeat scroll; 7 }  
登录后复制

11. 为图片创建拍立得效果边框

运用下面代码可以在图片上实现拍立得相片效果??一大片白色边框和细微的阴影。你需要修改图片的宽度/高度值来与你的网站布局相匹配。

 1 img.polaroid {  2     background:#000; /*Change this to a background image or remove*/  3     border:solid #fff; 4     border-width:6px 6px 20px 6px; 5     box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth *  6     -webkit-box-shadow:1px 1px 5px #333; 7     -moz-box-shadow:1px 1px 5px #333;  8     height:200px; /*Set to height of your image or desired div*/ 9     width:200px; /*Set to width of your image or desired div*/ 10 }  
登录后复制

源码地址: http://www.smipple.net/snippet/kettultim/Polaroid%20Image%20Border%20-%20CSS3

12. 锚链接伪类选择器

1 a:link { color: blue; }2 a:visited { color: purple; } 3 a:hover { color: red; } 4 a:active { color: yellow; }  
登录后复制

源码地址: http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers

13. 花俏地CSS3 Pull-Quotes

Pull-quotes不同于页面里的blockquote,它们通常用在文章中来引用文本。

 1 .has-pullquote:before {  2     /* Reset metrics. */ 3     padding: 0; 4     border: none;   5     /* Content */ 6     content: attr(data-pullquote); 7     /* Pull out to the right, modular scale based margins. */   8     float: rightright; 9     width: 320px;10     margin: 12px -140px 24px 36px;11     /* Baseline correction */12     position: relative;13     top: 5px; 14     /* Typography (30px line-height equals 25% incremental leading) */ 15     font-size: 23px;16     line-height: 30px; 17 } 18 .pullquote-adelle:before {19     font-family: "adelle-1", "adelle-2";20     font-weight: 100;21     top: 10px !important;22 } 23 24 .pullquote-helvetica:before {25     font-family: "Helvetica Neue", Arial, sans-serif;26     font-weight: bold;27     top: 7px !important;28 }29 .pullquote-facit:before { 30     font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;31     font-weight: bold;32     top: 7px !important;33 }  
登录后复制

源码地址: http://miekd.com/articles/pull-quotes-with-html5-and-css/

14. CSS3的全屏背景效果

如果你想使用大图片作为网站背景,并希望在页面滚动时保持固定,该代码片段非常适合,不过这段代码无法在旧的浏览器上工作。

1 html { 2     background: url('images/bg.jpg') no-repeat center center fixed;  3     -webkit-background-size: cover; 4     -moz-background-size: cover;5     -o-background-size: cover;6     background-size: cover;7 }  
登录后复制

源码: http://css-tricks.com/perfect-full-page-background-image/

15. 内容垂直集中

相对于内容在水平位置,内容在垂直方向是不好把控的,尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。

1 .container {2     min-height: 6.5em;3     display: table-cell; 4     vertical-align: middle;5 }  
登录后复制

源码地址: http://www.w3.org/Style/Examples/007/center

16. 垂直滚动条

这段代码将确保你的HTML元素总是稍微高于浏览器滚动条所停留的位置。

1 html { height: 101% }  
登录后复制

17. CSS3 Gradients模板

1 #colorbox {2     background: #629721;3     background-image: -webkit-gradient(linear, left top, left bottombottom, from(#83b842), to(#629721));4     background-image: -webkit-linear-gradient(top, #83b842, #629721); 5     background-image: -moz-linear-gradient(top, #83b842, #629721);6     background-image: -ms-linear-gradient(top, #83b842, #629721);7     background-image: -o-linear-gradient(top, #83b842, #629721);8     background-image: linear-gradient(top, #83b842, #629721);9 }  
登录后复制

18. @Font-Face模板

使用@font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站,并生成自定义font families。

 1 @font-face { 2     font-family: 'MyWebFont';  3     src: url('webfont.eot'); /* IE9 Compat Modes */  4     src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5     url('webfont.woff') format('woff'), /* Modern Browsers */ 6     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */  7     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 8 } 9 body {10     font-family: 'MyWebFont', Arial, sans-serif;11 }  
登录后复制

源码地址: http://css-tricks.com/snippets/css/using-font-face/

19.创建缝合效果

 1 p {  2     position:relative; 3     z-index:1;   4     padding: 10px; 5     margin: 10px;  6     font-size: 21px; 7     line-height: 1.3em; 8     color: #fff; 9     background: #ff0030;10     -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);11     -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);12     box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);13     -webkit-border-radius: 3px;14     -moz-border-radius: 3px;15     border-radius: 3px;16 }17 p:before {18     content: "";19     position: absolute;20     z-index: -1;21     top: 3px;22     bottombottom: 3px;23     left :3px;24     rightright: 3px;25     border: 2px dashed #fff;26 }    27 p a {28     color: #fff;29     text-decoration:none;30 }31 p a:hover, p a:focus, p a:active { 32     text-decoration:underline;33 }  
登录后复制

20. CSS3 斑马线效果

当用户在浏览许多行数据时,很难分清哪一个单元格是属于哪一行的。默认情况下,通过添加斑马线,用户可以给奇偶行更新不同的背景色。

1 tbody tr:nth-child(odd) {2     background-color: #ccc;3 }  
登录后复制

 

源码地址: http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/

来自: HONGKIAT.COM

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue中placeholder是什么意思 vue中placeholder是什么意思 May 07, 2024 am 09:57 AM

在 Vue.js 中,placeholder 属性指定输入元素的占位符文本,当用户未输入内容时显示,提供输入提示或示例,提高表单可访问性。其用法为在输入元素中设置 placeholder 属性,并可使用 CSS 自定义外观。最佳实践包括与输入相关、简短清晰、避免默认文本,并考虑可访问性。

js中span是什么意思 js中span是什么意思 May 06, 2024 am 11:42 AM

span 标签可为文本添加样式、属性或行为,用于:添加样式,如颜色、字体大小。设置属性,如 id、class 等。关联行为,如点击、悬停等。标记文本,以便进一步处理或引用。

js中rem是什么意思 js中rem是什么意思 May 06, 2024 am 11:30 AM

CSS 中的 REM 是一种相对于根元素(html)字体大小的相对单位。它具有以下特点:相对根元素字体大小,不受父元素影响。当根元素字体大小改变时,使用 REM 的元素也会相应调整。可用于任何 CSS 属性。使用 REM 的优点包括:响应性:保持不同设备和屏幕大小上的文本可读性。一致性:确保整个网站字体大小一致。可扩展性:通过调整根元素字体大小轻松更改全局字体大小。

vue中引入图片的方法 vue中引入图片的方法 May 02, 2024 pm 10:48 PM

Vue 中引入图片有五种方法:通过 URL、require 函数、静态文件、v-bind 指令和 CSS 背景图片。可以在 Vue 的计算属性或侦听器中处理动态图片,并使用打包工具优化图片加载。确保路径正确,否则会显示加载错误。

清华大学与智谱AI重磅开源 GLM-4:掀起自然语言处理新革命 清华大学与智谱AI重磅开源 GLM-4:掀起自然语言处理新革命 Jun 12, 2024 pm 08:38 PM

自2023年3月14日开始,ChatGLM-6B以来,GLM系列模型受到了广泛的关注和认可。特别是在ChatGLM3-6B开源之后,开发者对智谱AI推出的第四代模型充满了期待。而这一期待,随着GLM-4-9B的发布,终于得到了充分的满足。GLM-4-9B的诞生为了赋予小模型(10B及以下)更加强大的能力,GLM技术团队经过近半年的探索,推出了这一全新的第四代GLM系列开源模型:GLM-4-9B。这一模型在保证精度的同时,大幅度压缩了模型大小,具有更快的推理速度和更高的效率。GLM技术团队的探索没

浏览器插件是什么语言写的 浏览器插件是什么语言写的 May 08, 2024 pm 09:36 PM

浏览器插件通常使用以下语言编写:前端语言:JavaScript、HTML、CSS后端语言:C++、Rust、WebAssembly其他语言:Python、Java

js中什么是节点 js中什么是节点 May 07, 2024 pm 09:06 PM

节点是 JavaScript DOM 中表示 HTML 元素的实体。它们代表页面中的特定元素,可用于访问和操作该元素。常见的节点类型包括元素节点、文本节点、注释节点和文档节点。通过 DOM 方法(如 getElementById()),可以访问节点并对其进行操作,包括修改属性、添加/移除子节点、插入/替换节点和克隆节点。节点遍历有助于在 DOM 结构中导航。节点在动态创建页面内容、事件处理、动画和数据绑定方面非常有用。

vscode怎么设置未知属性 vscode设置未知属性方法 vscode怎么设置未知属性 vscode设置未知属性方法 May 09, 2024 pm 02:43 PM

1.首先,打开左下角的设置图标,点击settings选项2.随后,在跳转的窗口中找到css栏目3.最后,将unknownproperties菜单中的下拉选项改为error按钮即可

See all articles