我想知道是否有任何方法可以将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代码从一个文档到另一个文档