主页 / 建站知识 /

30个开发人员有用的CSS代码片段整理值得借鉴

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设
CSS 是我们使用的功能强大和最常用web 语言。他可以兼容新旧不同的浏览器，他的兼容跨度确实够大的，从微软的IE到火狐再到谷歌浏览器。在设计的时候我们总是想创建更有创意和风格的网站，无论创建怎么样的网站，有些CSS代码是必须要掌握的，可以说这是核心，掌握这样的一些CSS代码，前端布局方面基本上再不成问题，什么边框圆角，工具提示，浏览器hacks等等都不是问题。
在今天的文章中分享我收藏的 30 个CSS 代码段，无论您是经验丰富的 web 设计师还是新手，他们都是非常值得借鉴的；

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 mented backslash hack \/
html .clearfix { height: 1%; }
.clearfix { display: block; }
/ close mented 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:Geia;
}

使用 @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: ;
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;
: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 /
}
/ Desks and laps ----------- /
@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) 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 #c4c8;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8;
}

在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: #c; font-style:italic }
:-moz-placeholder { color: #c; font-style:italic }

CSS3 3D文字效果

复制代码
代码如下:

h1 {
text-shadow: 0 1px 0 #c,
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./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;
: 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(, #eeeeee, #);
background-image: -webkit-gradient(linear,left ,left bottom,color-s(0, #eeeeee),color-s(1, #));
}

CSS3背景大小

复制代码
代码如下:

body {
background: #000 url(http://birdoflight.files.wordpress./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(, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left , left bottom, color-s(0%,#ffffff), color-s(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">
上一篇：CSS display:block在Firefox下显示布局错乱问题 下一篇：绝对令人的惊叹的CSS3折叠效果(3D效果)整理

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by