WebHabilidades maravillosas

WebHabilidades maravillosas

Reimpreso del breve libro "i_ 木木 木木 木"

Uno, el texto se vuelve más que oculto ...

    white-space: nowrap;   //强制不换行
    text-overflow: ellipsis;  //超出变省略号
    overflow: hidden;  //超出隐藏
    word-wrap: break-word; //英文单词换行

En segundo lugar, efecto de animación CSS3 @keyframes

    01：鼠标悬浮背景变化
    .load-more:hover{
        animation:change .5s ease-in;
    }
    @keyframes change{
        0%,20%{opacity:0.25;}
        30%,50%{opacity:0.55;}
        60%,80%{opacity:0.75;}
        90%,100%{opacity:1;}
    }

    02：3D旋转
    .earth-round{
        -webkit-animation:earthmove 2s linear both infinite;
    }
    @keyframes earthmove{
        to{transform:rotateY(360deg)translateZ(20px)};
    }

    03：360度旋转
    .earth-round{
        -webkit-animation:earthmove 2s linear both infinite;
    }
    @-webkit-keyframes earthmove{
        0% {-webkit-transform:rotate(0deg);}
        50% {-webkit-transform:rotate(180deg);}
        100% {-webkit-transform:rotate(360deg);}
    }

Tres Clearfix flotante transparente

    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{*+height:1%;}

Cuatro, no importa cuántos textos estén centrados verticalmente (método de posicionamiento)

    //Html 
    <div class="middle-box">
        <div class="middle-inner">
            <p>前端开发博客，专注前端开发和web教程前端开发博客</p>
        </div>
    </div>

    //css
    .middle-box{
        display:table; 
        height: 300px; 
        border:1px solid #ff0000; 
        width:400px; 
        margin:0 auto; 
        position:relative;
    }
    .middle-inner{
        display: table-cell; 
        vertical-align:middle; 
        *position:absolute; 
        *top:50%; *left:50%; 
        width:100%; 
        text-align:center;
    }
    .middle-inner p{
        position:relative; 
        *top:-50%; 
        *left:-50%;
    }

Cinco, restablecimiento del color del marcador de posición de entrada del navegador

input::-webkit-input-placeholder { 
    /* WebKit, Blink, Edge */
    color: #fff;
}
input:-moz-placeholder { 
    /* Mozilla Firefox 4 to 18 */
    color:  #fff;
}
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */
    color:  #fff;
}
input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color:  #fff;
}

Seis, entrada personalizada de CSS [type = "checkbox"]

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, textarea, button {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  outline: none;
  border-radius: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-appearance: none;
  -webkit-overflow-scrolling: touch;
  @media only screen and (min-width: 1200px) {
    cursor: none !important;
  }
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a:hover, a:active {
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

Siete, directrices CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, textarea, button {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  outline: none;
  border-radius: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-appearance: none;
  -webkit-overflow-scrolling: touch;
  @media only screen and (min-width: 1200px) {
    cursor: none !important;
  }
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a:hover, a:active {
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

Ocho, solo se permite ingresar números enteros positivos / tamaño de número especificado

    οnkeyup="this.value=this.value.replace(/\D/g,'')" 
    onafterpaste="this.value=this.value.replace(/\D/g,'')"
    //规定允许输入大小值
    $('.threety').on('keyup',function(){
        var v = parseInt($(this).val(), 10);
        if( v > 30){
            $(this).val(30);
        }
    });

Nueve, JS encuentra rápidamente la suma de la matriz

    eval(arry.join('+'));

Enlace original