我的 html 文件中的链接无效。不过，我不确定是不是其他原因。当我运行该文件时，屏幕上没有任何显示。应该有五个不同颜色的矩形(你可能会想出来)。这可能是一个非常简单的修复，但我是初学者，需要一些快速帮助。这是我的 html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="play"></div>
<div id="create"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="purple"></div>
</body>
</html>
这是我的 CSS:
#play {
background-color:#FF0000;
height: 70%;
width: 60%;
}
#create {
background-color:#0000FF;
position: relative;
height: 28%;
width: 60%;
top:2%;
}
#yellow {
background-color:#E2BE22;
height: 28%;
width: 39%;
position: relative;
left: 61%;
bottom: 26%;
}
#green {
background-color:#008800;
position: relative;
height: 34%;
width: 39%;
left: 61%;
bottom: 90%;
}
#purple {
background-color:purple;
position:relative;
height: 34%;
width: 39%;
left: 61%;
bottom: 160%;
}
最佳答案
没有显示任何内容，因为您的 body 零尺寸:
只需将此添加到您的 CSS 中:
body {
width: 100vw;
height: 100vh;
}
html, body {
width: 100vw;
height: 100vh;
}
#play {
background-color:#FF0000;
height: 70%;
width: 60%;
}
#create {
background-color:#0000FF;
position: relative;
height: 28%;
width: 60%;
top:2%;
}
#yellow {
background-color:#E2BE22;
height: 28%;
width: 39%;
position: relative;
left: 61%;
bottom: 26%;
}
#green {
background-color:#008800;
position: relative;
height: 34%;
width: 39%;
left: 61%;
bottom: 90%;
}
#purple {
background-color:purple;
position:relative;
height: 34%;
width: 39%;
left: 61%;
bottom: 160%;
}
<div id="play"></div>
<div id="create"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="purple"></div>关于HTML 到 CSS 链接不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38761766/