如何使用HTML Css进行博客布局

Question

我是网页设计的初学者。我知道一些有关CSS布局的基础知识。我试图创建一个博客帖子布局，如下图所示。see image layout请帮助我做到这一点。

Answer 1

欢迎使用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>