【问题标题】:I am trying to make a GUI Using HTML, but my CSS code is not loading. I am not sure what the error is我正在尝试使用 HTML 制作 GUI,但我的 CSS 代码没有加载。我不确定错误是什么
【发布时间】:2017-11-20 08:56:06
【问题描述】:

我为 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 命令,我在记事本上运行它并删除了链接真实,但它再次无法正常工作。

【问题讨论】:

  • JavaScript 控制台说什么?任何错误输出?注意media= “screen”src= “game.js”src="main.js” 使用花哨的引号;用普通的旧" 替换它们。我还注意到charset="UTF-16″ 有另一种风格的引号作为结束引号。
  • 首先确保你在所有地方都使用相同的引号,因为我可以清楚地看到不同之处,例如:src="main.js”。之后确保你的 html 和 css 文件在同一个文件夹中
  • 之前我使用 UTF-8,但在某处读到它正在读取汉字,所以我改成了 UTF-16。我在许多编辑器中尝试了代码,我想这可能是更改引号的原因。我的所有文件都在同一个文件夹中。 Javascript 控制台显示警告,但即使它没有运行。

标签: javascript html css


【解决方案1】:

你说的是media= “screen”而不是media= "screen"

HTML 属性值不能用U+201C(左双引号)和U+201D(右双引号)分隔。

您必须使用U+0022(引号)或U+0027(撇号)。

观察差异:

pre { font-size: 400% }
<pre>media= “screen”
media= "screen"</pre>

同样你说background-image:url('board.png’); 使用U+2019(右单引号)而不是U+0027(撇号)。


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

【讨论】:

    【解决方案2】:

    下面的 css 是错误的,将会使下面的所有 css 过时:

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

    应该是:

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

    不同的是board.png后面是撇号而不是单引号。


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

    我还将按钮类更改为按钮元素(删除了前导点)并将主显示设置为阻止而不是无,以便您可以看到结果。为什么 css 不起作用的错误是我上面提到的撇号。此外,您还可以看到 Quentin 的回答中所说的 html 存在问题。

    【讨论】:

    • 不,这不是我纠正的问题。我认为 Link 标签有问题,它没有检测到样式表,有什么替代方法吗?
    • 查看我编辑的答案,我相信它现在会更好地解决问题。链接标签确实存在问题。但是,由于 jsfiddle 不使用该链接,它仍然适用于 jsfiddle。请参阅 Quentin 关于 HTML 问题的回答。
    • 我遇到的另一个问题是背景图像没有显示出来。我已将图像保存在所有文件所在的同一位置。
    猜你喜欢
    • 2021-07-21
    • 1970-01-01
    • 2022-07-08
    • 1970-01-01
    • 1970-01-01
    • 2017-11-13
    • 2022-10-24
    • 2022-11-28
    • 1970-01-01
    相关资源
    最近更新 更多