Question

我为html和CSS制作了两个单独的文件但它没有用。然后我在HTML中添加了CSS。完成后，它开始在网页上显示CSS代码。

/**
 * Load the main menu
 */
assetLoader.finished = function() {
  mainMenu();
}
/**
 * Show the main menu after loading all assets
 */
function mainMenu() {
  $('#main').show();
}
/**
 * Click handlers for the different menu screens
 */
$('.play').click(function() {
  $('#menu').hide();
  startGame();
});

*, *:before, *:after {
  box-sizing: border-box;
}
#menu.main {
  background-image:url('board.png’);
}
#main {
  display: none;
  height: 60%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
#main h1 {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.button {
  display: block;
  width: 150px;
  margin: 0 auto;
  height: 30px;
  line-height: 30px;
  border: 1px solid #AA2666;
  color: white;
  font-weight: bold;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  background-color: #FB1886;
  background-image: -webkit-linear-gradient(bottom, #FB1886 0%, #B30D5D 100%);
  background-image:         linear-gradient(to bottom, #FB1886 0%, #B30D5D 100%);
  border-radius: 5px;
}
.button:hover {
  background-color: #B30D5D;
  background-image: -webkit-linear-gradient(bottom, #B30D5D 0%, #FB1886 100%);
  background-image:         linear-gradient(to bottom, #B30D5D 0%, #FB1886 100%);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-16″>
  	<title>Game Engine</title>
	<link rel = "stylesheet" type= "text/css" href="ChessDisp.css" media= “screen”>
		
    
	<script type="text/javascript" src= “game.js”> </script>

</head>
<body>
  <div class="wrapper">
    <div id="menu" class="main">
      <div id="main">
        <h1>Game-Engine</h1>

          <h3> Welcome </h3>
          <h2>Select the Game Mode</h2>

        <button type="button" onclick="" >Play</button> <br>
        <button type="button" onclick="" >Pause</button> <br>
        <button type="button" onclick="" >Help</button> <br>
        <button type="button" onclick="" >About Game</button> <br>
        <button type="button" onclick="" >Settings</button> <br>
        <button type="button" onclick="" > License</button>

      </div>
    </div>
    <canvas id="canvas" width="800" height="480">

    </canvas>
  </div>
  <script type="text/javascript" src="main.js”> </script>
</body>
</html>

我已经尝试了很多运行，但我认为html文件存在一些问题。附：我是编程新手，所以我不确定出了什么问题。我早些时候在Pycharm上运行它，但它无法在HTML中检测到链接rel命令，我在记事本上运行它并删除了链接真实但它再次无效。

Answer 1

以下css是错误的，并且会将所有css置于过时：

background-image:url('board.png’);

它应该是：

background-image:url('board.png');

不同之处在于，在board.png之后有一个撇号而不是一个引号。

编辑：这是一个有效的jsfiddle：https://jsfiddle.net/fp8t81hv/

我还将按钮类更改为按钮元素（删除了前导点）并将主显示设置为阻止而不是无，以便您可以看到结果。 css不起作用的错误就像我上面提到的撇号一样。此外，您还可以看到在Quentin的答案中，html存在问题。

Answer 2

您已说过media= “screen”而不是media= "screen"

HTML属性值不能使用U+201C（左双引号）和U+201D（右双引号）进行分隔。

您必须使用U+0022（引号）或U+0027（APOSTROPHE）。

观察差异：

＆＃13;

pre { font-size: 400% }

＆＃13;

<pre>media= “screen”
media= "screen"</pre>

＆＃13;

同样，您使用background-image:url('board.png’);（正确的单引号）代替U+2019（APOSTROPHE）说U+0027。

您还使用了类选择器.button，但没有class="button"的元素。也许你的意思是类型选择器button？

我正在尝试使用HTML制作GUI，但我的CSS代码未加载。我不确定错误是什么

2 个答案: