【发布时间】：2022-01-11 21:22:52
【问题描述】：
寻找一些提示。我有两个正在使用的 HTML 模板。第一个是我全面使用的标准，第二个有一个投资组合页面，其中包含我想在我的标准模板中使用的元素。我想保持页眉和页脚相同，但包含第二个模板的内容。这怎么可能实现？
我已从第二个模板中取出根文件夹，并制作了一个副本，并将其粘贴到我的标准模板的根文件夹中。我复制了 html 以链接到第二个模板中的样式表，并将其粘贴到标准模板中，但内容仍然没有显示。这是我所拥有的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Page Title -->
<title>Not Found - Alioth</title>
<!--/ Page Title -->
<meta name="author" content="Pe Themes">
<meta name="description" content="Creative Portfolio & Agency Template">
<meta name="keywords" content="portfolio, agency, personal, creative">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Portfolio Template Stylesheets (what you can see is I linked them within the template folder I pasted in to the main root folder) -->
<link href="Portfolio/css/reset.css" rel="stylesheet" >
<link href="Portfolio/includes/fontawesome/icons.css" rel="stylesheet" >
<link href="Portfolio/js/locomotive-scroll/locomotive-scroll.css" rel="stylesheet" >
<link href="Portfolio/js/magnific-popup/magnific-popup.css" rel="stylesheet" >
<link href="Portfolio/js/flexslider/flexslider.css" rel="stylesheet" >
<link href="Portfolio/js/swiper/swiper.css" rel="stylesheet" >
<link href="Portfolio/js/plyr/plyr.css" rel="stylesheet" >
<link href="Portfolio/css/styles.css" rel="stylesheet" >
<!-- End Stylesheets -->
<!-- Standard Template Stylesheets --!>
<link href="css/plugins.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!-- Favicons -->
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="apple-touch-icon" href="img/favicon.png" />
<!--/ Favicons -->
到目前为止，没有任何东西被扔掉。但我的内容根本没有显示。有什么建议吗？？
这是我试图迁移到标准模板的代码。
<!-- Begin Main -->
<div class="portfolio pixi" data-displacement-image="portfolio/images/nm-04.jpg">
<div class="projects-container">
<div class="wrapper">
<article data-year="2021">
<a href="project-sample-1.html">Audi RS7</a>
<div class="image-text">
<a href="project-sample-1.html">Audi RS7</a>
</div>
<div class="images">
<img src="images/project-1-6.jpg" alt="">
<img src="images/project-1-3.jpg" alt="">
<img src="images/project-1-4.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-1.html">
<span>Audi RS7</span>
<img src="images/project-1-3.jpg" alt="">
</a>
</div>
</article>
<article data-year="2021">
<a href="project-sample-4.html">Zero Motors</a>
<div class="image-text">
<a href="project-sample-4.html">Zero Motors</a>
</div>
<div class="images">
<img src="images/project-4-2.jpg" alt="">
<img src="images/project-4-3.jpg" alt="">
<img src="images/project-4-1.jpg" alt="">
<img src="images/project-4-4.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-4.html">
<span>Zero Motors</span>
<img src="images/project-4-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2021">
<a href="project-sample-2.html">Swiss Alps</a>
<div class="image-text">
<a href="project-sample-2.html">Swiss Alps</a>
</div>
<div class="images">
<img src="images/project-3-2.jpg" alt="">
<img src="images/project-3-4.jpg" alt="">
<img src="images/project-3-1.jpg" alt="">
<img src="images/project-3-5.jpg" alt="">
<img src="images/project-3-6.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-2.html">
<span>Swiss Alps</span>
<img src="images/project-3-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2020">
<a href="project-sample-5.html">Wildlings</a>
<div class="image-text">
<a href="project-sample-5.html">Wildlings</a>
</div>
<div class="images">
<img src="images/project-5-3.jpg" alt="">
<img src="images/project-5-1.jpg" alt="">
<img src="images/project-5-4.jpg" alt="">
<img src="images/project-5-5.jpg" alt="">
<img src="images/project-5-6.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-5.html">
<span>Wildlings</span>
<img src="images/project-5-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2020">
<a href="project-sample-6.html">Dubai</a>
<div class="image-text">
<a href="project-sample-6.html">Dubai</a>
</div>
<div class="images">
<img src="images/project-6-1.jpg" alt="">
<img src="images/project-6-3.jpg" alt="">
<img src="images/project-6-5.jpg" alt="">
<img src="images/project-6-6.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-6.html">
<span>Dubai</span>
<img src="images/project-6-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2021">
<a href="project-sample-3.html">Audi A3</a>
<div class="image-text">
<a href="project-sample-3.html">Audi A3</a>
</div>
<div class="images">
<img src="images/project-2-1.jpg" alt="">
<img src="images/project-2-2.jpg" alt="">
<img src="images/project-2-7.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-3.html">
<span>Audi A3</span>
<img src="images/project-2-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2020">
<a href="project-sample-3.html">New York</a>
<div class="image-text">
<a href="project-sample-3.html">New York</a>
</div>
<div class="images">
<img src="images/project-6-13.jpg" alt="">
<img src="images/strips-9.jpg" alt="">
<img src="images/full-10.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-3.html">
<span>New York</span>
<img src="images/full-10.jpg" alt="">
</a>
</div>
</article>
<article data-year="2019">
<a href="project-sample-6.html">Last Summer</a>
<div class="image-text">
<a href="project-sample-6.html">Last Summer</a>
</div>
<div class="images">
<img src="images/full-11.jpg" alt="">
<img src="images/grid-3.jpg" alt="">
<img src="images/full-3.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-6.html">
<span>Last Summer</span>
<img src="images/full-11.jpg" alt="">
</a>
</div>
</article>
<article data-year="2021">
<a href="project-sample-1.html">Iceland</a>
<div class="image-text">
<a href="project-sample-1.html">Iceland</a>
</div>
<div class="images">
<img src="images/full-8.jpg" alt="">
<img src="images/full-6.jpg" alt="">
<img src="images/grid-11.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-1.html">
<span>Iceland</span>
<img src="images/full-8.jpg" alt="">
</a>
</div>
</article>
</div>
</div>
</div>
<!-- End Main -->
【问题讨论】：
-
也许您没有提供完整的示例，因为其中没有实际内容，所以预期没有内容显示的结果？
-
当然。这只是我展示的样式表。我继续添加它！我想知道这是否是正确的过程，我现在可以简单地从 Portfolio 模板复制并粘贴 html，还是我缺少另一个“迁移”步骤？
-
从技术上讲，您只需要适用于您正在添加的 html 中使用的类的 css 类。但要小心，如果您不熟悉 CSS，并且只是将更多潜在的大型样式表堆叠在一起，那么它只会大大增加类/选择器名称冲突的可能性，并增加很多会影响性能的臃肿，迫使访问者下载一堆他们甚至不需要的冗余（和未缩小的）css。
-
我尝试的一种方法是将第二个模板的标题更改为第一个模板的标题，然后它会重复。但这似乎也不好用。