【转】值得珍藏的CSS代码集

【转】值得珍藏的CSS代码集

转载自CSDN

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/
6. 个性化的圆角代码

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

#container {

    -webkit-border-radius: 4px 3px 6px 10px;
    -moz-border-radius: 4px 3px 6px 10px;
    -o-border-radius: 4px 3px 6px 10px;
    border-radius: 4px 3px 6px 10px;
}
/* alternative syntax broken into each line */
#container {

    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-rightright-radius: 3px;
    -webkit-border-bottom-rightright-radius: 6px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 10px;
}
7. 一般媒体查询

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

/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
 
/* Styles */
}
/* Smartphones (landscape) ———– */
@media only screen and (min-width : 321px) {

 
/* Styles */
}
/* Smartphones (portrait) ———– */
@media only screen and (max-width : 320px) {

 
/* Styles */
 
}
/* iPads (portrait and landscape) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

 
/* Styles */
 
}
<font></font>
/* iPads (landscape) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

 
/* Styles */
}
/* iPads (portrait) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

 
/* Styles */

/* Desktops and laptops ———– */
@media only screen and (min-width : 1224px) {

 
/* Styles */
}
/* Large screens ———– */
@media only screen and (min-width : 1824px) {

 
/* Styles */
}
/* iPhone 4 ———– */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {

 
/* Styles */
}
源码地址: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
8. 现代字体栈

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

/* Times New Roman-based serif */
 
font-family: Cambria, “Hoefler Text”, Utopia, “Liberation Serif”, “Nimbus Roman No9 L Regular”, Times, “Times New Roman”, serif;
  
/* A modern Georgia-based serif */
 
font-family: Constantia, “Lucida Bright”, Lucidabright, “Lucida Serif”, Lucida, “DejaVu Serif,” “Bitstream Vera Serif”, “Liberation Serif”, Georgia, serif;
  
/*A more traditional Garamond-based serif */
 
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;
  
/*The Helvetica/Arial-based sans serif */
 
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;
  
/*The Verdana-based sans serif */
 
font-family: Corbel, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, “DejaVu Sans”, “Bitstream Vera Sans”, “Liberation Sans”, Verdana, “Verdana Ref”, sans-serif;
  
/*The Trebuchet-based sans serif */
 
font-family: “Segoe UI”, Candara, “Bitstream Vera Sans”, “DejaVu Sans”, “Bitstream Vera Sans”, “Trebuchet MS”, Verdana, “Verdana Ref”, sans-serif;
  
/*The heavier “Impact” sans serif */
 
font-family: Impact, Haettenschweiler, “Franklin Gothic Bold”, Charcoal, “Helvetica Inserat”, “Bitstream Vera Sans Bold”, “Arial Black”, sans-serif;
  
/*The monospace */
 
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 。

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }
10.隐藏Logo上的H1文本

h1 {

    text-indent: -9999px;
    margin: 0 auto;
    width: 320px;
    height: 85px;
    background: transparent url(“images/logo.png”) no-repeat scroll;
}

 

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

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

img.polaroid {

    background:#000;
/*Change this to a background image or remove*/
    border:solid #fff;
    border-width:6px 6px 20px 6px;
    box-shadow:1px 1px 5px #333;
/* Standard blur at 5px. Increase for more depth *
   
-webkit-box-shadow:1px 1px 5px #333;
   
-moz-box-shadow:1px 1px 5px #333;
   
height:200px; /*Set to height of your image or desired div*/
    width:200px;
/*Set to width of your image or desired div*/
}
源码地址: http://www.smipple.net/snippet/kettultim/Polaroid%20Image%20Border%20-%20CSS3
12. 锚链接伪类选择器

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
源码地址: http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers
13. 花俏地CSS3 Pull-Quotes

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

.has-pullquote:before {

   
/* Reset metrics. */
    padding: 0;
    border: none;
   
/* Content */
    content: attr(data-pullquote);
   
/* Pull out to the right, modular scale based margins. */
 
    float: rightright;
    width: 320px;
    margin: 12px -140px 24px 36px;
   
/* Baseline correction */
    position: relative;
    top: 5px;
   
/* Typography (30px line-height equals 25% incremental leading) */
    font-size: 23px;
    line-height: 30px;
}
.pullquote-adelle:before {

    font-family: “adelle-1”, “adelle-2”;
    font-weight: 100;
    top: 10px !important;
}
 
.pullquote-helvetica:before {

    font-family: “Helvetica Neue”, Arial, sans-serif;
    font-weight: bold;
    top: 7px !important;
}
.pullquote-facit:before {

    font-family: “facitweb-1”, “facitweb-2”, Helvetica, Arial, sans-serif;
    font-weight: bold;
    top: 7px !important;
}
源码地址: http://miekd.com/articles/pull-quotes-with-html5-and-css/
14. CSS3的全屏背景效果

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

