【发布时间】: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