Question

这是我在这里发表的第一篇文章，请原谅我的格式是不正确的。我正在建立一个项目，我遇到了我的div。在我的项目中，我无法让我的div显示出他们的CSS风格。空白区域应该在那里，但div（卡片）应该是黄色的，带有黑色边框。

<!DOCTYPE html>
<html>

<head>
  <title>Memory Card Game</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <h1>Memory Game</h1>
  <nav a="#"><h2>Instructions</h2></nav>
  <nav a="Game">Game</nav>
  <p>Concentration, also known as Match Match, Memory, Pelmanism, Shinkei-suijaku, Pexeso, or Pairs, is a card game in which all of the cards are laid facedown on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.</p>
  <div class="board">
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div> 
  </div>

  <footer>Created with ♥ by <span class="name">GA</span></footer>

  <script type="text/javascript" src="main.js"></script>
</body>

</html>



h1 {
    color: rgb(2, 132, 130);
}
h2 {
    color: #ffd700;
}

body {
    text-align: center;
}

.board {
    display: inline-block;
    height: 80%;
    width: 50%;
    background-color: yellow;
}
.card {
    height: 200px;
    width: 150px;
    border-color: black;
    border-width: 10px;
    border-radius: 10px;
}
.name {
    color: #ff0000;
}

更新我的更改： http://imgur.com/a/GEXot

下面是我的网页正在做什么以及它应该是什么样子的屏幕截图。

https://imgur.com/a/1lyl4#bel6qqd

Answer 1

你可以改变css如下

  h1 {
color: rgb(2, 132, 130);
   }
h2 {
color: #ffd700;
 }

body {
text-align: left;
}

.board {
display: inline-block;
height: 80%;
width: 50%;
color: yellow;
}
.card {
height: 200px;
width: 150px;
border:solid 1px black;
border-radius: 10px;
color: black;
background-color:yellow;
 }
.name {
color: #ff0000;
}

请查看我的http://prntscr.com/db2se1

的屏幕截图

Answer 2

<link rel="stylesheet" type="text/css" href=" style.css">

用此

替换您的链接

为什么我的div标签不显示？

2 个答案: