Question

用于创建具有4x4网格的网页的最佳方法是什么，该网格在鼠标单击时在每个方块中显示不同的颜色？

由于

Answer 1

一个好的起点是使用DIV容器，其容器的宽度将位于其中。例如。 860px。然后，使用网格项的样式创建一个box类。请参阅下面的live link和 HTML 和CSS：

<强> HTML：

<div class="container">
    <div class="box spacing">Test 1</div>
    <div class="box spacing">Test 2</div>
    <div class="box spacing">Test 3</div>
    <div class="box">Test 4</div>

    <div class="box spacing">Test 5</div>
    <div class="box spacing">Test 6</div>
    <div class="box spacing">Test 7</div>
    <div class="box">Test 8</div>
</div>

<强> CSS：

body{
    margin:0;
    padding:0;
}
.container{
    overflow:hidden;
    width:860px;
}
.box{
    width:200px;
    height:200px;
    float:left;
    background-color:#ccc;
    margin-bottom:20px;
}

.spacing{
    margin-right:20px;
}

对于鼠标点击的不同颜色，如果DIV是一个链接，你可以在CSS中分配颜色，如果不是这种情况，那么可能是一个jQuery或Javascript解决方案。您需要提供更多信息才能获得更详细的答案。

希望这有帮助。

Answer 2

最简单的方法是创建一个单元格表，然后将onclick事件处理程序附加到每个单元格。这是一个2x2表，可以帮助您入门：

<table>
    <tr><td>Cell 1</td><td>Cell 2</td></tr>
    <tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>

创建一个4x4网格的网页

2 个答案: