html - 在 css 和 html 中制作盒子并将它们放在网格中

Question

我正在尝试制作一个起始页，我希望它看起来像这样:https://imgur.com/zjzKyRD (做的不好，但是我用的程序真的很烂(我怀念mspaint))

我最初使用按钮，这使得链接和自定义变得非常容易，但我在尺寸方面遇到了一些问题，所以我尝试使用 div，但我似乎无法使整个 div 框成为可点击的链接。如果我能解决这个问题，我仍然需要将盒子放在特定的位置，但我不知道该怎么做。

问题:如何制作这些框，将它们放置在网格状编队中并让它们链接到不同的站点？是否也可以制作一个功能，让我可以将鼠标悬停在其中一个“站点”上，它会显示一些关于它的信息？ (手动输入)

请记住，我对此很陌生，所以解释会很好 :P 谢谢。

编辑:没有包含任何代码，这里是:

CSS(“借用”自 w3)

.button {
margin-left: 150px;
margin-top: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;}

.button1 {
background-color: #ffbf80;
color: black;
border: 2px solid #ffbf80;
min-width: 350px;
width: 350px;}

.button1:hover {
background-color: white;
color: #ffbf80;}

HTML:

<a href="https://www.google.com" target="blank" class="button button1">Google</a>

这只是其中一个按钮，其他按钮基本相同，但链接、边距和颜色(颜色？)不同。 当使用多个框时，它们会出现在彼此下方，而不是彼此相邻。我弄乱了一堆不同的边距设置，这是我在网上浏览时发现的一些东西，但似乎没有什么能正确对齐它们。

Answer 1

首先，我建议您使用一些网格框架，例如 Bootstrap 或 Foundation。没有人再用纯 HTML 编写网站了。

其次，我认为您可以使用 a-tag 并更改 css，使其成为一个内联框。特别是如果您只打算将它们用作链接而不做任何花哨的事情(例如一些动态动画)。您可能应该围绕这些容器类来表示一行。如下:

<div class="container">
    <a class="linkbox" href="link1"> Link 1 </a>
    <a class="linkbox" href="link2"> Link 2 </a>
    <a class="linkbox" href="link3"> Link 3 </a>
</div>
<div class="container">
    <a class="linkbox" href="link4"> Link 4 </a>
    <a class="linkbox" href="link5"> Link 5 </a>
    <a class="linkbox" href="link6"> Link 6 </a>
</div>

查看带有 CSS 的 fiddle https://jsfiddle.net/wwk4tyzw/2/