Html记录一些有用的小技巧持续更新.....

吐槽

因为项目,不得已学习了一下html语言,研究了一个多星期,然后边学边写项目,真是哔了狗了,一个项目下来,各种查,各种问,发现这门语言语法什么的有些是太随意了,感觉又是**,严谨一点就好了,省的还有研究一堆特殊情况.

以下是个人工作中积累的一些东西,毕竟是学习没多久,欢迎轻拍

1, 让整个空间上下左右居中

让div相对于第一个position不是static的父亲垂直水平居中

div{
    position: absolute;
    height: 8.58rem;
    width: 8rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

2, 神奇的 display: inline-block;和 text-align: center;

我们知道text-align是有继承性的,也就是父亲设置了,儿子也会继承这个属性,当父亲设置了这个属性,如果儿子是 display: inline-block;的话,不仅儿子里的文字会居中(继承来的),儿子本身也会相对于父亲水平居中.

.father{
   text-align: center
}
.father .son{
display: inline-block;
}

3, display: inline-block引发的问题

这个属性会引起标签之间留下空隙,只需要设置父亲font-size:0

.father{
   font-size:0
}
.father .son{
display: inline-block;
/*
font-size:  这里再设置自己想要的size
*/
}

4, 给input标签的placeholder设置样式

这个属性会引起标签之间留下空隙,只需要设置父亲font-size:0

::-webkit-input-placeholder { /* WebKit browsers */
    color:  #c1c1c1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #c1c1c1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #c1c1c1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:   #c1c1c1;
}

5, button 标签显示倒计时

让一个input type=”button”点击后显示倒计时

var where_base,/*button按钮*/
tip_base,/*倒计时结束button显示的文字*/
count_base = 120,/*倒计时多少秒*/
ttip_base="s";/*倒计时过程中显示的文字*/
var t;/*为了能中断倒计时*/
function timeCountDown() {
/*console.log(count_base);*/

    if (count_base > 0) {
        where_base.disabled=true;
      //  where_base.setAttribute("disabled", true);
        count_base--;
        where_base.value = count_base + ttip_base;
         t=setTimeout("timeCountDown()", 1000);
    } else {
        where_base.value = tip_base;
        where_base.disabled=false;
        //where_base.removeAttribute("disabled")
    }
}

中断倒计时的代码

 clearTimeout(t);
 where_base.disabled = false;//这里终断后让button再次可点击