• 常用的代码,实用


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

    初始化:
    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>
    ---------------------------------------------------------------------------------------------------
  • 相关阅读:
    第二次上机
    第二次作业
    第一次上机
    第一次作业
    第3次上机作业
    第四周作业
    第二次上机作业(第四周)
    第三周作业
    第一次上机作业
    第一次JAVA作业
  • 原文地址:https://www.cnblogs.com/NatChen/p/6420498.html
Copyright © 2020-2023  润新知