^

lyonghu.com

Stay hungry,Stay foolish,Stay young

刘勇虎的官方网站

网站内容包含iOS开发、web前端、服务器开发、Python开发、Android开发、网站维护等技术文章。专注于分享技术经验，职业心得体会，IT优秀文章与教程创作。

常用CSS样式处理方案

居中

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

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

省略号

p {
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   }
  1. 伪元素中的伪类使用
a:hover::after{  

}
  1. input中 maxlength 的使用，type=number的时候maxlength不生效,应使用type=text
  1. input占位字体颜色设置
::-webkit-input-placeholder {
    color: #D5C7FF;
}

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

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;
}

消除锯齿

{
    -webkit-font-smoothing: antialiased;
    -webkit-transform: rotate(5deg) translateZ(0);
}
1.本站所有文章除特殊声明外均为原创，未经允许禁止转载!
2.站内文章如有侵权异议，请与我联系，我将在确实后处理！
换个声音
停止播放