2015-07-11 40 views
0

我是新來的html,所以請原諒愚蠢的問題。 我有這個頁面在這裏:HTML中的奇怪像素img

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset = "UTF-8"> 

    <style type = text/css> 
     #topbar 
     { 
      position: absolute; 
      top: 0; 
      left: 0; 
      height: 80px; 
      width:100%; 
      background-color:black; 
      border-style: solid; 
      border-bottom-color: mediumaquamarine; 
      border-bottom-width: thin; 
     } 
     #login 
     { 
      position:fixed; 
      top: 20px; 
      left: 92%; 
     } 
     #latestItems 
     { 
      position: fixed; 
      height:90%; 
      width: 100%; 
      top: 100px; 
      background-color:white; 
      border: 2px; 
      border-color: black; 
     } 
     #tabs 
     { 
      position: fixed; 
      top: 30px; 
      left: 150px; 
     } 
     #tabs_search 
     { 
      position: relative; 
     } 
     #tabs_search:hover 
     { 

     } 
     #tabs_lists 
     { 
      position: relative; 
      left: 40px; 
     } 
     #tabs_cart 
     { 
      position: relative; 
      left: 80px; 
     } 
     #tabs_home 
     { 
      position: relative; 
      left: 120px; 
     } 
     #tabs_profile 
     { 
      position: relative; 
      left: 160px; 
     } 
    </style> 
</head> 
<body> 
    <header id = topbar> 
     <img id = logo src = "logo.png" width = 4% heigth = 4% href = "index.html"></img> 

     <a id = "login" href = "https://steamcommunity.com/login/home/?goto=0"> 
      <img src="http://www.tf2wh.com/img/sits.png" width = 120 height = 50> 
     </a> 
     <div id = tabs> 
      <a href = "search.html", title = "browse items"> 
       <img id = tabs_search src = "search.png" width = 2% height = 2% ></img> 
      </a> 
      <a href = "lists.html" title = "list items"> 
       <img id = tabs_lists src = "lists.png" width = 2% height = 2% ></img> 
      </a> 
      <a href = "shopping_cart.html" title = "my cart"> 
       <img id = tabs_cart src = "cart.png" width = 2% height = 2% ></img> 
      </a> 
      <a href = "index.html" title = "return home"> 
       <img id = tabs_home src = "home.png" width = 2% height = 2% ></img> 
      </a> 
      <a href = "my_profile.html" title = "profile"> 
       <img id = tabs_profile src = "profile.png" width = 2% height = 2% ></img> 
      </a> 
     </div> 
    </header> 
</body> 

它看起來不錯,但我在第一個3個圖像和紫色像素4號一個(「標籤」內的圖像)的底部得到藍色像素。它們在點擊時變成紅色,我不知道爲什麼...

+0

你能後的截圖? – koljanep

回答

0

嗨,我已檢查您的html代碼。你不需要完成img標籤。該行是因爲駐定標籤的文字裝飾

a{ 
       text-decoration:none; 
       } 

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset = "UTF-8"> 
 

 
    <style type = text/css> 
 
     a{ 
 
      text-decoration:none; 
 
      } 
 
     #topbar 
 
     { 
 
      position: absolute; 
 
      top: 0; 
 
      left: 0; 
 
      height: 80px; 
 
      width:100%; 
 
      background-color:black; 
 
      border-style: solid; 
 
      border-bottom-color: mediumaquamarine; 
 
      border-bottom-width: thin; 
 
     } 
 
     #login 
 
     { 
 
      position:fixed; 
 
      top: 20px; 
 
      left: 92%; 
 
     } 
 
     #latestItems 
 
     { 
 
      position: fixed; 
 
      height:90%; 
 
      width: 100%; 
 
      top: 100px; 
 
      background-color:white; 
 
      border: 2px; 
 
      border-color: black; 
 
     } 
 
     #tabs 
 
     { 
 
      position: fixed; 
 
      top: 30px; 
 
      left: 150px; 
 
     } 
 
     #tabs_search 
 
     { 
 
      position: relative; 
 
     } 
 
     #tabs_search:hover 
 
     { 
 

 
     } 
 
     #tabs_lists 
 
     { 
 
      position: relative; 
 
      left: 40px; 
 
     } 
 
     #tabs_cart 
 
     { 
 
      position: relative; 
 
      left: 80px; 
 
     } 
 
     #tabs_home 
 
     { 
 
      position: relative; 
 
      left: 120px; 
 
     } 
 
     #tabs_profile 
 
     { 
 
      position: relative; 
 
      left: 160px; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <header id = topbar> 
 
     <img id = logo src = "logo.png" width = 4% heigth = 4% href = "index.html"> 
 

 
     <a id = "login" href = "https://steamcommunity.com/login/home/?goto=0"> 
 
      <img src="http://www.tf2wh.com/img/sits.png" width = 120 height = 50> 
 
     </a> 
 
     <div id = tabs> 
 
      <a href = "search.html", title = "browse items"> 
 
       <img id = tabs_search src = "search.png" width = 2% height = 2% > 
 
      </a> 
 
      <a href = "lists.html" title = "list items"> 
 
       <img id = tabs_lists src = "lists.png" width = 2% height = 2% > 
 
      </a> 
 
      <a href = "shopping_cart.html" title = "my cart"> 
 
       <img id = tabs_cart src = "cart.png" width = 2% height = 2% > 
 
      </a> 
 
      <a href = "index.html" title = "return home"> 
 
       <img id = tabs_home src = "home.png" width = 2% height = 2% > 
 
      </a> 
 
      <a href = "my_profile.html" title = "profile"> 
 
       <img id = tabs_profile src = "profile.png" width = 2% height = 2% > 
 
      </a> 
 
     </div> 
 
    </header> 
 
</body> 
 
</html>

2

這是因爲默認情況下錨點會被加下劃線,並且您已將圖像包裹在錨點中。

添加

a { 
    text-decoration: none; 
} 

你的CSS將其刪除。

藍色是標準鏈接顏色,紫色是訪問鏈接,紅色是瀏覽器默認樣式中鏈接的活動狀態。

如果頁面上還有其他錨點需要爲您保留下劃線,則應該爲包含圖像的類添加一個類並分別設置其類型。