Question

逐步 1.使用CSS类的详细信息和mdc-elevation--z3创建DIV。该DIV应该包含5个PARAGRAPH元素，每个元素包含一个带有CSS类prop的SPAN和另一个带有CSS类值的SPAN

2。使用到目前为止创建的SPAN元素，您的应用将显示任何给定用户的年龄，身高，体重，性别和国家/地区。我们称这些为用户属性！

3。对于给定的用户属性（例如，年龄），找到一个PARAGRAPH元素，并为class prop的子SPAN赋予data-age的HTML属性，然后将其文本值设置为Age:。具有类值的SPAN应该具有data-age-value的HTML属性。 HTML属性不需要一个值。

就像年龄一样，对上面列出的所有用户属性执行相同的操作，以便将所有SPAN元素对都映射到一个单独的用户属性。随意订购它们。

这是我的代码

<div class = "details and mdc-elevation--z3">

<p>
    <span class="prop"> <a class ="data-age">Age :</a></span>
    <span class="value"><a class ="data-age-value"></a></span>
  </p>

  <p>
   <span class="prop"> <a class ="data-height">Height :</a></span>
    <span class="value"><a class ="data-height-value"></a></span>
  </p>

  <p>
   <span class="prop"> <a class ="data-weight">Weight :</a></span>
    <span class="value"><a class ="data-weight-value"></a></span>
  </p>

  <p>
   <span class="prop"> <a class ="data-gender">Gender :</a></span>
    <span class="value"><a class ="data-gender-value"></a></span>
  </p>

  <p>
  <span class="prop"> <a class ="data-country">Country :</a></span>
    <span class="value"><a class ="data-country-value"></a></span>
  </p>

Answer 1

尝试一下，我相信它将为您提供帮助

<div class = "details mdc-elevation--z3">

      <p>
        <span class = "prop" data-age>Age:</span>
        <span class = "value" data-age-value></span>
      </p>  
      <p>
        <span class = "prop" data-height>Height:</span>
        <span class = "value" data-height-value></span>
      </p> 
      <p>
        <span class = "prop" data-weight>Weight:</span>
        <span class = "value" data-weight-value></span>
      </p> 
      <p>
        <span class = "prop" data-gender>Gender:</span>
        <span class = "value" data-gender-value></span>
      </p> 
      <p>
        <span class = "prop" data-country>Country:</span>
        <span class = "value" data-country-value></span>
      </p> 

    </div>

我需要帮助将详细信息添加到span元素

1 个答案: