【发布时间】：2025-12-12 02:05:01
【问题描述】：
我正在尝试使用外部样式页面设置页面样式。我的一些 div 选择了所有样式，而有些则没有。特别是，所有包含图像文件的文件都采用除高度和/或宽度之外的所有样式。 z 位置、左侧、顶部等都可以正常工作。我检查了 DOM 资源管理器，它没有显示它从 body 标签继承了它的大小，但我不知道为什么它不能正确调整它们的大小。
HTML：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<link rel="stylesheet" type="text/css" href="race_inprogress.css">
<script type='text/JavaScript' src="race.js" language=javascript></script>
</head>
<body>
<h1 class = "amazing"> The Amazing Race For an A! </h1>
<h1 class = "fordmeis"> Professor Ford Vs Michael Meis </h1>
<div id="traffic-light">
<div id="stopLight" class="bulb"></div>
<div id="slowLight" class="bulb"></div>
<div id="goLight" class="bulb"></div>
</div>
<input type=button onClick="illuminateGreen();timer();" value='Go!' style="position: absolute; left: 545px; top:265px;">
<div class = "racer1">
<img src=images/teacher.jpg id='i1'>
</div>
<br><br><br><br>
<div class = "racer2">
<img src=images/meis.png id='i2'>
</div>
<div class = "road1">
<img src=images/road.jpg>
</div>
<div class = "road2">
<img src=images/road.jpg>
</div>
<div class = "winners">
<img src=images/winner_ford.png id='image1' onclick="reset()">
<br><br><br><br>
<img src=images/winner_meis.png id='image2' onclick="reset()">
</div>
<script>
illuminateRed()
hideImage()
</script>
<div class="vertical-line">
</div>
</body>
</html>
CSS：
html
{
height: 100%;
width: 100%;
}
body
{
font-family: sans-serif;
background: url("images/checkback.png");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
div.racer1
{
width: 10px;
position:absolute;
left: 25px;
top: 325px;
z-index: 2;
}
div.racer2
{
width: 10px;
position:absolute;
left: 25px;
top: 500px;
z-index:2;
}
div.road1
{
position:absolute;
left: 30px;
top: 325px;
z-index: 1;
height: 133px;
width: 1180px:
}
div.road2
{
position: absolute;
left: 30px;
top: 500px;
z-index: 1;
height: 133px;
width: 1180px;
}
div.winners
{
position:absolute;
left: 5px;
top: 0px;
z-index: 3;
width: 100%;
height: 100%;
}
h1.amazing
{
font-size: 30px;
position: relative;
top: 150px;
left: 20px;
color: gold;
}
h1.fordmeis
{
font-size: 30px;
position: relative;
top: 90px;
left: 700px;
color: gold;
}
#traffic-light
{
height: 200px;
width: 100px;
left: 500px;
position: absolute;
background-color: #333;
border-radius: 40px;
margin: -100px 0;
padding: 20px;
}
.bulb
{
height: 50px;
width: 50px;
background-color: #111;
border-radius: 50%;
margin: 15px auto;
transition: background 500ms;
}
div.vertical-line
{
width: 0px;
height: 315px;
top: 55px;
position:relative;
left: 1200px;
color: gold;
border: 10px inset;
z-index: 1;
}
【问题讨论】：