html基础技巧:点击、placeholder、文本、字体、清楚浮动

点击处理:

消除a标签点击后的边框,颜色(background:#fff)
 1:a:focus{outline:none;}
button去除边框
 1:border:none
 2:border:0px(不建议)
 3:button::after {
  content: none;
 }

伪类清楚浮动:

.float:after {
  content: " ";
  display: table;
}
.float:after {
  clear: both;
}

 placeholder样式修改

input::-webkit-input-placeholder {
       color: #aab2bd;
       font-size: 12px;
}

文本处理:

单行文本溢出省略号结尾。需要做不换行处理+(white-space: nowrap;给定宽度)

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

超过两行用省略号代替 -webkit-line-clamp控制(火狐不支持)( -moz-appearance

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

字体处理:
字体大小:font-size:16px;<!--默认16px-->
字体间距:letter-spacing:2px;
字体:font-family:"NSimSun"
字体粗细:font-weight:bloder;
normal:默认值;bold:粗体字符;bolder:更粗的字符;
数字表示:100~900的整百数;400 等同于 normal,而 700 等同于 bold。

 虚线

border-top:1px black dashed;"
border-bottom:1px dotted black
border-bottom:1px solid black

rgba的兼容

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);

第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。

这个颜色“#19ffffff”是由两部分组成的。

第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.10.9每个数字对应一个IEfilter值。

第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff;就是白色。

div在不设置宽度的情况下,会自动适屏,但想让div宽度随内容变化, 加上display: inline-block;就可以了

此随笔会不定期得更新,整合一些技巧,供自己和大家学习使用

原文地址:https://www.cnblogs.com/naturl/p/9419416.html