收藏的25个非常有用的CSS代码片段,在你开发基于CSS的网站时,这些代码是经常用到的,比方说一些特殊的效果,圆角边框,CSS透明度,梯形环绕,CSS小三角等,希望对你有用
2012-10-25 14:56
1056 查看
今天介绍给大家我收藏的25个非常有用的CSS代码片段,在你开发基于CSS的网站时,这些代码是经常用到的,比方说一些特殊的效果,圆角边框,CSS透明度,梯形环绕,CSS小三角等,希望对你有用
CSS代码如下
具体代码如下 首先是html代码
用这些代码可以实现图像的360的翻转,效果如下,没有翻转前的图片
翻转后的图片
8 隐藏和文本文字缩进
上面CSS代码设置text-indent 为负值,正好文字移到了左边,可以实现部分文字隐藏
10根据不同的文件类型,展示不同的链接,看下面的代码
此代码段经常被用来增加用户体验的。经常在互联网上我们发现一些链接移动到上面的时候会显示不同的小图标。可以使用此代码段,你告诉用户是否它一个外部链接、 电子邮件、 pdf、或者其他图标
11 边框圆角
14 CSS文字阴影效果
15 CSS透明度
一谈到透明度问题,这个真是令人头疼,明明在火狐和谷歌浏览器当中效果看到好好的,在IE当中浏览就变了味,好在可以通过下面的CSS代码解决
16 垂直居中
18 使gif图像可以来回蹦跳
19 打印分页符
20 固定页脚位置
21 文字旋转
25 设计梯子型文字
1简单又好的 Blockquote 样式
CSS代码如下
1 blockquote { 2 background:#f9f9f9; 3 border-left:10px solid #ccc; 4 margin:1.5em 10px; 5 padding:.5em 10px; 6 quotes:"\201C""\201D""\2018""\2019"; 7 } 8 blockquote:before { 9 color:#ccc; 10 content:open-quote; 11 font-size:4em; 12 line-height:.1em; 13 margin-right:.25em; 14 vertical-align:-.4em; 15 } 16 blockquote p { 17 display:inline; 18 }
2图像在水平或者垂直方向的绝对定位
css代码1 img { 2position: absolute; 3top: 50%; 4left: 50%; 5width: 500px; 6height: 500px; 7margin-top: -250px; /* Half the height */ 8margin-left: -250px; /* Half the width */ 9 }
3用PHP压缩CSS代码
1 <?php 2 ob_start ("ob_gzhandler"); 3 header("Content-type: text/css; charset: UTF-8"); 4 header("Cache-Control: must-revalidate"); 5 $offset = 60 * 60 ; 6 $ExpStr = "Expires: " . 7 gmdate("D, d M Y H:i:s", 8 time() $offset) . " GMT"; 9 header($ExpStr); 10 ?> 11 12 body { color: red; }
4如何用css实现小三角形符号
具体代码如下 首先是html代码
1 <div class="arrow-up"></div> 2 <div class="arrow-down"></div> 3 <div class="arrow-left"></div> 4 <div class="arrow-right"></div>
css代码
1 .arrow-up { 2 width: 0; 3 height: 0; 4 border-left: 5px solid transparent; 5 border-right: 5px solid transparent; 6 7 border-bottom: 5px solid black; 8 } 9 10 .arrow-down { 11 width: 0; 12 height: 0; 13 border-left: 20px solid transparent; 14 border-right: 20px solid transparent; 15 16 border-top: 20px solid #f00; 17 } 18 19 .arrow-right { 20 width: 0; 21 height: 0; 22 border-top: 60px solid transparent; 23 border-bottom: 60px solid transparent; 24 25 border-left: 60px solid green; 26 } 27 28 .arrow-left { 29 width: 0; 30 height: 0; 31 border-top: 10px solid transparent; 32 border-bottom: 10px solid transparent; 33 34 border-right:10px solid blue; 35 }
5.翻转图片
CSS代码1 img { 2 -moz-transform: scaleX(-1); 3 -o-transform: scaleX(-1); 4 -webkit-transform: scaleX(-1); 5 transform: scaleX(-1); 6 filter: FlipH; 7 -ms-filter: "FlipH"; 8 }
用这些代码可以实现图像的360的翻转,效果如下,没有翻转前的图片
翻转后的图片
6 Clearfix
1 .clearfix:after { 2 visibility: hidden; 3 display: block; 4 font-size: 0; 5 content: " "; 6 clear: both; 7 height: 0; 8 } 9 10 .clearfix { display: inline-block; } 11 12 /* start commented backslash hack \*/ 13 * html .clearfix { height: 1%; } 14 .clearfix { display: block; } 15 /* close commented backslash hack */
7 在IE6中的固定定位
8 隐藏和文本文字缩进
1 h1 { 2 text-indent:-9999px; 3 margin:0 auto; 4 width:400px; 5 height:100px; 6 background:transparent url("images/logo.jpg") no-repeat scroll; 7 }
上面CSS代码设置text-indent 为负值,正好文字移到了左边,可以实现部分文字隐藏
9在iPad当中定位CSS代码
10根据不同的文件类型,展示不同的链接,看下面的代码
1 /* external links */ 2 a[href^="http://"]{ 3 padding-right: 20px; 4 background: url(external.gif) no-repeat center right; 5 } 6 7 /* emails */ 8 a[href^="mailto:"]{ 9 padding-right: 20px; 10 background: url(email.png) no-repeat center right; 11 } 12 13 /* pdfs */ 14 a[href$=".pdf"]{ 15 padding-right: 20px; 16 background: url(pdf.png) no-repeat center right; 17 }
此代码段经常被用来增加用户体验的。经常在互联网上我们发现一些链接移动到上面的时候会显示不同的小图标。可以使用此代码段,你告诉用户是否它一个外部链接、 电子邮件、 pdf、或者其他图标
11 边框圆角
1 .round{ 2 -moz-border-radius: 10px; 3 -webkit-border-radius: 10px; 4 border-radius: 10px; /* future proofing */ 5 -khtml-border-radius: 10px; /* for old Konqueror browsers */ 6 }
12 去除textarea在IE当中的滚动条效果
textarea{ overflow:auto; } |
13 使页面在中央
1 .wrapper {
2 width:960px;
3 margin:0 auto;
4 }
14 CSS文字阴影效果
1 p { text-shadow: 1px 1px 1px #000; }
15 CSS透明度
一谈到透明度问题,这个真是令人头疼,明明在火狐和谷歌浏览器当中效果看到好好的,在IE当中浏览就变了味,好在可以通过下面的CSS代码解决1 .transparent {
2 filter:alpha(opacity=50);
3 -moz-opacity:0.5;
4 -khtml-opacity: 0.5;
5 opacity: 0.5;
6 }
16 垂直居中
1 .container {
2 min-height: 10em;
3 display: table-cell;
4 vertical-align: middle;
5 }
17 Min-height in IE
1 .box {
2 min-height:500px;
3 height:auto !important;
4 height:500px;
5 }
18 使gif图像可以来回蹦跳
19 打印分页符
1 .page-break{
2 page-break-before:always;
3 }
20 固定页脚位置
1 #footer {
2position:fixed;
3left:0px;
4bottom:0px;
5height:32px;
6width:100%;
7background:#333;
8 }
9 /* IE 6 */
10 * html #footer {
11position:absolute;
12top:expression((0-(footer.offsetHeight) (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) 'px');
13 }
21 文字旋转
1 .rotate { 2 3 /* Safari */ 4 -webkit-transform: rotate(-90deg); 5 6 /* Firefox */ 7 -moz-transform: rotate(-90deg); 8 9 /* IE */ 10 -ms-transform: rotate(-90deg); 11 12 /* Opera */ 13 -o-transform: rotate(-90deg); 14 15 /* Internet Explorer */ 16 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 17 18 }
22 A链接伪类(按顺序)
CSS代码1 a:link {color: blue;} 2 a:visited {color: purple;} 3 a:hover {color: red;} 4 a:active {color: yellow;}
23 设置ul阴影效果和边框圆角
CSS代码如下1 ul.box { 2 position: relative; 3 z-index: 1; /* prevent shadows falling behind containers with backgrounds */ 4 overflow: hidden; 5 list-style: none; 6 margin: 0; 7 padding: 0; } 8 9 ul.box li { 10 position: relative; 11 float: left; 12 width: 250px; 13 height: 150px; 14 padding: 0; 15 border: 1px solid #efefef; 16 margin: 0 30px 30px 0; 17 background: #fff; 18 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 19 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 20 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; } 21 22 ul.box li:before, 23 ul.box li:after { 24 content: ''; 25 z-index: -1; 26 position: absolute; 27 left: 10px; 28 bottom: 10px; 29 width: 70%; 30 max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */ 31 max-height: 100px; 32 height: 55%; 33 -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 34 -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 35 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 36 -webkit-transform: skew(-15deg) rotate(-6deg); 37 -moz-transform: skew(-15deg) rotate(-6deg); 38 -ms-transform: skew(-15deg) rotate(-6deg); 39 -o-transform: skew(-15deg) rotate(-6deg); 40 transform: skew(-15deg) rotate(-6deg); } 41 42 ul.box li:after { 43 left: auto; 44 right: 10px; 45 -webkit-transform: skew(15deg) rotate(6deg); 46 -moz-transform: skew(15deg) rotate(6deg); 47 -ms-transform: skew(15deg) rotate(6deg); 48 -o-transform: skew(15deg) rotate(6deg); 49 transform: skew(15deg) rotate(6deg); }
24图片预加载功能
25 设计梯子型文字
1 h1 { 2 font-size: 72px; 3 background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333)); 4 -webkit-background-clip: text; 5 -webkit-text-fill-color: transparent; 6 }
相关文章推荐
- 一些非常有用的html,css,javascript代码片段(持久更新)
- 30个开发人员有用的CSS代码片段整理值得借鉴
- 30个开发人员有用的CSS代码片段
- 分享30个开发人员有用的CSS代码片段
- 非常有用的 48 个 JavaScript 代码片段,值得收藏!
- 分享30个开发人员有用的CSS代码片段
- 分享iphone开发的好网站,希望大家也能提供一些分享下 收藏
- 从这些网站可以找到有用代码片段
- 开发人员有用的CSS代码片段
- 分享30个开发人员有用的CSS代码片段
- HTML常用的特殊符号总结 2014年9月12日 22704次浏览 html中经常会用到一些特殊符号,例如箭头,雪花,心形等等,这些符号就不用css样式或者图片来写了,直接用html特殊符号可以实现。
- 30个开发人员有用的CSS代码片段
- 分享30个开发人员有用的CSS代码片段
- 关于IOS开发的一些有用的代码片段(别人总结和自己的)
- 25个强大的CSS代码,据说这些是开发者经常遇到比较棘手的代码
- 分享30个开发人员有用的CSS代码片段
- 非常有用的 48 个 JavaScript 代码片段,值得收藏!
- 30个开发人员有用的CSS代码片段
- 分享30个开发人员有用的CSS代码片段
- 一些在android开发中经常用的的代码片段