zoukankan      html  css  js  c++  java
  • css 网站常用

    简单的loading效果

    .progressBar {
        border: solid 1px #303031; 
        font: bold 20px/22px Arial, sans-serif;
        background: white url(/images/loading.gif) no-repeat 10px 10px; 
         filter:alpha(opacity=85);  
          -moz-opacity:0.85;  
          -khtml-opacity: 0.85;  
          opacity: 0.85;  
     }
     .progressBar { display: block;  148px; height: 28px; position: fixed; top: 50%; left: 50%; margin-left: -74px; margin-top: -14px; padding: 10px 10px 10px 50px; text-align: left; line-height: 27px; font-weight: bold; position: absolute; z-index: 2001; } 

    调用 

    <div  class="progressBar"  >loading...</div> 

    tips 鼠标滑过提示

    来自:http://qtip2.com/guides

    日历控件

    来自:http://www.my97.net/dp/demo/index.htm

    好看的按钮 圆角

    来自:http://www.open-open.com/home/space-37924-do-blog-id-5789.html

    .button {
        display: inline-block;
        position: relative;
        margin: 10px;
        padding: 0 20px;
        text-align: center;
        text-decoration: none;
        font: bold 12px/25px Arial, sans-serif;
    
        text-shadow: 1px 1px 1px rgba(255,255,255, .22);
    
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
    
        -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
        -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
        box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    
        -webkit-transition: all 0.15s ease;
        -moz-transition: all 0.15s ease;
        -o-transition: all 0.15s ease;
        -ms-transition: all 0.15s ease;
        transition: all 0.15s ease;
    }
    .button:hover {
        -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
        -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
        box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
    }
    
    
    /* Green Color */
    
    .green {
        color: #3e5706;
    
        background: #a5cd4e; /* Old browsers */
        background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
        background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */
    }
    
    /* Big Button Style */
    
    .big {
        padding: 0 40px;
        padding-top: 10px;
        height: 35px;
        text-transform: uppercase;
        font: bold 30px/32px Arial, sans-serif;
    }
    
    .big span {
        display: block;
        text-transform: none;
        font: italic normal 22px/28px Georgia, sans-serif;
        text-shadow: 1px 1px 1px rgba(255,255,255, .12);
    }

    调用

    <a href="#" class="button big green"><span>Save & Next</span></a>

     右下角 消息弹窗

    下载地址:http://files.cnblogs.com/linyijia/Jquery%E5%8F%B3%E4%B8%8B%E8%A7%92%E6%B6%88%E6%81%AF%E6%8F%90%E7%A4%BA%E6%A1%86.rar

  • 相关阅读:
    UVA 10462 Is There A Second Way Left?(次小生成树&Prim&Kruskal)题解
    POJ 1679 The Unique MST (次小生成树)题解
    POJ 2373 Dividing the Path (单调队列优化DP)题解
    BZOJ 2709 迷宫花园
    BZOJ 1270 雷涛的小猫
    BZOJ 2834 回家的路
    BZOJ 2506 calc
    BZOJ 3124 直径
    BZOJ 4416 阶乘字符串
    BZOJ 3930 选数
  • 原文地址:https://www.cnblogs.com/wangxusummer/p/4402724.html
Copyright © 2011-2022 走看看