通过创建营养标签学习排版 - 步骤 61

Chinese 中文 HTML-CSS
1

告诉我们发生了什么：

步骤 61
在最后一个分隔符之后，使用文本 Protein 3g 创建另一个 p 元素。 使用必要的类来删除底部边框，并使用 span 使 Protein 加粗。

在这个元素之后，创建一个大分隔线。

以下是我递交的代码：

Protein 3g

然后我得到的提示：我的代码未通过，新的 p 元素应包含文本 Protein 3g。

我不是已经包含了吗？怎么还提示我没包含？求大神教教我。

到目前为止你的代码

<!-- file: index.html -->
<!-- User Editable Region -->

    <div class="daily-value small-text">
      <p class="bold right no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
      <div class="divider"></div>
      <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
      <div class="divider"></div>
      <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
      <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
      <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
      <p class="indent no-divider">Dietary Fiber 4g</p>
      <div class="divider"></div>
      <p class="indent no-divider">Total Sugars 12g</p>
      <div class="divider double-indent"></div>
      <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span></p>
      <div class="divider"></div>
    </div>
    <p class="double-indent no-divider"><span><span class="bold">Protein</span> 3g<span></p>
    <div class="divider large"></div>


<!-- User Editable Region -->

/* file: styles.css */

你的浏览器信息：

用户代理是： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

挑战信息：

通过创建营养标签学习排版 - 步骤 61

2

欢迎来到论坛 @n76457744

这里只需要进行一些修复。

请删除结束的“div”标签。

从段落元素中删除“双缩进”类名。

删除第一个和最后一个跨度标签。

快乐编码

1 Like
3

根据题目要求，不需要写 double-indent，并且你多写了一组 <span></span>标签。

另外，末尾应该是 </div> 标签，你把它放到前面去了。

1 Like