html {

    background: url(‘images/bg.jpg’) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
源码: http://css-tricks.com/perfect-full-page-background-image/
15. 内容垂直集中

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

.container {

    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}
源码地址: http://www.w3.org/Style/Examples/007/center
16. 垂直滚动条

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

html { height: 101% }
17. CSS3 Gradients模板

#colorbox {

    background: #629721;
    background-image: -webkit-gradient(linear, left top, left bottombottom, from(#83b842), to(#629721));
    background-image: -webkit-linear-gradient(top, #83b842, #629721);
    background-image: -moz-linear-gradient(top, #83b842, #629721);
    background-image: -ms-linear-gradient(top, #83b842, #629721);
    background-image: -o-linear-gradient(top, #83b842, #629721);
    background-image: linear-gradient(top, #83b842, #629721);
}
18. @Font-Face模板

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

@font-face {

    font-family: ‘MyWebFont’;
    src: url(‘webfont.eot’);
/* IE9 Compat Modes */
    src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’),
/* IE6-IE8 */
    url(‘webfont.woff’) format(‘woff’),
/* Modern Browsers */
    url(‘webfont.ttf’)  format(‘truetype’),
/* Safari, Android, iOS */
    url(‘webfont.svg#svgFontName’) format(‘svg’);
/* Legacy iOS */
}
body {

    font-family: ‘MyWebFont’, Arial, sans-serif;
}
源码地址: http://css-tricks.com/snippets/css/using-font-face/
19.创建缝合效果

p {

    position:relative;
    z-index:1;
    padding: 10px;
    margin: 10px;
    font-size: 21px;
    line-height: 1.3em;
    color: #fff;
    background: #ff0030;
    -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
p:before {

    content: “”;
    position: absolute;
    z-index: -1;
    top: 3px;
    bottombottom: 3px;
    left :3px;
    rightright: 3px;
    border: 2px dashed #fff;
}  
p a {

    color: #fff;
    text-decoration:none;
}
p a:hover, p a:focus, p a:active {

    text-decoration:underline;
}

20. CSS3 斑马线效果

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

tbody tr:nth-child(odd) {

    background-color: #ccc;
}
源码地址: http://css-tricks.com/snippets/css/css3-zebra-striping-a-table/

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/110110.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Oracle PL/SQL编程详解之七:程序包的创建与应用

    Oracle PL/SQL编程详解之七:程序包的创建与应用Oracle PL/SQL编程详解之七:程序包的创建与应用(聪明在于学习,天才在于积累!) 本篇主要内容如下:第七章  程序包的创建和应用7.1  程序包简介7.2  程序包的定义7.3  包的开发步骤7.4  包定义的说明7.5  子程序重载7.6  加密实用程序7.7  删除包7.8  包的管理  7.1  程序包简介    程序

  • Java学习之基础语法篇

    java学习之路0x00前言学习java也有段时间了,写篇文章来记录一下学习内容。0x01java加载机制说到java不得不提的是java的类加载机制,java是一个依赖于jvm(也就是

    2021年12月11日
  • java开发工具包_java多线程实例

    java开发工具包_java多线程实例【发包工具】http多线程发包工具使用方法:输入地址,发送的内容,线程数,等待时间,每个线程发送的次数,GET/POST请求。源代码packagecom.xmxkkk.httptest;importjava.awt.*;importjava.awt.event.*;importjavax.swing.*;importjavax.swing.border.TitledBorder;publ…

  • 瀑布模型和快速原型模型的共同点_增量模型和瀑布模型的区别

    瀑布模型和快速原型模型的共同点_增量模型和瀑布模型的区别软件开发过程模型在软件开发的几十年实践中,人们总结了很多软件开发模型用来描述和表示一个复杂的开发过程,如:软件测试与软件的开发模式有着紧密的联系,作为一名测试人员,应该充分理解软件的开发模式,以便

  • earlysuspend[通俗易懂]

    earlysuspend[通俗易懂]earlysuspend================ 头文件:linux/earlysuspend.h使用earlysuspend—————— 另外andorid还支持内核中的earlysuspend操作,因为kenerl此前的电源管理就是把几乎所有的设备 都拖入睡眠模式,但多数情况下有些设备还不需要睡眠。ealysuspen

  • 电赛练习之旋转倒立摆PID调节[通俗易懂]

    电赛练习之旋转倒立摆PID调节[通俗易懂]前言:在家准备电赛控制题,第一个选择的旋转倒立摆,结构和电路相对简单,对于新手比较友好。本人今年大二,自学的STM32和PID算法,本文算是对这个题目练习的记录吧,文章和程序有误的地方还请大家多多指教。一、机械结构考虑到正式比赛时需要自己搭建机械结构,我就没有直接购买现成的机械结构。关于机械结构还是平时接触太少了,随便在淘宝上买的不锈钢打孔支架作摆臂和旋转臂,最后发现传感器没法安放,强行用电机支架和胶带固定住。最困难的是怎么把电机和旋转臂连接得牢靠,最开始用的一个联轴器,发现转的猛了就会松动,想尽各种办

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号