我正在尝试使用HTML制作GUI，但我的CSS代码无法加载。我不确定错误是什么
我为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中的link rel命令，我在记事本上运行它，并删除了link real，但它仍然不起作用。
回答 2
Stack Overflow用户
发布于 2017-11-20 17:30:07
下面的css是错误的，将渲染过时下面的所有css：
background-image:url('board.png’);它应该是：
background-image:url('board.png');不同的是，在board.png之后有一个撇号，而不是一个单引号。
编辑:这是一个有效的jsfiddle：https://jsfiddle.net/fp8t81hv/
我还将button类更改为button元素(删除了前导圆点)，并将主显示设置为block而不是none，这样您就可以看到结果了。错误的css为什么不工作是撇号，就像我上面提到的。此外，您还可以看到，正如Quentin的回答中所说的，html有一个问题。
Stack Overflow用户
发布于 2017-11-20 17:40:19
你说的是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
https://stackoverflow.com/questions/47388171
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号