我在CSS中的這個選項卡導航中做了什麼錯誤？

-1

在此頁面，您可以看到選項卡目前在顏色爲藍色，但我目前正在與被視爲所有在說我改變了對天然綠色脫機文件工作網站的設計。不幸的是，我不知道我做了什麼，感覺我疲倦的眼睛無法看到的錯誤......無論是在代碼或圖像...

脫機標籤導航問題： http://i255.photobucket.com/albums/hh157/redbairn/Oops_zps240d13a5.jpg

[下面的代碼是用於標籤導航的當前代碼：]

 div.content { 
    border: 3px solid #095; 
    clear: left; 
    padding: 1em; 
    overflow:hidden; 
} 

div.content.inactive { 
    display: none; 
} 

ol#toc { 
    height: 2em; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

ol#toc a { 
    background: #bdf url(tabs.gif); 
    display: block; 
    float: left; 
    height: 2em; 
    padding-left: 10px; 
    text-decoration: none; 
} 

ol#toc a:hover { 
    background-color: #3af; 
    background-position: 0 -120px; 
} 

ol#toc a:hover span { 
    background-position: 100% -120px; 
} 

ol#toc li { 
    float: left; 
    margin: 0 1px 0 0; 
} 

ol#toc li a.active { 
    background-color: #095; 
    background-position: 0 -60px; 
    color: #fff; 
    font-weight: bold; 
} 

ol#toc li a.active span { 
    background-position: 100% -60px; 
} 

ol#toc span { 
    background: url(tabs.gif) 100% 0; 
    display: block; 
    line-height: 2em; 
    padding-right: 10px; 
}

[離線/新的代碼：]

div.content { 
     border: 3px solid #095; 
     clear: left; 
     padding: 1em; 
     overflow:hidden; 
} 

div.content.inactive { 
     display: none; 
} 

ol#toc { 
    height: 2em; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

ol#toc a { 
     color: #008; 
     display: block; 
     float: left; 
     height: 2em; 
     padding-left: 10px; 
     text-decoration: none; 
     background-color: #6c9; 
     background-image: url(tabs.gif); 
} 

ol#toc a:hover { 
     background-color: #0c6; 
     background-position: 0 -120px; 
} 

ol#toc a:hover span { 
    background-position: 100% -120px; 
} 

ol#toc li { 
    float: left; 
    margin: 0 1px 0 0; 
} 

ol#toc li a.active { 
     background-color: #096; 
    background-position: 0 -60px; 
    color: #fff; 
    font-weight: bold; 
} 

ol#toc li a.active span { 
    background-position: 100% -60px; 
} 

ol#toc span { 
    background: url(tabs.gif) 100% 0; 
    display: block; 
    line-height: 2em; 
    padding-right: 10px; 
}

來源

2013-01-13 red_bairn

您應該始終使用版本控制軟件（如git或mercurial）來跟蹤您的更改。 – Cristy

也請在說明問題的問題中添加一些代碼。這樣，當你修復你的網站和/或其他網站的鏈接時，這個問題仍然可以用於未來的訪問者有類似的問題。 – Jeroen

CSS3現在允許使用圓角和漸變，所以你不再需要這些圖像的標籤。 – Cristy

我認爲它的圖像。雖然將背景顏色設置爲透明是正確的，但圖像本身看起來像是白色背景。在編輯器中打開圖像，您會注意到圖像中的白色背景。我認爲如果你從圖像中刪除所有東西都會很好看！

希望這可以幫助你！

只是一個很快的FYI，在像IE5這樣的舊版瀏覽器中，透明效果並不理想。

來源

2013-01-13 22:04:01 FrostyFire

你在說什麼？永遠不要忘記IE5是一個漫長的死亡和隱藏的瀏覽器，但只要在32位圖像上不是* alpha透明度*，透明渲染圖像就沒有問題。您可以在8位PNG上獲得alpha透明度，並且它可以一直工作到至少IE4（它不會像使用適當的alpha透明度支持那樣漂亮）！ http://www.sitepoint.com/png8-the-clear-winner/ – cimmanon

感謝您評論任何人，但確實在某些透明圖片背後有某種背景的情況下，它不會呈現正確。我已經體驗了我的自我。 – FrostyFire

如果您遇到不正確顏色的光暈，那是因爲您爲圖像選擇了錯誤的無光澤顏色。現在假設其他人都在爲14年前的瀏覽器編碼，這有點晚。大多數人沒有*舊車。 – cimmanon

我在CSS中的這個選項卡導航中做了什麼錯誤？

回答

相關問題