时间戳

首页 > 解决方案 > 在 CSS 中我的井字游戏没有显示 3x3 网格

javascript - 在 CSS 中我的井字游戏没有显示 3x3 网格

问题描述

我正在为初学者编码开始另一个项目：井字游戏。

我正在关注 YouTube 上的操作指南，但我的一些结果却有所不同，我无法确定我在哪里犯了错误。

问题

下面是我的代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- It's now connected to CSS file-->
<link rel="stylesheet" href="tictactoe.css"
<title>Tic Tac Toe </title>
</head>
<body>
<div class="container"> 
    <h1 class="title">Tic <span>Tac</span> Toe</h1>

    <div class="status-action">
        <div class="status"> x is next </div>
        <div class=" reset"> Reset </div>
    </div>
<!-- put "div.etc-etc" then press "tab" and it'll automatically give you the whole tag-->
    <div class="game-grid"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        
</div>
<!-- It's now connected to JS file-->
<script src="tictactoe.js"></script>
</body>
</html>

CSS

* {
box-sizing: border-box; 
margin: 0;
padding: 0; 
}


body {  
color: #545454;
display: flex; 
font-family: sans-serif;
justify-content: center;
}

.container {
background-color: #14BDAC;
margin: 50px;
padding: 50px;
border-radius: 25px;
width: 500px;
height: 500px;
}

.title {
text-align: center;}
.title span{
color: #F2EBD3;
}


.status-action {
 display: flex; 
margin-top: 25px;
font-size: 25px;
justify-content: space-around; 
}

.reset {
cursor: pointer; 
.reset:hover {
color: #F2EBD3;
}

.game-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 15px; 
}

.game-cell {
height: 200px;
width: 200px;
background: aquamarine;
}

这将是我正在关注的其他资源的视频：在此处输入链接描述
（希望视频从16:20开始，到20:40左右结束）

同样，如果我发布问题的方式不正确，请编辑并让我知道我哪里出错了，以便下次我能做得更好。
谢谢！

我不知道它为什么会显示，“！DOCTYPE HTML”下的“井字棋井字棋”
我也试图弄清楚，但无法找出问题所在。

标签： javascripthtmlcsstic-tac-toe

解决方案

由于您没有关闭 head 部分的链接标签，您将获得两次井字游戏： <link rel="stylesheet" href="tictactoe.css"></link>

此外，您的网格也可以正确显示，因为某些结束标签不在正确的位置。

CSS：

* {
box-sizing: border-box; 
margin: 0;
padding: 0; 
}


body {  
color: #545454;
display: flex; 
font-family: sans-serif;
justify-content: center;
}

.container {
background-color: #14BDAC;
margin: 50px;
padding: 50px;
border-radius: 25px;
width: 500px;
height: 500px;
}

.title {
text-align: center;
}
.title span{
color: #F2EBD3;
}


.status-action {
 display: flex; 
margin-top: 25px;
font-size: 25px;
justify-content: space-around; 
}

.reset {
cursor: pointer; 
}
.reset:hover {
color: #F2EBD3;
}

.game-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 15px; 
}

.game-cell {
height: 200px;
width: 200px;
background: aquamarine;
}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- It's now connected to CSS file-->
<link rel="stylesheet" href="tictactoe.css"></link>
<title>Tic Tac Toe </title>
</head>
<body>
<div class="container"> 
    <h1 class="title">Tic <span>Tac</span> Toe</h1>

    <div class="status-action">
        <div class="status"> x is next </div>
        <div class=" reset"> Reset </div>
    </div>
<!-- put "div.etc-etc" then press "tab" and it'll automatically give you the whole tag-->
    <div class="game-grid">
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
        <div class= "game-cell"></div>
    </div>
</div>
<!-- It's now connected to JS file-->
<script src="tictactoe.js"></script>
</body>
</html>

推荐阅读