时间戳

首页 > 解决方案 > 如何使用 Html Css 制作博客布局

html - 如何使用 Html Css 制作博客布局

问题描述

我是网页设计的初学者。我知道一些关于 CSS 布局的基础知识。我试图创建一个博客文章布局，如下图所示。 请参阅图像布局 请帮我这样做。

标签： htmlcsslayoutblogs

解决方案

欢迎来到 StackOverflow！提醒一下，通常您会想来这里询问更具体的问题，以解决您的代码问题，或者解释您不太了解的奇怪行为。您的问题有点过于开放，无法在这里回答，但我可以帮助您开始：

对于初学者，开始考虑将图片中的每个框转换为 HTML div。如果您将该图片的每个部分分解为 div，则可以作为在其上添加 CSS 样式的良好基础。在你的情况下，你可能想要这样的东西：

<div id="articleList">
  <div id="article_1">
    <div id="articleImage_1">
      <img src="articleImage_1.jpg" alt="Picture #1">
    </div>
    <div id="articleContent_1">
      <div id="articleTags_1"></div>
      <div id="articleTitle_1"></div>
      <div id="articleAuthorNameAndCommentsSubheader_1"></div>
      <div id="articleBody_1"></div>
    </div>
  </div>
  <div id="article_2">
    <div id="articleImage_2">
      <img src="articleImage_2.jpg" alt="Picture #2">
    </div>
    <div id="articleContent_2">
      <div id="articleTags_2"></div>
      <div id="articleTitle_2"></div>
      <div id="articleAuthorNameAndCommentsSubheader_2"></div>
      <div id="articleBody_2"></div>
    </div>
  </div>
</div>

当然，您将在 for 循环或 .map() 类型函数中生成每一行。您还可以在每个 div 的“类”属性中添加 .css。

如果您觉得这有帮助，请通过选择我的帖子作为答案告诉我，如果您还有其他问题，请不要害羞:)

推荐阅读