css 如何创建网站子页面没有更多的html文件？

jq6vz3qz 于 2022-12-15 发布在其他

关注(0)|答案(3)|浏览(143)

网站真的每个子页面都有单独的html文件吗？每个“如何制作网站子页面”指南都说要制作一个新的html文件并将其链接到另一个，但最终结果是大量的html文件。有没有办法将多个网页保存在同一个html文件中，这样当我点击一个链接时，它会带我到一个新的子页面，但两个页面的html在同一个文件中？
我目前通过创建一个html文件并将其链接到另一个页面来制作子页面，如下所示：

<a href="subpage.html">Link Name</a>

css

来源：https://stackoverflow.com/questions/74793452/how-to-create-website-subpages-without-more-html-files

3条答案

按热度按时间

5uzkadbs1#

你可以使用哈希如下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Machine Web UI</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>        
    
    <div>
        <a href="#abdd">abdd</a>
        <a href="#abdd1">abdd1</a>
        <a href="#abdd2">abdd2</a>
        <a href="#abdd3">abdd3</a>
        <a href="#abdd4">abdd4</a>
        <a href="#abdd5">abdd5</a>
    </div>

    <div id="abdd" style="height: 500px;width:500px;">abdd</div>
    <div id="abdd1" style="height: 500px;width:500px;">abdd1
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint aperiam incidunt debitis impedit aliquid, dolorum harum dignissimos voluptates eaque sit rem praesentium! Voluptatibus illo dolore, veritatis voluptates totam quos asperiores?
    </div>
    <div id="abdd2" style="height: 500px;width:500px;">abdd2
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint aperiam incidunt debitis impedit aliquid, dolorum harum dignissimos voluptates eaque sit rem praesentium! Voluptatibus illo dolore, veritatis voluptates totam quos asperiores?
    </div>
    <div id="abdd3" style="height: 500px;width:500px;">abdd3
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint aperiam incidunt debitis impedit aliquid, dolorum harum dignissimos voluptates eaque sit rem praesentium! Voluptatibus illo dolore, veritatis voluptates totam quos asperiores?
    </div>
    <div id="abdd4" style="height: 500px;width:500px;">abdd4
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint aperiam incidunt debitis impedit aliquid, dolorum harum dignissimos voluptates eaque sit rem praesentium! Voluptatibus illo dolore, veritatis voluptates totam quos asperiores?
    </div>
    <div id="abdd5" style="height: 500px;width:500px;">abdd5
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint aperiam incidunt debitis impedit aliquid, dolorum harum dignissimos voluptates eaque sit rem praesentium! Voluptatibus illo dolore, veritatis voluptates totam quos asperiores?
    </div>
    
 </body>
</html>

赞(0）回复(0）举报 2022-12-15

nqwrtyyt2#

你可以使用模板引擎来完成这件事。
React Laravel刀片EJS

赞(0）回复(0）举报 2022-12-15

3vpjnl9f3#

考虑到您的实际问题是“大量的html文件”，我想问一下您是否一直在使用git。如果没有，请先尝试一下。如果有，请继续阅读。
首先，随着项目大小的增长，文件的数量也会增加。
其次，对于您的特定情况，您可以创建一个选项卡面板，并将不同页面的内容放在不同的选项卡上。
请记住，这可以防止每个页面的<head>标记中包含不同的内容。（不过，这可能不是必需的）
下面是我通过网络搜索找到的标签面板教程：
https://dev.to/mainakibe/creating-a-simple-horizontal-switchable-tabs-panel-using-html-css-javascript-e0l
以下是上述内容的修改。

function setupTabs() {
  document.querySelectorAll(".tab-btn").forEach((button) => {
    button.addEventListener("click", () => {
      const sidebar = button.parentElement;
      const tabs = sidebar.parentElement;
      const tabNumber = button.dataset.forTab;
      const tabActivate = tabs.querySelector(
        `.tab-content[data-tab="${tabNumber}"]`
      );

      sidebar.querySelectorAll(".tab-btn").forEach((button) => {
        button.classList.remove("tab-btn-active");
      });
      tabs.querySelectorAll(".tab-content").forEach((tab) => {
        tab.classList.remove("tab-content-active");
      });
      button.classList.add("tab-btn-active");
      tabActivate.classList.add("tab-content-active");
    });
  });
}

document.addEventListener("DOMContentLoaded", () => {
  setupTabs();
});

* {
  box-sizing: border-box;
  margin: 0;
}

.tabs {
  font-family: "Poppins", sans-serif;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 10vh;
}

.tab-btn {
  background-color: #fff;
  border: none;
  border-bottom: 1px solid gray;
  color: #000;
  cursor: pointer;
  padding: 10px 0;
  margin: 10px 0;
  outline: none;
  width: 10%;
}

.tab-btn-active {
  border-bottom: 2px solid hsl(0, 94%, 66%);
  color: hsl(20, 94%, 75%);
  font-weight: bold;
  background-color: #136;
}

/* tabs content */

.content {
  width: 100%;
  padding: 0.5rem;
}

.tab-content {
  text-align: center;
  width: 100%;
  height: 100vh;
  position: relative;
  top: 1rem;
  display: none;
}

.tab-content-active {
  display: block;
}

<div class="tabs">
  <div class="sidebar">
    <img src="https://i.postimg.cc/vTkGR0jV/html5.png">
    <!-- tabs buttons  -->
    <button class="tab-btn tab-btn-active" data-for-tab="1">Home</button>
    <button class="tab-btn" data-for-tab="2">About</button>
    <button class="tab-btn" data-for-tab="3">Contact</button>
  </div>
  <!-- tabs content  -->
  <div class="content">
    <div class="tab-content tab-content-active" data-tab="1">
      <p> This is the homepage. </p>
    </div>
    <div class="tab-content" data-tab="2">
      <p> About us. </p>
    </div>
    <div class="tab-content" data-tab="3">
      <p> Phone: +00 xxxxx xxxxx </p>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2022-12-15

我来回答

css 如何创建网站子页面没有更多的html文件？

3条答案

相关问题

热门标签

最新问答