Question

我正在努力制作各种各样的起始页面，我希望它看起来像这样：https://imgur.com/zjzKyRD（做得不好，但我使用的程序非常糟糕（我想念mspaint））

我最初使用按钮，这使得它很容易链接和自定义，但我有一些尺寸问题，所以我尝试使用div，但我似乎无法使整个div框成为可点击的链接。如果我能够弄清楚这一点，我仍然需要将盒子放在特定的地方，我不知道如何。

问题：如何制作这些盒子，将它们放置在一个网格中，并将它们链接到不同的网站？是否也可以创建一个功能，我可以将鼠标悬停在其中一个＆＃34;网站上＃34;它会告诉我一些有关它的信息吗？（手动输入）

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

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

CSS（＆＃34;借来＆＃34;来自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 https://jsfiddle.net/wwk4tyzw/2/

的小提琴

Answer 2

仅仅因为它可能在将来更具相关性我想把它放在这里：https://drafts.csswg.org/css-grid/

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

2 个答案: