关于边界的测试用例失败
关于边界的测试用例失败
提问于 2018-05-28 12:54:41
这是我用Udacity(交易卡)做的一个实验室。我在提交项目时遇到错误。我给了整个卡片的边框，但测试用例结果显示我没有给出边框。我将整个卡片放在div中
<div class="animal-whole">
然后把这个css放在整张卡片的边框上。但是我仍然得到失败的测试用例结果
.animal-whole{
border: 1px solid gray;
}我已经附加了整个HTML CSS代码的测试结果
这是HTML文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Building the Prototype</title>
</head>
<body>
<div id="container">
<!-- start -->
<div class="animal-whole">
<div class="animal-name">
<h1>Dog</h1>
</div>
<img id = "imgId" src="http://www.printesta.com/image/cache/catalog/new/CMS_Creative_164657191_Kingfisher-780x520.jpg" alt="dog" width="300px;">
<div id="card" class="animal-info">
<p id="interesting-fact">A layer of mucus on the dog's skin makes it immune to the fish-eating anemone's lethal sting.</p>
<ul id="facts">
<li id="dogBorder"><span>Scientific Name</span> Dog</li>
<li><span>Average Length</span> 40 centimeters</li>
<li><span>Average Lifespan</span> 15 years</li>
<li><span>Habitat</span>: I dont know</li>
</ul>
</div>
<p id="summary">Bright orange with three distinctive white bars, clown anemonefish are among the most recognizable of all reef-dwellers. They reach about 31 centimeters in length, and are named as Dog</p>
</div>
<!-- end -->
</div>
</body>
</html>这是CSS文件
#interesting-fact{
font-style: italic;
}
li{
font-weight: bold;
list-style: none;
}
#imgId{
width: 300px;
}
#imgId{
padding: 5px;
}
.animal-info{
border: 1px solid gray;
padding:5px;
}
.animal-name{
padding: 5px;
}
.animal-whole{
border: 1px solid gray;
}回答 5
Stack Overflow用户
回答已采纳
发布于 2018-05-28 13:27:13
在id为container的div上应用类animal-whole。
Stack Overflow用户
发布于 2018-05-28 13:09:07
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Building the Prototype</title>
<style>
#interesting-fact{
font-style: italic;
}
li{
font-weight: bold;
list-style: none;
}
#imgId{
width: 300px;
}
#imgId{
padding: 5px;
}
.animal-info{
border: 1px solid gray;
padding:5px;
}
.animal-name{
padding: 5px;
}
.animal-whole{
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="container">
<!-- start -->
<div class="animal-whole" id="animal-whole">
<div class="animal-name">
<h1>Dog</h1>
</div>
<img id = "imgId" src="http://www.printesta.com/image/cache/catalog/new/CMS_Creative_164657191_Kingfisher-780x520.jpg" alt="dog" width="300px;">
<div id="card" class="animal-info">
<p id="interesting-fact">A layer of mucus on the dog's skin makes it immune to the fish-eating anemone's lethal sting.</p>
<ul id="facts">
<li id="dogBorder"><span>Scientific Name</span> Dog</li>
<li><span>Average Length</span> 40 centimeters</li>
<li><span>Average Lifespan</span> 15 years</li>
<li><span>Habitat</span>: I dont know</li>
</ul>
</div>
<p id="summary">Bright orange with three distinctive white bars, clown anemonefish are among the most recognizable of all reef-dwellers. They reach about 31 centimeters in length, and are named as Dog</p>
</div>
<!-- end -->
</div>
</body>
</html>Stack Overflow用户
发布于 2019-12-06 16:18:39
#interesting-fact{
font-style: italic;
}
li{
font-weight: bold;
list-style: none;
}
#imgId{
width: 300px;
}
#imgId{
padding: 5px;
}
.animal-info{
border: 1px solid gray;
padding: 5px;
}
.animal-name{
padding: 5px;
}
.animal-whole{
border: 1px solid gray;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50559335
复制相关文章
相似问题