html - (HTML/CSS) 如何像在 Google 或 Reddit 上一样重复元素？

Question

我现在正在学习 HTML/CSS，并且正在尝试创建一个 reddit.com 的克隆作为学习练习。在像 reddit 或 google 这样的网站上，有重复的“元素”，包括标题、可能是图标和简短描述。使用 HTML 和 CSS 我可以复制其中一个元素，但我的问题是如何在不复制和粘贴的情况下制作一堆这些元素。我假设有办法，但我不确定。感谢您的帮助!

Answer 1

你基本上有很多可能性 - 如果你真的想“只”演示一些用于学习目的的东西，你应该使用 jquery。

1. 您需要插入 jquery 库，要么使用托管库，要么下载一个并将脚本包含到您的代码中

2. 然后您可以使用循环，例如 .append() 将元素附加到另一个元素

示例 (html)

<ul class="post"></ul>

例子(js/jquery)

$(document).ready(function() {
    for(var i= 0; i < 10; i++) {
       $('.post').append('<li>This is a post with number ' + i + '</li>');
    }
});

希望对你有帮助

其他想法:

• 如果它不应该是一个演示，而更像是一个实际执行 reddit 功能的工作原型(prototype)，您可能需要超越 html 和 css，至少添加 php 或类似的东西。然后，您可以使用带有测试数据的数据库并循环遍历结果以附加它们