HTML到CSS的鏈接不起作用
[英]HTML to CSS link not working
問題描述
我的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%;
}
5 個解決方案
解決方案1
2 已采納 2016-08-04 08:09:13
由於您的身體大小為零，因此未顯示任何內容：
只需將其添加到您的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>
解決方案2
1 2016-08-04 08:08:15
為您的html和body元素設置一個高度：
html, body { height: 100%; }
解決方案3
1 2016-08-04 08:08:32
當前，您的HTML和BODY元素沒有高度。 您將元素設置為零的百分比，始終為零。
您需要將高度設置為相對標准。 嘗試設置HTML和BODY高度，然后就可以使用所需的代碼了。
html, body { height:100%; } #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>
解決方案4
1 2016-08-04 08:08:36
我認為您不會設置body和html的高度。 在您的CSS中添加以下內容
html, body{
height: 100%;
width: 100%;
}
解決方案5
1 2016-08-04 08:11:08
由於您要按百分比給出高度和寬度，因此需要為body標簽指定高度和寬度
例如：
body{
height:100px; //either static or in percentage
width:100px
}
在CSS中，當您以百分比指定高度或寬度時，至少其祖先中的任何一個都應具有確定的高度/寬度值
為什么 <link type=“text/css” src=“html content”> 不工作
[英]why <link type=“text/css” src=“html content”> not working
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.