gpt4 book ai didi

html - 具有共同标题和导航栏的多个网页

转载 作者:行者123 更新时间:2023-11-28 13:05:57 24 4
gpt4 key购买 nike

我正在制作一个小型个人学术网站,该网站包含多个结构相同的页面。

问题:有没有办法在每个 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>
&nbsp&nbsp
<a href="publications.html">Publications</a>
&nbsp&nbsp
<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>
&nbsp&nbsp
<a href="publications.html">Publications</a>
&nbsp&nbsp
<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,不,你不能这样做,因为这个要求超出了他们的规范(阅读“目的”)。

还有两种方法:

  1. 如果您使用的是服务器端语言(例如 PHP),您可以利用库语法在 the case of PHP 中内嵌包含来自其他文件的内容 (include())| , 或 Server Side Includes

  2. 您可以使用 javascript 或类似 jQuery 的库来获取其他页面的输出(内容),并将它们注入(inject)您页面的指定位置。这可以像使用 jQuery 的 load() 方法一样容易地完成 as seen here

关于html - 具有共同标题和导航栏的多个网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20220306/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com