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前端學習乾貨，各類框架都有整理，送給每一位前端小夥伴，想要獲取的能夠關注個人頭條號並在後臺私信我：前端，便可免費獲取