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

吐槽

因为项目,不得已学习了一下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设置样式
【Html记录一些有用的小技巧持续更新.....】这个属性会引起标签之间留下空隙,只需要设置父亲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 = https://www.it610.com/article/count_base + ttip_base; t=setTimeout("timeCountDown()", 1000); } else { where_base.value = https://www.it610.com/article/tip_base; where_base.disabled=false; //where_base.removeAttribute("disabled") } }

中断倒计时的代码