首页 > 代码库 > 30个开发人员有用的CSS代码片段整理值得借鉴
30个开发人员有用的CSS代码片段整理值得借鉴
//Css Reset by Eric Meyer
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ‘‘;
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing="0"‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 根据文件格式显示不同的链接样式 */
/* external links */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
//在IE浏览器删除textarea的滚动条
textarea{
overflow:auto;
}
//浏览器特定的 hacks
/* IE 6 */
* html .yourclass { }
/* IE 7 */
*+html .yourclass{ }
/* IE 7 and modern browsers */
html>body .yourclass { }
/* Modern browsers (not IE 7) */
html>/**/body .yourclass { }
/* Opera 9.27 and below */
html:first-child .yourclass { }
/* Safari */
html[xmlns*=""] body:last-child .yourclass { }
/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:nth-of-type(1) .yourclass { }
/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:first-of-type .yourclass { }
/* Safari 3+, Chrome 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.yourclass { }
}
//Clearfix
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
//固定宽度且居中
.wrapper {
width:960px;
margin:0 auto;
}
//Rounded corners – border-radius
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
//伪元素向文本的第一个字母添加特殊样式
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
}
//使用 @fontface
@font-face {
font-family: ‘MyFontFamily‘;
src: url(‘myfont-webfont.eot?‘) format(‘eot‘),
url(‘myfont-webfont.woff‘) format(‘woff‘),
url(‘myfont-webfont.ttf‘) format(‘truetype‘),
url(‘myfont-webfont.svg#svgFontName‘) format(‘svg‘);
}
//跨浏览器的inline-block
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}
//Fixed Footer
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+‘px‘);
}
//更改内容区域的大小
#content {
width: 100%;
margin: 0;
float: none;
}
CSS3 Media Queries （这个不常用主要用于智能设备的判断显示不同的媒体）
复制代码
代码如下:
/* 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 */
}
/* 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 */
}
多背景图片
复制代码
代码如下:
#multiple-images {
background: url(image_1.png) top left no-repeat,
url(image_2.png) bottom left no-repeat,
url(image_3.png) bottom right no-repeat;
}
多列
复制代码
代码如下:
#columns-3 {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;
}
在IE的最小高度
复制代码
代码如下:
.box {
min-height:500px;
height:auto !important;
height:500px;
}
突出显示文本样式
复制代码
代码如下:
::selection {
color: #000000;
background-color: #FF0000;
}
::-moz-selection {
color: #000000;
background: #FF0000;
}
Box Shadow
复制代码
代码如下:
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
占位符文本样式
复制代码
代码如下:
::-webkit-input-placeholder { color: #ccc; font-style:italic }
:-moz-placeholder { color: #ccc; font-style:italic }
CSS3 3D文字效果
复制代码
代码如下:
h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
WebKit的边界半径修正
复制代码
代码如下:
-webkit-background-clip: padding-box;
XBrowser的border-radius（CSS3PIE）
复制代码
代码如下:
.roundbox {
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
behavior: url(/PIE.htc);
}
更好的兼容IE浏览器的
复制代码
代码如下:
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
CSS3工具提示（这个很实用，看我网站的导航工具提示效果)
复制代码
代码如下:
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
}
CSS3背景大小
复制代码
代码如下:
body {
background: #000 url(http://birdoflight.files.wordpress.com/2009/10/frida-kahlo-1.jpg) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}
@media only all and (max-width: 1024px) and (max-height: 768px) {
body {
-moz-background-size: 1024px 768px;
background-size: 1024px 768px;
}
}
跨浏览器的CSS页面卷曲阴影
复制代码
代码如下:
.page-curl {
position: relative;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#ffffff‘, endColorstr=‘#e5e5e5‘,GradientType=0 );
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }
.page-curl:after {
z-index: -1;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: ‘‘;
right: 10px;
bottom: 10px;
-webkit-transform: skew(15deg) rotate(5deg);
-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(15deg) rotate(5deg);
-moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }
.page-curl:before {
z-index: -2;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: ‘‘;
left: 10px;
bottom: 10px;
-webkit-transform: skew(-15deg) rotate(-5deg);
-webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(-15deg) rotate(-5deg);
-moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }
CSS3模糊文字
复制代码
代码如下:
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
修复 IE6/7 margin/padding双倍 间距错误
复制代码
代码如下:
ul li
{
float: right;
margin-right: 10px;
*display: inline; /*Target IE7 and bellow*/
_display: inline; /*Target IE6 and bellow*/
}
/* This example fixes the double right margin bug */
链接伪类的顺序
复制代码
代码如下:
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}
响应布局的HTML Meta标签
复制代码
代码如下:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
30个开发人员有用的CSS代码片段整理值得借鉴
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。