Question

我想知道如何使用标记<hr>或<span>制作标记<div>效果。

我在大型网站上看到水平线，但它们不使用<hr>标记。

＆＃13;

<!DOCTYPE html>
<html lang="pt-Br">
  <head>
    <title> H - Line </title>
   </head>
 <body>
    <hr/>
 </body>
</html>

＆＃13;

Answer 1

您可以使用任何其他HTML标记，按以下方式定义：

span{ display:block; width:100% /*or whatever width you want the effect of <hr>*/ border-top: 1px solid #ccc }

注意你可以使用border-bottom或border-top并使它成为你想要的任何颜色（#ccc非常类似于发际线标签）

祝你好运！

Answer 2

首先，<hr>可以使用CSS设置样式。

hr {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

以上代码由CSS-Tricks.com提供。 See more examples

只要有可能，您应该坚持其语义值的横向规则。仅仅因为“大型网站”不使用hr标签并不意味着它做错了，特别是因为他们不使用它们的原因是未知的。

如果您想避免使用<hr>标记，请考虑CSS border properties。

div {
  height: 50px;
  border-bottom: 2px solid black;
}

<div></div>

Answer 3

嗯，这是一个很好的问题。首先，您可以使用hr，然后设置其样式。如果这没有帮助，那么svg呢？我看了一个Codepen，这是我能得到的最好的代码，您可以编辑颜色以及所有内容，这只是基础知识。

.path2 {
  stroke-dasharray: 1120;
/*   stroke-dashoffset: 800; */
  animation: draw1 1s linear alternate;
}

@keyframes draw1 {
  from {
    stroke-dashoffset: 1120;
  }
  to {
    stroke-dashoffset: 2240;
  }
}

<svg version="1.1" id="line_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1200px" height="5px" xml:space="preserve">
  <path class="path2" fill="#01a09e" stroke-width="3" stroke="#01a09e" d="M0 0 l1120 0"/>
</svg>

也-它具有轻微的动画效果，请在CSS中使用“关键帧”将其删除。希望我能帮上忙我已经使用了一段时间的一种方式。

Answer 4

我使用div，因为它的行为类似于anHR（它们都是块）。然后有两条路线。首先是给div设置1px的高度（或2或3，您想要的高度）并添加边距。另一个是带有边框的高度0。

.hr1 {
    height: 1px;
    background: blue;
}

.hr2 {
    height: 0;
    border-bottom: 1px solid green;
}

<p>some text</p>
<div class="hr1"></div>
<p>some text</p>
<div class="hr2"></div>
<p>some text</p>

有趣的是，您现在可以添加各种技巧。您可以使用渐变，添加阴影，对其进行一些转换。它提供了很大的创造空间

如何使用<span>或<div>而不是<hr />创建水平线？

4 个答案: