2019.5.14前端小总结

字数 109阅读 10

一 给文字加下划线

1 使用text-decoration属性

text-decoration: underline;

2 使用border-bottom属性

border-bottom-style:solid;

效果图


二 在文本框内加提示用图标/文字

文本框使用相对定位

.input{
  position: relative;
}

提示图标/文字使用绝对定位

.tip{
      position: absolute;
      right: px2rem(18);
      bottom: px2rem(10);
}

效果


引用

https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration

https://developer.mozilla.org/zh-CN/docs/Web/CSS/border#HTML

https://c.runoob.com/front-end/61 在线网页编辑器,Mozilla 打造的Thimble