Question

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

此时我的问题只是使用CSS将这些多米诺骨牌打印到页面的最佳方法。我可以使用下面的代码创建0,1-0和1-1件但我正在努力弄清楚如何在0-2对角线上定位点。如果有人有耐心帮助我使用最好的方法，我将非常感激：）

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="dominoe"> 
        <span class="one">
            <div class="circle"> </div>
        </span>
        <div class="line"> </div>
        <span class="one">
            <div class="circle"> </div> 
        </span>
    </div>
</body>
</html>

    * {  
    border: 0.50px dashed blue; /*guide rulers*/
}

.dominoe {
/* Dominoe shape */
    position: relative;
    height:76px;
    width:40px;
    background-color:white;
    border: 1px solid black;

/* Rounded Corners 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding:2px;
    */
}

.circle {
    border-radius: 50%;
    width: 5px; /* width and height can be anything, as long as they're equal */
    height: 5px; 
    background-color:black;
    position: relative;
    margin:auto;

}

.line {
    position:relative;
    width:90%;
    height:2%;
    background-color:black;
    display:block;
    margin:auto;
}

.one {
    height:5px;
    width: 5px;
    display: block;
    margin:auto;
    margin-top:5%;
    margin-bottom:5%;
    padding:34%;
}

我尝试使用CSS创建的多米诺骨牌示例： http://i.stack.imgur.com/Rfwrf.jpg

Answer 1

使用div而不是spans，默认情况下它们是一个更适合块显示的元素（在这种情况下，它是合适的）
逻辑上重新格式化您的多米诺骨牌结构，即使用嵌套的div。
为每个点位置创建3个类：左，中，右

解决方案在这里：http://jsbin.com/ikurip/2/edit

参考代码：

HTML：正如你在下面看到的那样，多米诺骨牌首先分成两半，然后分成三部分。在此之后，水平定位点是一块蛋糕。

<div class="dominoe"> 
     <div class="half">
       <div class="part">
         <div class="left"></div>
         <div class="right"></div>
       </div>
       <div class="part">
         <div class="middle"></div>
       </div>    
       <div class="part">
         <div class="left"></div>
         <div class="right"></div>
       </div>
     </div>
     <div class="line"></div>
     <div class="half"></div>
  </div>

CSS：正如您所看到的，我用.part＆gt;替换了圆圈类。 div选择器;所以你不必创建另一个类。

* {  
    border: 0.50px dashed blue; /*guide rulers*/
}

.dominoe {
/* Dominoe shape */
    position: relative;
    height:76px;
    width:40px;
    background-color:white;
    border: 1px solid black;

/* Rounded Corners 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding:2px;
    */
}

.part > div {
    border-radius: 50%;
    width: 5px; /* width and height can be anything, as long as they're equal */
    height: 5px; 
    background-color:black;
    margin-top: 1px;
}

.line {
    width:90%;
    height:2%;
    background-color:black;
    margin-left: 5%;
}
/* Added CSS */
.dominoe { margin-right: 10px; float: left; }
.half { 
  width: 70%;
  height: 32%;
  padding: 14%;
} 
/* setting padding removes the need to position the top-left, top-right, bottom-left and bottom-right elements */

.part {
  width: 100%;
  height: 21.333%;
  padding: 8% 0% 8% 0%; 
  /* eliminates need for vertical positioning */
}
.part:first-child {
  padding-top: 0%;
}
.part:last-child {
  padding-bottom: 0%;
}
.right {
  float: right;
}
.left {
  float: left;
}
.middle {
  margin: auto;
}

此外，如果你想要水平多米诺而不是垂直，你可以将它添加到你的CSS：

.horizontal {
     transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}

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

Answer 2

我意识到这是你一年前看到的东西，但我今天发现了你的帖子。

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

我看到了这个页面：

http://sergeylukin.com/css-jigsaw-puzzle-piece/

当我研究使用的方法时，我受到启发，使用Lukin先生在他的拼图上使用的相同技术来创建使用css和html的多米诺骨牌。在我找到一张多米诺骨牌后，另外27张很容易。

结果如下：

http://dominocodes.net

我为瓷砖创建了一个类选择器，可以赋予它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类的背景颜色以及点数所在的跨度。

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

另一组在瓷砖上放置一条线：

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

然后我为多米诺骨牌上的每个可能的点子提出了一个类选择器，其中顶部为7个，底部为7个，总共有14个选择器。我不会在这里列出每个人的CSS。一旦你在这里研究了这两个例子，你就可以推断出并完成剩下的工作。（或者您可以转到我的页面并使用浏览器中的Inspect Element工具查看以查看或获取CSS。）

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

名称中的第一个字母指定pip是用于（T）op还是（B）ottom一半的tile。第二个字母指定它是在（L）eft侧，（C）进入，还是（R）ight侧。剩下的数字决定了pip将属于哪个数字组合。此命名约定适用于垂直图块。

例如：位于图块顶部中心的点数被命名为TC135，这意味着TC135是参与图块上半部分中包含一个，三个或五个的图块的中心点。 BR23456将是下半部分的点，显示两个，三个，四个，五个或六个。

每个点都有相同的宽度，高度，半径和颜色。每个类选择器的唯一区别是顶部和左侧值。

你会注意到，不是使用px作为宽度，高度，顶部和左边，我使用的是Lukin先生在他的拼图作品中所做的。这允许您只更改多米诺骨牌类选择器的font-size属性中的一个值，结果是页面上的所有多米诺骨牌都将按比例重新调整大小。使用一个小jquery和一个微调元素，我可以让访问者只需一行代码即可调整大小。我还是一个jquery新手，所以我还没有尝试过。

这里是TC135，BL23456和BR23456类选择器的css：

  .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;
 }

以下是用于构建平铺的HTML，顶部有一个点，底部有两个点。

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

Answer 3

您可以简单地将Unicode字符用于多米诺骨牌。有一套完整的装置，纵向和横向，从U + 1F030开始，到U + 1F093结束。

例如，2-3水平多米诺骨牌位于U + 1F042，看起来像：

Here's a chart显示完整的多米诺骨牌。

Domino的跟踪器使用HTML / CSS和Javascript

3 个答案: