• 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;就可以了

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

  • 相关阅读:
    【转】PHP操作MongoDB【NoSQL】
    web前端响应式
    CSS Hack
    ES6特性
    zepto.js使用前注意
    移动端 isScroll自定义实现
    严格模式use strict
    node.js和express.js安装和使用步骤 [windows]
    JSONP理解和使用
    require.js+backbone.js基本使用
  • 原文地址:https://www.cnblogs.com/naturl/p/9419416.html
Copyright © 2020-2023  润新知