<noframes id="x999x"><form id="x999x"><th id="x999x"></th></form>

<p id="x999x"></p>

<form id="x999x"></form><address id="x999x"><listing id="x999x"><menuitem id="x999x"></menuitem></listing></address>
    <span id="x999x"><th id="x999x"><progress id="x999x"></progress></th></span>
      <form id="x999x"></form>

      千鋒教育-做有情懷、有良心、有品質的IT職業教育機構
      報名咨詢 0元入學 助學貸款 視頻下載 在線公開課 咨詢熱線400-186-9990
      當前位置: 首頁  >  行業動態  > 正文

      HTML+CSS樣式中如何找bug

      時間:2020-11-30 18:08     來源:千鋒教育    作者:qyf
      分享:

        相信有很多剛進入web前端的小伙伴,在剛進入工作的時候很容易寫錯頁面,這個時候我們就需要進行一個自行檢查的過程,看看頁面是否有沒有bug出現,有的小伙伴會仔細對比網上的代碼,這樣會比較耽誤時間,而且很容易陷入自己是思維出不來,發現不了問題的所在。

        下面小編就教大家如何快速的查找錯誤及解決問題。其實,咱們的瀏覽器就有控制臺及一些輔助工具等幫助我們查找錯誤,在這里我使用的Chrome(谷歌瀏覽器)的控制臺來進行錯誤的查找。打開控制臺方式有兩種,一種在瀏覽器中點擊鼠標右鍵,選擇檢查,如下圖:

      1

        另一種,直接通過快捷鍵F12(如果F12不行,可以試一下Fn+F12),調出來控制臺。

      2

        好了,了解完這些以后,我們來看一下都有哪些錯誤,以及如何通過控制臺查看錯誤進行改。

        先寫一個比較簡單的效果,寫一個div標簽,給這個div寫一個寬200px,高100px,背景顏色為粉色

        HTML結構

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" type="text/css" href="./css/style.css"/>
      <title></title>
      </head>
      <body>
      <div></div>
      </body>
      </html>

        CSS樣式

        div{width: 200px; height: 100px; background-color: pink;}

      3

        上面是想象中的樣子,。但實現效果上可能是這樣的:

      4

        出現問題的時候,穩住別慌,通過控制臺查看一下,首先看一下css樣式有沒有引入成功,上面說到過控制臺左邊為html標簽,右邊是css屬性,我們先選中div看一下右邊有沒有寫的css屬性

      5

        1、在這里看到右邊css那里沒有我們寫的寬高背景顏色,一種可能是我們css沒有引入成功,如果使用的是外部樣式表,可以去查一下自己寫的路徑對不對;如果路徑不對,一般在控制臺會顯示一個紅色的×,如下圖:

      6

        2、另一種可能我們寫的這個標簽的css修飾前多寫了標點符號。如下圖:

      7

        3、那如果我們在這里使用了class選擇器、id選擇器或者其他的選擇器,要注意選擇器的使用及名字的設置。不然也會出現顯示不了咱們的css修飾。

      7

      8

        4、好了,在往下看,如果css還是沒有出來,就看一下單詞是否拼對、屬性和屬性值是否匹配。單詞不對,或屬性和屬性值不匹配那么控制臺的css屬性前面會出現一個黃色的感嘆號,并且會把錯誤的屬性劃掉,如下圖,這個時候就需要你查一下單詞和屬性了。

      10

        5、還有我們在網頁導航的時候會給導航項加邊框,代碼如下:

        HTML結構:

      <ul class="nav"><li class="noborder">首頁</li><li>首頁</li><li>首頁</li><li>首頁</li><li>首頁</li></ul>

        CSS樣式:

        *{margin: 0; padding: 0;}

        ul,li{list-style: none;}

        .nav{width: 505px; margin: 50px auto;}

        .nav li{

        float: left;

        text-align: center;

        line-height: 30px;

        width: 100px;

        height: 30px;

        background-color: #ccc;

        border-left: solid 1px #333;

        }

        .noborder{border-left: 0;}

        我們要取消個或者后一個的邊框,我們給個或后一個li加class名取消邊框,發現取消不了,而且屬性和屬性值檢查了一遍是對的,在控制臺中也顯示了,只不過被劃掉了(注意只是劃掉,但沒有黃色感嘆號),這個時候可能是選擇器權重不夠

      12

        那么我們可以通過包含選擇題增加權重,找到父元素的class名,添加到前面就可以

        css代碼修改

        .nav .noborder{border-left:0}

        這樣就解決了。

        后總結一下:

        沒有相應CSS屬性,查引入路徑或看選擇符前是否多加標點

        控控制臺出現感嘆號并且被劃掉,單詞拼寫錯誤或屬性屬性值不匹配

        控控制臺出現屬性被劃掉但沒有感嘆號,權重不夠

        再有前端的小伙伴遇到了上述幾種錯誤,可以嘗試通過上面的方式去解決一下,這些問題一般都是常見的,遇到幾次解決之后注意避免就可以啦~

      相關文章

      上一篇:報一個java開發培訓班靠譜嗎
      下一篇:
      • 北京總部地址:北京市海淀區寶盛北里西區28號中關村智誠科創大廈4層
        北京沙河校區:北京市昌平區沙陽路18號北京科技職業技術學院廣場服務樓
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 深圳校區地址:深圳市寶安區寶安大道5010號西部硅谷B座A區6層A605/B座C區1層108
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 上海校區地址:上海市寶山區同濟支路199號智慧七立方3號樓2-4層
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 廣州校區地址:廣州市白云區永平街永泰學山塘學山文化創意谷A1棟六樓
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 鄭州二七區校區地址:鄭州市二七區航海中路60號海為科技園C區10層
        鄭州高新區校區地址:鄭州市高新區金梭路與銀杏路交叉口教育科技產業園南門D座4層
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 大連校區地址:遼寧省大連市高新園區愛賢街10號大連設計城A座901
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 武漢金融港校區地址:武漢市東新區光谷大道77號金融港B18棟三樓
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 成都校區地址:成都市高新區肖家河沿街138號肖家河大廈三樓
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 西安校區地址:西安市雁塔區高新六路52號立人科技C座西區4樓
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 杭州旺田校區:浙江省杭州市江干區九堡旺田書畫城A座4層
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 青島校區地址:青島市市北區龍城路31號卓越世紀中心4號樓5層
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 重慶校區地址:重慶市高新區科園一路2號大西洋國際12-1
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 長沙校區地址:湖南省長沙市岳麓區麓谷企業廣場A2棟三單元306號
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 哈爾濱校區地址:哈爾濱市松北區世澤路689號 科技創新城4號樓1101
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 南京校區地址:南京市建鄴區應天大街780號弘輝產業園1棟2層
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 太原校區地址:太原市小店區長治路230號能源互聯網大廈6層
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 沈陽校區地址:遼寧省沈陽市渾南區世紀路16號東大軟件園B園B1座A201
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 合肥校區地址:合肥市包河區徽州大道396號東方廣場B座12A
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數據+人工智能培訓、智能物聯網+嵌入式培訓、Unity游戲開發培訓、Go語言開發培訓、PHP全棧+服務器集群培訓、網絡安全培訓、互聯網營銷培訓、好程序員
        認證課程:軟考、Adobe認證、PMP認證、紅帽RHCE認證
      • 千鋒教育服務號

        了解千鋒動態
        關注千鋒教育服務號

      • 千鋒教育移動站

        掃一掃快速進入
        千鋒移動端頁面

      • 千鋒互聯服務號

        掃碼匿名提建議
        直達CEO信箱

      [an error occurred while processing the directive] 精品久久