用html展示出麻将九筒的图片

我想写一个展示出麻将九筒的html网页,但是不知道怎么回事一直显示不出点数,只有box
希望能得到指正
我的代码如下:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>九筒title>
    <style>
        .box{
            display:flex;
           flex-wrap:wrap;
           align-content:space-between;
        }
        .column{
            flex-basis:100%;
            display:flex;
            justify-content:space-between;
        }
        
        .element1{
            display:block;
            width:36px;
            height:36px;
            background-color:white;
            border-radius:50%;
            box-shadow:inset 0 3px #111, inset 0 -3px #555;
            margin:4px;
        }


        
        .element2{
            display:block;
            width:36px;
            height:36px;
            background-color:white;
            border-radius:50%;
            box-shadow:inset 0 3px #ff0000,inset 0 -3px #fa8072;
            margin:4px;
        }

        
        .element3{
            display:block;
            width:36px;
            height:36px;
            background-color:white;
            border-radius:50%;
            box-shadow:inset 0 3px #2E8B57,inset 0 -3px #228B22;
            margin:4px;
        }


        [class$="box"]{
            margin:16px;
            padding:4px;

            background-color:#e7e7e7;
            width:104px;
            height:104px;
            object-fit:contain;

            box-shadow:
            inset 0 5px white,
            inset 0 -5px #bbb,
            inset 5px 0 #d7d7d7,
            inset -5px 0 #d7d7d7;

            border-radius:10%;
        }
        style>
head>
<body>
    <div class="box">
        <div class="column">
            <span class="element1"> span>
            <span class="element2">span>
            <span class="element3">span>
        div>

         <div class="column">
             <span class="element1">span>
             <span class="element2">span>
             <span class="element3">span>
         div>

        <div class="column">
            <span class="element1">span>
            <span class="element2">span>
            <span class="element3">span>
        div>
    div>
body>
html>

img

我知道哪儿错啦!在我的电脑上的代码每个element前面有一行注释,我用的是html的注释(也就是用了),但是三个类element是属于css语言(我用的是css内嵌),而css语言的注释是以 /* 开始,以 */ 结束。所以导致运行不出点数

复制你的页面是可以的展示的
出不来原因可能有
1.浏览器调试样式影响,关闭f12刷新
2.文件内容未保存
3.浏览器版本不支持某些样式,换个浏览器试试

img


你的代码是可以显示出点数的

“Devil组”引证GPT后的撰写:
没有将九筒的点数显示出来,因为在代码中没有添加任何文本或图像元素。可以在每个九筒元素中添加对应的点数文本,如下所示:

<div class="box">
    <div class="column">
        <span class="element1">9</span>
        <span class="element2"></span>
        <span class="element3"></span>
    </div>

     <div class="column">
         <span class="element1"></span>
         <span class="element2"></span>
         <span class="element3"></span>
     </div>

    <div class="column">
        <span class="element1"></span>
        <span class="element2"></span>
        <span class="element3"></span>
    </div>
</div>


在上述代码中,在第一个九筒元素的 标签中添加了 "9" 的文本,表示这是九筒。其他的 标签没有文本,因为它们代表的是其他花色的牌。

另外,可以使用 CSS 中的伪类选择器 :nth-child() 来设置每一列中的元素样式。例如,以下代码将第一列的第一个元素的 box-shadow 属性更改为绿色:

.column:nth-child(1) .element1 {
    box-shadow: inset 0 3px #2E8B57, inset 0 -3px #228B22;
}


根据需要修改上述代码