使用HTML/CSS和Javascript的多米诺骨牌跟踪器

我计划创建一个非常简单的网页，显示所有0-12多米诺骨牌，然后允许用户悬停并单击每个多米诺骨牌以隐藏或更改其透明度。这样做的目的是根据已经播放的内容显示剩余的内容。我为我妻子做这件事是为了帮助我更好地理解html/css以及我最近获得的jquery和javascript知识

在这一点上，我的问题只是关于使用CSS将这些多米诺骨牌打印到页面上的最佳方法。我可以使用下面的代码创建0、1-0和1-1片段，但我很头痛，因为我想知道如何在0-2的对角线上定位这些点。如果有人有耐心在这里用最好的方法帮助我，我将不胜感激：）

* {  
边框：0.50px蓝色虚线；/*导向尺*/
}
多米诺骨牌{
/*多米诺骨牌形状*/
位置：相对位置；
高度：76px；
宽度：40px；
背景色：白色；
边框：1px纯黑；
/*圆角
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px；
填充：2px；
*/
}
.圆圈{
边界半径：50%；
宽度：5px；/*宽度和高度可以是任何东西，只要它们相等*/
高度：5px；
背景色：黑色；
位置：相对位置；
保证金：自动；
}
.线路{
位置：相对位置；
宽度：90%；
身高：2%；
背景色：黑色；
显示：块；
保证金：自动；
}
.一{
高度：5px；
宽度：5px；
显示：块；
保证金：自动；
利润率最高：5%；
利润底部：5%；
填充：34%；
}

我尝试用CSS创建的多米诺骨牌示例：

使用div而不是span，默认情况下，它们更适合块显示（在本例中，这是合适的）

逻辑地重新格式化您的多米诺骨牌结构，即使用嵌套的div

为每个点位置创建3个类：左、中、右

解决方案如下：

参考代码：

HTML：正如你在下面看到的，多米诺骨牌首先分为两半，然后分为3部分。在这之后，水平定位这些点是小菜一碟

CSS：如您所见，我用.part>div选择器替换了circle类；因此，您不必再创建另一个类。

另外，如果您希望使用水平domino而不是垂直domino，可以将其添加到CSS中：

。水平{
变换：旋转（90度）；
-webkit变换：旋转（90度）；
-o变换：旋转（90度）；
-moz变换：旋转（90度）；
}

只需将“水平”类添加到多米诺骨牌div

使用div而不是span，默认情况下，它们更适合块显示（在本例中，这是合适的）

逻辑地重新格式化您的多米诺骨牌结构，即使用嵌套的div

为每个点位置创建3个类：左、中、右

解决方案如下：

参考代码：

HTML：正如你在下面看到的，多米诺骨牌首先分为两半，然后分为3部分。在这之后，水平定位这些点是小菜一碟

CSS：如您所见，我用.part>div选择器替换了circle类；因此，您不必再创建另一个类。

另外，如果您希望使用水平domino而不是垂直domino，可以将其添加到CSS中：

。水平{
变换：旋转（90度）；
-webkit变换：旋转（90度）；
-o变换：旋转（90度）；
-moz变换：旋转（90度）；
}

---

只需将“水平”类添加到多米诺骨牌分区。

您只需将Unicode字符用于多米诺骨牌。从U+1F030开始到U+1F093结束，有一套完整的装置，垂直和水平面对

---

例如，2-3水平domino位于U+1F042处，看起来像：您可以简单地将Unicode字符用于domino分幅。从U+1F030开始到U+1F093结束，有一套完整的装置，垂直和水平面对

---

例如，2-3水平多米诺骨牌位于U+1F042，看起来像：我意识到这是你一年多前看到的东西，但我今天看到了你的帖子

几个月前，我试图用HTML和CSS创建一个拼图

我看到了这一页：

当我学习使用的方法时，我受到启发，使用卢金先生在他的拼图上使用的相同技术，使用css和html创建了一个domino。在我算出一张多米诺骨牌后，其他27张都很简单

结果是：

我为瓷砖创建了一个类选择器，使其具有3D感

.domino {
    float: left;
    font-size: 20px;
    width: 6em;
    height: 12em;
    margin: 40px;
    position: relative;
    -webkit-border-radius: .8em;
    -moz-border-radius: .8em;
    border-radius: .8em;
    -moz-box-shadow:    .3em .3em 0em .2em #333;
    -webkit-box-shadow: .3em .3em 0em .2em #333;
    box-shadow:         .3em .3em 0em .2em #333;
 }

然后是一个分组的类选择器，用于处理.domino类的背景色和PIP所在的范围

.domino, .domino span { 
    background-color:#000
  }

另一组用于在平铺上放线：

.domino .line {
    width: 5.5em;
    height: .2em;
    position: absolute;
    top: 5.7em;
    left: .25em;
    background-color: #fff;
}

然后我为domino上的每个可能的pip设计了一个类选择器，对于总共14个类选择器，顶部为7个，底部为7个。我不会在这里列出每个的css。一旦你研究了这里的两个例子，你就可以推断出其余的是如何完成的。（或者您也可以转到我的页面，使用浏览器中的Inspect Element工具查看或抓取css。）

我对每个pip的类选择器使用了以下命名约定：

名称中的第一个字母指定pip是用于瓷砖的（T）op还是（B）ottom一半。第二个字母指定它是在（L）左侧，（C）enter还是（R）右侧。雷马尼酒店

.domino, .domino span { 
    background-color:#000
  }

.domino .line {
    width: 5.5em;
    height: .2em;
    position: absolute;
    top: 5.7em;
    left: .25em;
    background-color: #fff;
}

  .domino .TC135 {
    width: 1.2em;
    height: 1.2em;
    position: absolute;
    top: 2.4em;
    left: 2.5em;
    -webkit-border-radius: 4em;
    -moz-border-radius: 4em;
    border-radius: 4em;
    background-color: #fff;
 }

  .domino .BL23456 {
    width: 1.2em;
    height: 1.2em;
    position: absolute;
    top: 9.6em;
    left: 1.0em;
    -webkit-border-radius: 4em;
    -moz-border-radius: 4em;
    border-radius: 4em;
    background-color: #fff;
 }

  .domino .BR23456 {
    width: 1.2em;
    height: 1.2em;
    position: absolute;
    top: 6.4em;
    left: 4.0em;
    -webkit-border-radius: 4em;
    -moz-border-radius: 4em;
    border-radius: 4em;
    background-color: #fff;
 }

<div class="domino">
   <span class="TC135"></span>
   <span class="line"></span>
   <span class="BL23456"></span>
   <span class="BR23456"></span>
</div>