2016-12-11 16 views
1

我有一個樣式表,旨在創建一個整潔的菜單,它的效果很好。問題是我需要將此菜單移動到需要不同樣式元素的網頁中。 編輯!當樣式表由新頁面加載時,它將它們完全擰緊!將樣式應用於整個頁面是非啓動器!這是整個問題在這裏......css - 從外部樣式錶轉換爲內聯;不知道一些「下拉」風格去哪裏

因爲我們顯然沒有能力「範圍」有效(併爲大家服務,對吧?),或者如果我們這樣做,我沒有發現如何.. 。所以我想我只是將樣式轉移到各個元素上,問題是我沒有看到這些樣式中的某些應該去哪裏!

指向一個很好的參考,有助於澄清這將是偉大的,或只是一些項目去哪裏工作的意見!

這裏是CSS - 它相當短!我已經刪除了我已經知道哪裏去...

.dropbtn 
{ 
    display: inline-block; 
    color: white; 
    text-align: left; 
    padding: 8px 16px; 
    text-decoration: none; 
} 
.dropdown:hover .dropbtn 
{ 
    background-color: #111; 
} 
li.dropdown 
{ 
    display: inline-block; 
} 
.dropdown-content 
{ 
    display: none; 
    position: absolute; 
    background-color: navy; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 
.dropdown-content a 
{ 
    color: white; 
    padding: 8px 16px; 
    text-decoration: none; 
    display: block; 
    text-aligh: left; 
} 
.dropdown-content a:hover 
{ 
    background-color: blue; 
} 
.dropdown:hover .dropdown-content 
{ 
    display: block; 
} 

這裏的原始菜單 - 編輯名稱以保護有罪!

<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden; 
    background-color: navy;" > 
    <li class="dropdown" style="float:left;"> 
    <a href="http://example.com/first.html" class="dropbtn"> 
     First Pulldown</a> 
     <div class="dropdown-content"> 
     <a href="http://example.com/1st1st.html">1st pulldown, 1st item</a> 
     </div> 
    </li> 
    <li class="dropdown" style="float:left;"> 
    <a href="http://example.com/second.html" class="dropbtn"> 
     Second Pulldown</a> 
     <div class="dropdown-content"> 
     <a href="http://example.com/2nd1st.html">2nd pulldown, 1st item</a> 
     </div> 
    </li> 
    <li class="dropdown" style="float:left;"> 
    <a href="http://example.com/fourth.html" class="dropbtn"> 
     Fourth Pulldown</a> 
     <div class="dropdown-content"> 
     <a href="http://example.com/4th1st.html">4th pulldown, 1st item</a> 
     </div> 
    </li> 
    <li style="float:right" class="dropdown"> 
    <a href="http://example.com/fifth.html" class="dropbtn"> 
     Fifth Pulldown</a> 
     <div class="dropdown-content"> 
     <a href="http://example.com/5th1st.html">5th pulldown, 1st item</a> 
     </div> 
    </li> 
</ul> 

...我不知道如何設置像「懸停」這樣的內容的樣式!

感謝您的指點。

+0

「完全擰緊」 - 如何?這些頁面與當前工作的頁面如此不同,HTML的外觀如何? – Jhecht

+0

@Jhecht ...特別是,正如我注意到下面的亞歷山大,列表是畸形的。在到達行尾之前,它們是水平的而不是垂直的,然後用下一個列表元素開始一個新行。還有一些其他輕微的擰緊。 ......如下所述,我找到了一個解決方案;儘可能多地將內聯樣式格式 - 僅用於菜單,介意您 - 並將其從樣式表中移除,並繼續使用這兩種格式。我不知道如何指定的更隱晦的樣式功能仍然保留在樣式表中。有用! –

+0

我不能特別說我同意這個解決方案,但是如果它有效的話。我真的不理解你爲什麼不使用不同的類名來表示不是水平定向的列表。 – Jhecht

回答

2

快速解決方案,把所有的CSS的HTML裏面不內聯,但在風格標籤和從樣式表文件中刪除樣式:

<style> 
    .dropbtn 
{ 
    display: inline-block; 
    color: white; 
    text-align: left; 
    padding: 8px 16px; 
    text-decoration: none; 
} 
.dropdown:hover .dropbtn 
{ 
    background-color: #111; 
} 
li.dropdown 
{ 
    display: inline-block; 
} 
.dropdown-content 
{ 
    display: none; 
    position: absolute; 
    background-color: navy; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 
.dropdown-content a 
{ 
    color: white; 
    padding: 8px 16px; 
    text-decoration: none; 
    display: block; 
    text-aligh: left; 
} 
.dropdown-content a:hover 
{ 
    background-color: blue; 
} 
.dropdown:hover .dropdown-content 
{ 
    display: block; 
} 
</style> 

<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden; 
    background-color: navy;" > 
    <li class="dropdown" style="float:left;"> 
    <a href="http://example.com/first.html" class="dropbtn"> 
     First Pulldown</a> 
     <div class="dropdown-content"> 
     <a href="http://example.com/1st1st.html">1st pulldown, 1st item</a> 
     </div> 
    </li> 
    <li class="dropdown" style="float:left;"> 
    <a href="http://example.com/second.html" class="dropbtn"> 
     Second Pulldown</a> 
     <div class="dropdown-content"> 
     <a href="http://example.com/2nd1st.html">2nd pulldown, 1st item</a> 
     </div> 
    </li> 
    <li class="dropdown" style="float:left;"> 
    <a href="http://example.com/fourth.html" class="dropbtn"> 
     Fourth Pulldown</a> 
     <div class="dropdown-content"> 
     <a href="http://example.com/4th1st.html">4th pulldown, 1st item</a> 
     </div> 
    </li> 
    <li style="float:right" class="dropdown"> 
    <a href="http://example.com/fifth.html" class="dropbtn"> 
     Fifth Pulldown</a> 
     <div class="dropdown-content"> 
     <a href="http://example.com/5th1st.html">5th pulldown, 1st item</a> 
     </div> 
    </li> 
</ul> 

,我喜歡用另一種解決方案是Mailchimp CSS內聯工具。它採用你的樣式表,並自動將所有CSS樣式內聯。您只需從樣式表中刪除CSS樣式,然後像平常一樣將樣式表與剩餘的CSS樣式一起包含。我把你的CSS和HTML放在那裏,這是輸出。讓我知道,如果任何兩個工作。

<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden; 
    background-color: navy;"> 
    <li class="dropdown" style="float: left;display: inline-block;"> 
    <a href="http://example.com/first.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;"> 
     First Pulldown</a> 
     <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);"> 
     <a href="http://example.com/1st1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">1st pulldown, 1st item</a> 
     </div> 
    </li> 
    <li class="dropdown" style="float: left;display: inline-block;"> 
    <a href="http://example.com/second.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;"> 
     Second Pulldown</a> 
     <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);"> 
     <a href="http://example.com/2nd1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">2nd pulldown, 1st item</a> 
     </div> 
    </li> 
    <li class="dropdown" style="float: left;display: inline-block;"> 
    <a href="http://example.com/fourth.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;"> 
     Fourth Pulldown</a> 
     <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);"> 
     <a href="http://example.com/4th1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">4th pulldown, 1st item</a> 
     </div> 
    </li> 
    <li style="float: right;display: inline-block;" class="dropdown"> 
    <a href="http://example.com/fifth.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;"> 
     Fifth Pulldown</a> 
     <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);"> 
     <a href="http://example.com/5th1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">5th pulldown, 1st item</a> 
     </div> 
    </li> 
