常用的CSS代码片段

图像在水平或者垂直方向的绝对定位
 img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}
---------------------------------------------------------
 如何用css实现小三角形符号

  <div class="arrow-up"></div>
  <div class="arrow-down"></div>
  <div class="arrow-left"></div> 
 <div class="arrow-right"></div> 
  css代码
.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}
.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;  
    border-top: 20px solid #f00;
}
.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;   
    border-left: 60px solid green;
}
.arrow-left {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:10px solid blue; 
} 
------------------------------------------------------
 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 */ 
-----------------------------------------------------------
 隐藏和文本文字缩进
h1 {
    text-indent:-9999px;
    margin:0 auto;
    width:400px;
    height:100px;
    background:transparent url("images/logo.jpg") no-repeat scroll;
} 
 上面CSS代码设置text-indent 为负值,正好文字移到了左边,可以实现部分文字隐藏

-----------------------------------------------------------

 根据不同的文件类型,展示不同的链接,看下面的代码
/* 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;
}
此代码段经常被用来增加用户体验的。经常在互联网上我们发现一些链接移动到上面的时候会显示不同的小图标。可以使用此代码段,你告诉用户是否它一个外部链接、 电子邮件、 pdf、或者其他图标

-----------------------------------------------------
边框圆角
 .round{
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
  border-radius: 10px; /* future proofing */
  -khtml-border-radius: 10px; /* for old Konqueror browsers */
}

-----------------------------------------------------------
 CSS透明度
.transparent { filter:alpha(opacity=50); -moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5; } 
----------------------------------------------

 垂直居中

 .container {
  min-height: 10em;
  display: table-cell;
 vertical-align: middle;}

--------------------------------------------------------------
 固定页脚位置
#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:32px;
   width:100%;
   background:#333;
}
/* 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');
}
-----------------------------------------------------------------
  图片预加载功能
div.loader{
  background:url(images/hover.png) no-repeat;
  background:url(images/hover2.png) no-repeat;
  background:url(images/hover2.png) no-repeat;
 margin-left:-10000px;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值