常用CSS样式处理方案

1.居中

(1).利用div与line-height使文本居中.
{
  height: 44px;
  line-height: 44px;
}
(2).标签居中

{
  display:flex;
  align-items: center;
  flex-direction:column;
  justify-content:center;
}

2.省略号

p {
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   }

3.伪元素中的伪类使用

a:hover::after{  

}

4.input中 maxlength 的使用,type=number的时候maxlength不生效,应使用type=text

5.input占位字体颜色设置

::-webkit-input-placeholder {
    color: #D5C7FF;
}

::-ms-input-placeholder {
    color: #D5C7FF;
}

6.css选择第N个类的标签
htm代码

  <body>
    <img class="crcleLine" src="img/线圈@3x.png"/>
    <img class="crcleLine" src="img/线圈@3x.png"/>
  </body>

css代码


img.crcleLine {
    width: 8px;
    height: 75px;
    position: absolute;
}


body>img:nth-of-type(1) {
    left: 36px;
    top: 945px;
}

body>img:nth-of-type(2) {
    right: 36px;
    top: 945px;
}


img.crcleLine {
    width: 8px;
    height: 75px;
    position: absolute;
}

img.crcleLine:nth-of-type(1) {
    left: 36px;
    top: 945px;
}


img.crcleLine:nth-of-type(2) {
    right: 36px;
    top: 945px;
}

本站所有文章除特殊声明外均为原创,未经允许禁止转载!
换个声音
停止播放