MYF110
MYF110

22个常用的css例子

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.图像在水平或者垂直方向的绝对定位

  1. img {
  2. position: absolute;
  3. top: 50%;
  4. left: 50%;
  5. width: 500px;
  6. height: 500px;
  7. margin-top: -250px; /* Half the height */
  8. margin-left: -250px; /* Half the width */
  9. }
复制代码


3.用PHP压缩CSS代码

  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. body { color: red; }
复制代码


4.如何用css实现小三角形符号
具体代码如下  首先是html代码

复制代码


css代码

  1. .arrow-up {
  2. width: 0; 
  3. height: 0; 
  4. border-left: 5px solid transparent;
  5. border-right: 5px solid transparent;
  6. border-bottom: 5px solid black;
  7. }
  8. .arrow-down {
  9. width: 0; 
  10. height: 0; 
  11. border-left: 20px solid transparent;
  12. border-right: 20px solid transparent;
  13. border-top: 20px solid #f00;
  14. }
  15. .arrow-right {
  16. width: 0; 
  17. height: 0; 
  18. border-top: 60px solid transparent;
  19. border-bottom: 60px solid transparent;
  20. border-left: 60px solid green;
  21. }
  22. .arrow-left {
  23. width: 0; 
  24. height: 0; 
  25. border-top: 10px solid transparent;
  26. border-bottom: 10px solid transparent; 
  27. border-right:10px solid blue; 
  28. }
复制代码


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. }
复制代码

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. .clearfix { display: inline-block; }
  10. /* start commented backslash hack \*/
  11. * html .clearfix { height: 1%; }
  12. .clearfix { display: block; }
  13. /* 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. /* emails */
  7. a[href^="mailto:"]{
  8. padding-right: 20px;
  9. background: url(email.png) no-repeat center right;
  10. }
  11. /* pdfs */
  12. a[href$=".pdf"]{
  13. padding-right: 20px;
  14. background: url(pdf.png) no-repeat center right;
  15. }
复制代码

此代码段经常被用来增加用户体验的。经常在互联网上我们发现一些链接移动到上面的时候会显示不同的小图标。可以使用此代码段，你告诉用户是否它一个外部链接、 电子邮件、 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当中的滚动条效果

  1. textarea{ 
  2. overflow:auto; 
  3. }
复制代码


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 {
  2. position:fixed;
  3. left:0px;
  4. bottom:0px;
  5. height:32px;
  6. width:100%;
  7. background:#333;
  8. }
  9. /* IE 6 */
  10. * html #footer {
  11. position:absolute;
  12. 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');
  13. }
复制代码


21.文字旋转

  1. .rotate {
  2. /* Safari */
  3. -webkit-transform: rotate(-90deg);
  4. /* Firefox */
  5. -moz-transform: rotate(-90deg);
  6. /* IE */
  7. -ms-transform: rotate(-90deg);
  8. /* Opera */
  9. -o-transform: rotate(-90deg);
  10. /* Internet Explorer */
  11. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  12. }
复制代码


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. ul.box li {
  9. position: relative;
  10. float: left;
  11. width: 250px;
  12. height: 150px;
  13. padding: 0;
  14. border: 1px solid #efefef;
  15. margin: 0 30px 30px 0;
  16. background: #fff;
  17. -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  18. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
  19. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
  20. ul.box li:before,
  21. ul.box li:after {
  22. content: '';
  23. z-index: -1;
  24. position: absolute;
  25. left: 10px;
  26. bottom: 10px;
  27. width: 70%;
  28. max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
  29. max-height: 100px;
  30. height: 55%;
  31. -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  32. -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  33. box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  34. -webkit-transform: skew(-15deg) rotate(-6deg);
  35. -moz-transform: skew(-15deg) rotate(-6deg);
  36. -ms-transform: skew(-15deg) rotate(-6deg);
  37. -o-transform: skew(-15deg) rotate(-6deg);
  38. transform: skew(-15deg) rotate(-6deg); }
  39. ul.box li:after {
  40. left: auto;
  41. right: 10px;
  42. -webkit-transform: skew(15deg) rotate(6deg);
  43. -moz-transform: skew(15deg) rotate(6deg);
  44. -ms-transform: skew(15deg) rotate(6deg);
  45. -o-transform: skew(15deg) rotate(6deg);
  46. 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. }
复制代码


via:http://www.cnblogs.com/58top/archive/2012/07/20/2601686.html

你可能感兴趣的:(web前端)