Question

这是我正在使用Udacity（交易卡）的实验室。我在提交项目时遇到错误。我给了整张卡的边框，但测试用例结果显示我没有给出边框。我把整张卡放在div里面

<div class="animal-whole">

并把这个css放在整个卡片周围。但我仍然将测试用例结果视为失败

  .animal-whole{
    border: 1px solid gray;
}

我已将测试结果附加到整个HTML CSS代码

Image of test result

这是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;
}

Answer 1

在ID为animal-whole的div上应用课程container。

Answer 2

<!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>

Answer 3

#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;
}

Answer 4

  <!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" 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>

Answer 5

这是CSS文件，这是HTML文件

/* add your CSS here */
#interesting-fact{font-style:italic;}
#facts{list-style-type:none;}
span{
  padding: 10px 50px 20px;
  font-weight:bold;}
h1{
  padding: 10px 50px 20px;}

#container{
  padding: 1px 5px 2px;
  border:3px solid black;}
#card{
  padding: 1px 5px 2px;
  border:3px solid black;}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <meta charset="utf-8">
  <title>Building the Prototype</title>

</head>

<body>
  <div id="container">
    <h1>Uromastyx</h1>
    <!-- photo credit: wikipedia.org, image taken by Ritik -->
    <img style="width:300px"src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Blumeng%C3%A4rten_Hirschstetten_2016-02-21_Dornschwanzagame_%28Uromastyx_geyri%29_c.jpg/1024px-Blumeng%C3%A4rten_Hirschstetten_2016-02-21_Dornschwanzagame_%28Uromastyx_geyri%29_c.jpg" alt="Uromastyx">
    <div id="card" class="animal-info">
      <p id="interesting-fact">Uromastyx is a genus of African and Asian agamid lizards, the member species of which are commonly called spiny-tailed lizards, uromastyces, mastigures, or dabb lizards. Lizards in the genus Uromastyx are primarily herbivorous, but occasionally eat insects and other small animals, especially young lizards. They spend most of their waking hours basking in the sun, hiding in underground chambers at daytime or when danger appears. They tend to establish themselves in hilly, rocky areas with good shelter and accessible vegetation.
</p>
      <ul id="facts">
        <li>
          <span>Scientific Name</span>: Uromastyx
        </li>
        <li>
          <span>Average Length</span>:10 centimeters
        </li>
        <li>
          <span>Average Lifespan</span>: 15 years
        </li>
        <li>
          <span>Habitat</span>: Africa and the Middle East
        </li>
      </ul>
      <p id="summary">Uromastyx is a genus of African and Asian agamid lizards, the member species of which are commonly called spiny-tailed lizards, uromastyces, mastigures, or dabb lizards. Lizards in the genus Uromastyx are primarily herbivorous, but occasionally eat insects and other small animals, especially young lizards
      </p>
    </div>
  </div>
</body>

</html>

关于边界的测试用例失败

5 个答案: