zoukankan      html  css  js  c++  java
  • 常用的代码,实用

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

    初始化:
    html { font-family:"微软雅黑";} 
    body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, dl, dt, dd, input,figure { margin: 0; 
    padding: 0; }
    body { -webkit-overflow-scrolling: touch; text-align:left;  max-height: 100%; }
    a, a:hover { text-decoration: none; outline: none;  }
    li { list-style: none }
    img { border: none; max-100%; }
    input, select, textarea { border: none; outline: none; background: none }
    em,i { font-style: normal }
    h1, h2, h3, h4, h5, h6 { font-weight: normal }
    .jz{ 1200px; margin:0 auto;}
    .clearfix{*zoom:1;}
    .clearfix::after{ clear: both; display: block; height: 0; content: ''; visibility: hidden;}

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

    ie不支持html5标签的解决方案:

    IE9以下不支持H5新标签,用js脚本来让它支持:
    <!--[if lt IE 9]>

    <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

    article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}


    ---------------------------------------------------------------------------------------------------
    垂直居中
    .verticalcenter{
        position: relative;
        top: 50%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    ---------------------------------------------------------------------------------------------------
    wap中的meta:
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    flexible.js
    <meta name="flexible" content="maximum-dpr=1" />

    动画效果:
    transition-property:all; transition-duration:0.5s;

    适应屏幕宽度:
    @media screen and (max-1200px) {
    ---------------------------------------------------------------------------------------------------

    文字截断:

    不太兼容但是可以截断多行:

    .nowrap { display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:1; 
    }
    .nowrap2 { display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2; 

    }
    .nowrap3 { display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:3; 

    }
    .nowrap4 { display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:4; 

    }

    常用的一种可兼容但是只截断一行:

    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; -webkit-line-clamp:1;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;  -webkit-line-clamp:1;

    Jquery方法:

    $(function() {
                    $(".head-pic .user-name").each(function() {
                        var maxwidth = 4;
                        if ($(this).text().length > maxwidth) {
                            var b = $(this).children().is("a");
                            if (b) {
                                $(this).children().text($(this).children().text().substring(0, maxwidth) + "...");
                            } else {
                                $(this).text($(this).text().substring(0, maxwidth));
                                $(this).text($(this).text() + "..");
                            }
                        }
                    });
                });


    css方法:
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis; // IE
    -o-text-overflow: ellipsis; //Opera
    -icab-text-overflow: ellipsis; //iCab
    -khtml-text-overflow: ellipsis;  //Konqueror Safari
    -moz-text-overflow: ellipsis;  //Firefox,mozilla
    -webkit-text-overflow: ellipsis;    //Safari,Swift 
    <a href="javascript:history.go(-1)"></a>
    ---------------------------------------------------------------------------------------------------              
    swiper常用的参数
       
    pagination: '.swiper-pagination',
    slidesPerView: '3',
    paginationClickable: true,
    spaceBetween: 8,
    initialSlide :2,               
    ---------------------------------------------------------------------------------------------------
    css代码:

    .ovfHiden{overflow: hidden;height: 100%;}

    jquery:
      $(".header_right").click(function(){
            $('html,body').addClass('ovfHiden'); //使网页不可滚动
            $(".searchbox").show();
        })
        $(".yg-close").click(function(){
            $('html,body').removeClass('ovfHiden'); //使网页恢复可滚
            $(".searchbox").hide();
        }) 
    ---------------------------------------------------------------------------------------------------

    select跳转

    第一种:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>select加链接</title>
    </head>
    <body>
    <script language=javascript>
    <!--
    // open the related site windows
    function mbar(sobj) {
    var docurl =sobj.options[sobj.selectedIndex].value;
    if (docurl != "") {
       open(docurl,'_blank');
       sobj.selectedIndex=0;
       sobj.blur();
    }
    }
    //-->
    </script>
    <select onchange=mbar(this) name="select">
    <option selected>=== 合作伙伴 ===</option>
    <option
    value="http://www.baidu.com">百度</
    option>
    <option value="http://www.163.com">网易</option>
    <option value="http://www.flash8.net/">闪吧</option>
    </select>
    </body>
    </html>

    第二种:
    <select name="pageselect" onchange="self.location.href=options[selectedIndex].value" >
    <option value="http://www.baidu.com">百度</option>
    <option value="http://www.163.com">网易</option>
    </select>

    第三种:
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>select选择-按钮跳转</title>
    <script type="text/javascript">
    function setsubmit()
    {
    if(mylink.value == 0)
    window.location='http://www.baidu.com';
    if(mylink.value == 1)
    window.location='http://www.163.com';
    if(mylink.value == 2)
    window.location='http://www.sina.com';
    }
    </script>
    </head>
    <body>
    <select name="mylink" id="mylink">
    <option value="0">百度</option>
    <option value="1">网易</option>
    <option value="2">新浪</option>
    </select>
    <input type="button" id="btn" value="提交" onclick="setsubmit(this)" />
    </body>
    </html>
    ---------------------------------------------------------------------------------------------------
  • 相关阅读:
    flume sink两种类型 file_rool 自定义sing com.mycomm.MySink even if there is only one event, the event has to be sent in an array
    为什么引入进程20年后,又引入线程?
    As of Flume 1.4.0, Avro is the default RPC protocol.
    Google Protocol Buffer 的使用和原理
    Log4j 2
    统一日志 统一订单
    网站行为跟踪 Website Activity Tracking Log Aggregation 日志聚合 In comparison to log-centric systems like Scribe or Flume
    Percolator
    友盟吴磊:移动大数据平台的架构、实践与数据增值
    Twitter的RPC框架Finagle简介
  • 原文地址:https://www.cnblogs.com/NatChen/p/6420498.html
Copyright © 2011-2022 走看看