图像内联部分的重建。

Question

有人可以告诉我如何使用html和css重建本节。我已经尝试了几次并且不能完全正确。我只需要展示一次，然后从那里开始。目前，我正在使用Squarespace，因此只需将内容拖到页面上，但我需要使用html和css重新插入它。谢谢你的帮助

您可以从我的主页www.jobspark.ca

获取文字

Answer 1

您提供的链接是使用响应式网格系统。如果你是html / css的新手，那么自己写这个可能有点多了。我建议你使用某种css框架。

那里有很多，但我喜欢的是Twitter Bootstrap，这是非常受欢迎的，因此非常受支持。他们使用的grid system非常稳固且反应灵敏，我一直都在使用它！你甚至可以在他们的网站上自定义框架，只包含你需要的部分（以防止很多开销），或者下载源（.less）文件并自己编辑和编译它们（它似乎更难，它们很好记录！）

对于您提供的屏幕截图，带引导类的html看起来像这样：

<div class='container-fluid'>

   <div class='row-fluid'>
      <article class='span4'>
         <img src='...' alt='...'/>
         <h2>The title</h2>
         <p>Lorem ipsum dolor sit amet</p>
         <a href='...'>Read more...</a>
      </article>

      <article class='span4'>
         ...
      </article>

      <article class='span4'>
         ...
      </article>

  </div>
</div>