在所有頁面上插入菜單選項卡 - HTML＆CSS

我想知道是否有任何方法可以將HTML代碼插入網站的所有其他頁面，而不會丟失文件的CSS設計。我試過使用，但太亂了。我想知道是否有更簡單的方法將HTML文件插入到所有其他文件中。在所有頁面上插入菜單選項卡 - HTML＆CSS

我試圖在頁面中加載的文件是菜單選項卡的HTML。

代碼：

<nav id="tab"> 
<ul> 
    <li><a href="index.html" id="tabb">HOME</a></li>   
    <li><a href="codes/index.html" id="tabb">CODES</a> 
     <ul id="codeul">  
      <li><a href="codes/mirc_downloads/index.html" id="tabb">mIRC</a></li> 
      <li><a href="codes/batch_downloads/index.html" id="tabb">BATCH</a></li> 
      <li><a href="codes/samp_downloads/index.html" id="tabb">SA-MP</a></li> 
     </ul>  
    </li> 
    <li><a href="gallery" id="tabb">GALLERY</a></li>  
    <li><a href="#" id="tabb">CONTACT</a> 
     <ul id="contul"> 
      <li><a href="http://facebook.com/areeb12/" id="tabb">Facebook</a></li> 
      <li><a href="http://twitter.com/AreebBeigh/" id="tabb">Twitter</a></li> 
      <li><a href="https://plus.google.com/u/0/107540768248951141539" id="tabb">Google</a></li> 
      <li><a href="http://instagram.com/areebbeigh" id="tabb">Instagram</a></li> 
    </li> 
     </ul>  
</ul> 
<div id="clear"></div> 
</nav>

CSS

/* Nav tab */ 

#tab { 
    background-color: #000; 
    padding: 1px 50px; 
    opacity: 0.7; 
    position: relative; 
    top: 65px; 
    margin-top: -64px; 
    //float: right; 
    //border-bottom: 1px solid grey; 
} 

#tab ul li a { 
    padding: 15px 14px; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 24px; 
    background-color: black; 
    border-right: 1px solid white; 
    border-left: 1px solid white; 
    color: white; 
} 

#tab ul li a:hover { 
    padding: 15px 14px; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 24px; 
    background-color: #33333; 
    //opacity: 1; 
    color: white; 
} 

#tab ul li ul a { 
    padding: 10px; 
    display: block; 
    background-color: #333333; 
} 

#tab ul li ul a:hover { 
    padding: 10px; 
    display: block; 
    background-color: #666666; 
} 

#tab ul li ul { 
    background-color: #333333; 
} 


/* Contact drop down edits */ 

#contul { 
    width: 126px; 
} 

/* Codes drop down edits */ 

#codeul { 
    width: 97px; 
} 


#tab ul li { 
    display: inline; 
    position: relative; 
} 


/* Drop down menu */ 

#tab ul ul { 
    display: none; 
    position: absolute; 
    left: 0px; 
    background-color: white; 
} 

/* Trigger for drop down menu */ 

#tab ul li:hover ul{ 
    display: block; 
    transition: 0.3s; 
} 

#clear { 
    clear:both; 
}

如果需要任何進一步的信息，這裏的網站：www.areeb-beigh.tk

的標籤只在指數.html頁面，因爲我不想複製和粘貼到每一個單一的頁面長的HTML ..此外，編輯相同就像是一個很多的工作。

我只是一個初學者，所以請保持簡單:)！任何幫助，將不勝感激。

在此先感謝:)！

問候 -Areeb

來源

2015-10-23 Areeb

如果您只是想在您的頁面中包含您的CSS樣式，而無需爲每個頁面使用相同的CSS屬性設置，那麼您應該將它們放在styles.css文件中，然後僅包含它在你的HTML <head>標籤具有以下內容：

<link rel="stylesheet" type="text/css" href="styles.css">

對於包括在其他HTML文檔HTML文件，只有在純HTML做到這一點的方法是使用，然而，這不是那麼好接受的選擇，特別是如果你」重新創建一個響應式網站。

另一種方法和最簡單的方法是在這裏實現一些PHP，但是您當然必須確保您的Web服務器支持PHP。

PHP包括：

<?php 
    include 'navigation.html'; 
?>

這可以被用來通過只包括在每個頁面的導航來建立自己的網站的整個模板，或者你甚至可以創建一個header.php文件，其中包括一切你在頁面的標題部分，然後將其包含到每個內容頁面。

來源

2015-10-23 10:18:42 ProDexorite

Thx爲您的答覆，是的我已經鏈接到一個單一的樣式表。我剛剛在帖子中添加了一個CSS代碼片斷。 'HTML'中是否還有其他方法？我可以在每個頁面上包含標籤嗎？：| – Areeb

恐怕不是。對於HTML來說，似乎嵌入文件的唯一方法是使用iframe來完成。你也可以嘗試一些JavaScript或jQuery更具體：http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file – ProDexorite

好的。感謝您的支持：）！ – Areeb

只要你在任何新的HTML文檔，即鏈接的CSS文件。 <link rel="stylesheet" type="text/css" href="style.css"/>你應該能夠將該HTML代碼從文檔複製到文檔。

來源

2015-10-23 10:09:28

這就是我想要避免的..因爲如果我必須在選項卡中編輯任何內容，那麼我必須在每個文件中編輯它。 – Areeb

在所有頁面上插入菜單選項卡 - HTML＆CSS

回答

相關問題