Question

我想在index.html文件的左侧有一个“Recent Activity”流。我有以下代码：

<div id="sidebar">
        <div class="box1">
            <div class="title">
                <h2>Recent</h2>
            </div>
            <ul class="style2">
                <li>27 Aug - Conference Meeting</li>
                <li>26 Aug - Website Created</li>
            </ul>
        </div>
    </div>

基本上我希望能够将内容（活动）存储在一个单独的文件中，这样我就可以将该文件导入我网站的各个页面。

我是CSS和网页设计的新手，我试图在谷歌找到答案，但没有遇到任何运气。我的任务是为我的团队的大学项目创建一个网站。

感谢您的帮助。

Answer 1

为此，您可以使用这样的CSS：

.box1{content: url(http://www.example.com/test.html)}

在Mozilla Dev

了解详情

话虽如此，我强烈建议 NOT 这样做。这是 NOT CSS的用途。您最好使用某种类型的服务器端或PHP。如果您不知道编码，您可以随时使用像WordPress这样的CMS，这将使这项任务变得轻而易举

Answer 2

您可以使用Javascript（或某些相同的库）来读取文件中的活动（或者，如果使用javascript表示，可以只导入该文件），然后使用javascript将活动插入到相应的部分DOM。

Answer 3

解决方案不是从现有文件中删除html，而是使用像php这样的服务器端脚本语言从不同来源构建html文件。

使用php，您只需要一个页面（例如index.php）并包含用户请求的内容（如家庭，联系人，留言簿等）。

正确的方法是使用数据库存储信息，但这对于开始使用Web开发来说太难了。

将侧边栏的html保存到单独的html文件（sidebar.html）。将index.html重命名为index.php。转到index.php中侧边栏的html代码所在的位置并将其删除，而只是插入：

<?php include "sidebar.html"; ?>

此代码包含index.php中的html文件，您可以在不同的页面上重复使用它，只需在您需要的每个页面上包含相同的sidebar.html即可。如果您需要进行更改，则可以在一个文件中修改它。

现在这里是这个解决方案的缺点：你需要在服务器上安装php，你的网站将是hostet。 Php是一个与网络服务器交互的程序，每当浏览器请求.php文件时，它将首先移交给php，用于解析文件并进行包含，数据库访问和许多其他很酷的事情。所以为了使用php文件并在其他html文件中包含html文件，你需要在你的网络服务器上安装php。此外，如果您通过双击打开.html文件，除非您的计算机上安装了带有php的本地Web服务器，否则您将无法看到完整的结果。这是所有免费软件（apache2和php），但对于初学者来说，安装它并不容易。也许从像xampp这样的prebuild包开始。（这包含具有预配置设置的webserver和php，可以快速启动）。

这个主题对于php非常基础，所以你可以在互联网上找到很多关于php入门的教程。祝好运并玩得开心点。 ;）

Answer 4

简单来说，您可以使用<iframe>标记或css Content property来执行此操作，但它不会为您提供JavaScript或PHP可以提供的功能。
要使用JavaScript，您可以查看this question。

Answer 5

感谢大家的帮助和帮助。这是一次学习经历。对于遇到相同问题的任何人，我可以使用来自对我的问题做出回应的成员的帮助找到解决方案。

这是我的css：

    <div id="sidebar">
        <div class="box1">
            <div class="title">
                <h2>Recent</h2>
            </div>
            <script type="text/javascript" src="js/recent.js"> </script>
        </div>

        <div class="box2">
            <div class="title">
                <h2>Relevant Links</h2>
            </div>
            <script type="text/javascript" src="js/links.js"> </script>
        </div> 
    </div>

这是我的两个* .js文件：

// recent.js - Create recent activity feed
document.write("<ul class=\"style2\">");
document.write("<li>29 Aug - <a href=\"photos.html\">10 Photos Added</a></li>");
document.write("<li>28 Aug - <a href=\"meeting.html\">Meeting Page Added</a></li>");
document.write("<li>27 Aug - Meeting</li>");
document.write("<li>26 Aug - Website Created</li>");
document.write("</ul>");


// links.js - Create list of links
document.write("<ul class=\"style2\">");
document.write("<li><a href=\"http://students.sae.org/cds/formulaseries/\">Formula SAE&reg;</a></li>");
document.write("<li><a href=\"http://www.sae.org/\">SAE International</a></li>");
document.write("</ul>");

它可能不是最漂亮的方式，但似乎有效。 iframe的问题在于，如果我点击链接，它会在iframe中打开它。再次感谢大家！我对javascript，css一无所知，这是一次学习经历！：）

将DIV的内容存储在另一个文件中的css中

5 个答案: