在所有页面上插入菜单选项卡- HTML & CSS

Question

我想知道是否有任何方法，我可以插入一个HTML代码到所有其他网页的网站，而不失去CSS设计的文件。我试过用但太乱了。我想知道是否有更简单的方法将HTML文件插入到所有其他文件中。

我试图在页面中加载的文件是菜单选项卡的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。

该选项卡仅在index.html页面上，因为我不想将那么长的HTML复制并粘贴到每个页面中。而且，同样的编辑也是一项非常艰巨的工作。

我只是一个初学者，所以请保持简单:)！任何帮助都将不胜感激。

预先谢谢:)！

看待-Areeb

Answer 1

如果您只是在寻找一种方法将CSS样式只包含在页面中一次，而不必为每个页面使用相同的长CSS属性设置，则应该在styles.css文件中设置它们，然后将其包含在HTML标记中，如下所示：

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

对于在其他HTML文档中包含HTML文件，在纯HTML中这样做的唯一方法是使用<iframe>，但是这并不是很受欢迎的选项，特别是如果您正在创建一个响应性的网站。

另一种也是最简单的方法是在这里实现一些PHP，但是您当然必须确保您的web服务器支持PHP。

PHP包括：

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

这可以用于创建网站的整个模板，只需在每个页面中包含导航，或者您甚至可以创建一个header.php文件，其中包含页面标题部分中的所有内容，然后将其包含到每个内容页中。

Answer 2

只要您将css文件链接到任何新的html文档中，即。<link rel="stylesheet" type="text/css" href="style.css"/>您应该能够将该html代码从一个文档复制到另一个文档。