尝试学习基本布局原则（HTML，CSS） - 初学者

Question

我不熟悉HTML，CSS和编码。我计划编写一个基于Bootstrap网格系统的页面，但是想知道如何向它添加这个功能。我想要在点击缩略图时出现一个下拉信息面板（如绿色所示）。我想只使用HTML和CSS并尽可能少地使用代码来实现这一点。

我会感激任何帮助。

请原谅我在该领域的有限词汇量。不知道该怎么称呼“信息面板”。

Answer 1

我建议使用Bootstrap网格系统。 这是开始使用页面布局的好方法。它使用简单，适应您自己的需求。他们的网格系统也很敏感。

开始使用您的布局：

<div class="row">
  <div class="col-md-2">Logo</div>
  </div>
<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
    </a>
  </div>
</div>
<div class="row">
  ...
</div>

你得到了诀窍...... 您需要将行放在container类中以进行正确对齐。再看Bootstrap grid system。

Answer 2

好的，长短不一，你是在正确的道路上。 HTML和CSS是技术，而你所寻求的是一门艺术。 http://www.w3schools.com/。了解div标签。