- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在制作一个小型个人学术网站,该网站包含多个结构相同的页面。
问题:有没有办法在每个 html 文件中不重复标题和菜单(或导航栏)的代码?如果我可以将标题和菜单的代码放在另一个文件中,那就太好了,例如header.html
并编写诸如 \input{header.html}
的语句(使用 TeX 语法)将文件包含到 index.html
中和 publications.html
。
下面是网站的外观示例。
index.html
的内容:
<!DOCTYPE html>
<html>
<head>
<title>The Title</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="header">
<h1>My Name</h1>
</div>
<div id="menu">
<p>
<a href="index.html">Home</a>
  
<a href="publications.html">Publications</a>
  
<a href="contact.html">Contact</a>
</p>
</div>
<div id="content">
<p>
This is my academic webpage.
</p>
<p>
I am a 15th year PhD student in Filmmaking at Mickey's Institute of Technology (MIT).
</p>
</div>
</body>
</html>
publications.html
的内容:
<!DOCTYPE html>
<html>
<head>
<title>The Title</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="header">
<h1>My Name</h1>
</div>
<div id="menu">
<p>
<a href="index.html">Home</a>
  
<a href="publications.html">Publications</a>
  
<a href="contact.html">Contact</a>
</p>
</div>
<div id="content">
<ol>
<li>Snow White and the Seven Dwarfs, 1937</li>
<li>Pinocchio, 1940</li>
<li>The Reluctant Dragon, 1941</li>
</ol>
</div>
</body>
</html>
stylesheet.css
的内容:
body {font-size: 16px; line-height: 20px; font-weight: light; color: #250517; /*gray*/}
a:link {text-decoration: none; color: #003399; /*blue*/}
a:visited {text-decoration: none; color: #003399; /*blue*/}
a:active {text-decoration: none; color: #003399; /*blue*/}
a:hover {text-decoration: none; color: #003399; /*blue*/}
#header {
width:800px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:50px;
}
#content {
width:730px;
margin-left:auto;
margin-right:auto;
height:410px;
}
#menu {
width:800px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-bottom:50px;
clear:both;
}
最佳答案
仅使用 HTML 和/或 CSS,不,你不能这样做,因为这个要求超出了他们的规范(阅读“目的”)。
还有两种方法:
如果您使用的是服务器端语言(例如 PHP),您可以利用库语法在 the case of PHP 中内嵌包含来自其他文件的内容 (include()
)| , 或 Server Side Includes
您可以使用 javascript 或类似 jQuery 的库来获取其他页面的输出(内容),并将它们注入(inject)您页面的指定位置。这可以像使用 jQuery 的 load()
方法一样容易地完成 as seen here
关于html - 具有共同标题和导航栏的多个网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20220306/
所以,我有一个类似于 this one 的用例,但我觉得有一些额外的细节值得提出一个新问题。 ( related questions ,供引用) 我正在编写一个实现 a cycle 的数据结构.基本设
我正在使用 Django 编写一个社交网络应用程序,需要实现类似于 Facebook“Mutual Friends”概念的功能。我有一个像这样的简单模型: class Friend(models.Mo
我有一个 iOS 应用程序,用户可以在其中使用 Facebook 登录并授予 user_friends 权限。从 Graph API 2.0 开始,Facebook 声称你无法获取两个人之间所有的共同
我想知道将来对我来说最简单的方法是什么,可以使查询既有效又不那么复杂。 我应该像这样保存双向关系吗 from_id=1, to_id=2from_id=2, to_id=1 或者只创建一个唯一的行 f
我是一名优秀的程序员,十分优秀!