gpt4 book ai didi

HTML 到 CSS 链接不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 14:29:54 25 4
gpt4 key购买 nike

我的 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;
}

JsFiddle

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com