</ul> 

你可以在這裏嘗試CSS內嵌工具:https://templates.mailchimp.com/resources/inline-css/

+0

...你的第一個解決方案不是用菜單中使用的樣式來破壞頁面上的所有其他HTML嗎?我很確定這是整個問題!我已經嘗試過包括樣式表,並且把我看過的第一頁 - 和接下來的七頁搞砸了!但如果你說這會有所不同,那是我可以使用的信息! –

+0

哦,等待,你的意思是隻包括那些沒有地方可以內聯的樣式表項目嗎?嗯... –

+0

它應該工作。如果您可以向您的網站添加鏈接或圖片,以便我可以查看您要存檔的內容。如果我找到了你,你需要基於你當前正在查看的網站的不同CSS樣式。我這樣做的方式是給每個頁面獨特的類和id名稱,以便我可以以不同的方式設置每個頁面。例如,div class =「」firstPageClass「,div class =」secondPageClass「。現在同一個div可以有兩個樣式選項,這就是你如何限定CSS的範圍 –

2

你要做的就是把上<ul>一個ID爲你的菜單(S)。做一些類似id="awesomemenu_1"(因爲ID必須是唯一的,如果你想在頁面上包含多個菜單,你必須有一個區別)。

然後,在您的CSS文件中,您以[id^=awesomemenu_] - [id^=awesomemenu_] .dropbtn等等爲前綴指定了所有這些規則。 但是您需要覆蓋現有CSS中的一般規則 - 例如,聽起來像其他一些規則是爲您的<ul>/<li>-項目設置水平或垂直樣式,這不適用於您的菜單。雖然這很容易被覆蓋。

相關問題