1、圆角按钮button点击后出现矩形框线

错误示例css

解决方式：前端

{outline：none}

解决以后的正确示例程序员

二：图标引用方法混乱

方法1

@font-face {
    font-family: ccy;
    src: url("../font/fontAbout/iconfont.woff");
    src: url("../font/fontAbout/iconfont.ttf");
}
span{
   font-family:ccy
}

<span>&xe9b2</span>

其中@font-face 在自定义字体以便之后引用，后缀名为woff即为火狐浏览器适配，后缀名为tff即为谷歌浏览器适配文件web

方法2：浏览器

<head>
  <link rel="stylesheet" href="../font/fontAbout/iconfont.css">
  </head>
  <body>
  <span class="iconfont icon-twitter"></span>

ps:字体库路径不能错误框架

3、固定定位显示问题

设定position:fixed后,红圈部分被覆盖错误示例：学习

解决方法：给下面的第一个部分设置margin-top:(nav高度)便可正确示例：字体

4、选择器问题

伪类选择器过于复杂url

解决方法：给每一个大类取名字，小的用伪类选择器spa

5、按钮旋转抖动问题

错误示例：在选中按钮时旋转后依旧是选中状态出现抖动

解决方法：给按钮外面加一个正方形div，用他控制按钮的旋转

6、placeholder颜色问题

input::-webkit-input-placeholder{
    color: #213869;
    margin-left: 20px;
    font-size: 25px;
}
::-moz-placeholder{
    color: #213869;
    font-size: 18px;
    opacity: 1;/*这里以前是没有的，发现问题后才加上去的*/
}

火狐浏览器的适配器须要加一个透明度设置才能显示出来

我本身是一名从事了多年开发的web前端老程序员，目前辞职在作本身的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各类框架都有整理，送给每一位前端小伙伴，想要获取的能够关注个人头条号并在后台私信我：前端，便可免费获取