1

这是我应该制造的最终产品，我正处于这个阶段。

我如何在不影响 .

我如何粗体标记两个边框的最后一段，如最终产品所示，而不用粗体标记所有内容？另外，如果您愿意，可以告诉我是否应该以不同的方式编写所有内容。

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
    <title>Uppgift 4E</title>
    <style>
      html {
        background-color: lightslategrey;
      }

      body {
        margin: auto;
        width: 500px;
        padding-bottom: 0.1px;
        /*knep för div margin */
        background-color: #f0ffff;
        text-align: center;
        font-family: sans-serif;

      }

      h1 {
        Color: purple;
      }

      #billy {
        color: darkred;
        border-style: solid;
        border-color: purple;
        border-width: 1.5px;
        border-radius: 5px;
        text-align: left;
        margin: 10px;
      }

      #bob {
        color: darkgreen;
        border-style: solid;
        border-color: purple;
        border-width: 1.5px;
        /* border tjockhet */
        border-radius: 5px;
        /* rundiga kanter på border */
        text-align: left;
        margin: 10px;
      }

      p {
        margin-left: 5px;
        margin-right: 5px;
      }

      .two {
        font-size: large;
      }

      .three {
        font-size: small;
      }

      #bob>.two>a {
        text-decoration: overline underline;
      }
    </style>
  </head>
  <body>
    <h1>Uppgift 4E</h1>
    <div id="billy">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="two">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="three">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
    </div>
    <div id="bob">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="two">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="three">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
    </div>
  </body>
</html>
4

4 回答 4

0

使用<s></s>（删除线）标签或<del>. 该<strike>标签已过时是 HTML5。

例子：

.two a {
  text-decoration: line-through;
  font-weight: bold;
}
<p>Rachel</p>
<!--Rachel in paragraph tags-->

<p><s>Rachel</s></p>
<!--Rachel in paragraph tags with inner 's' tags-->

<p class="two">I my name is <a href ="#">Rachel</a></p>
<!--line-through css-->

你也可以使用css

 .yourclass a{text-decoration: line-through;}

关于加粗文本，使用font-weight:bold;

希望这可以帮助

于 2019-05-08T22:50:52.210 回答
0

尝试这个

#bob p:last-child {
   font-weight:bold;
}
#bob p:not(.two) a {
   text-decoration:line-through;
}
于 2019-05-09T06:29:23.750 回答
0

使用text-decoration: line-through;风格。不清楚你的标准是什么影响这个，所以我不能建议一个选择器。

标记每个 div 的最后一段：

div>p:nth-last-of-type(1) { font-weight: bold; font-size: 110%; }

如果您总是使用，您可能会发现将零件组装在一起会更容易一些：

* { box-sizing: border-box; }

所以容器大小实际上将是一个合理的人所期望的。

于 2019-05-09T01:35:03.323 回答
0

如果您可以将类添加到 HTML 元素，那么您可以专门为粗体或换行创建一个类，然后将其应用于您需要的段落。

于 2019-05-09T00:49:18.820 回答