我想写一个展示出麻将九筒的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>
我知道哪儿错啦!在我的电脑上的代码每个element前面有一行注释,我用的是html的注释(也就是用了),但是三个类element是属于css语言(我用的是css内嵌),而css语言的注释是以 /* 开始,以 */ 结束。所以导致运行不出点数
复制你的页面是可以的展示的
出不来原因可能有
1.浏览器调试样式影响,关闭f12刷新
2.文件内容未保存
3.浏览器版本不支持某些样式,换个浏览器试试
“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;
}
根据需要修改上述代码