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



我想知道是否有任何方法可以将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

如果你只是在寻找一种方法,包括你的CSS样式在页面一次,而不必使用相同的长CSS属性设置为每个单独的页面,你应该使他们在styles.css文件为例,然后只是包括它在你的HTML <head>标签以下:

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

对于在其他HTML文档中包含HTML文件,在纯HTML中做到这一点的唯一方法是使用<iframe>,但这并不是那么受欢迎的选项,特别是如果你正在创建一个响应式网站。

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

PHP包括:

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

这可以用来创建你的网站的整个模板,只是包括导航在你的每一个页面,或者你甚至可以创建一个header.php文件,其中包括你在你的页头部分的一切,然后包括到你的每一个内容页面。

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

最新更新