在 html 中自定义 hr 标签的粗细-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > 学无止境 > web前端 > html >

vue react javascript angular css html

在 html 中自定义 hr 标签的粗细

作者：迹忆客最近更新：2023/05/05 浏览次数：

本文解释了 html 中的

标记。我们还将解释标签的属性及其自定义，即 css 中粗细、颜色和不透明度的变化。

我们将通过创建一个 html 项目并实现

标签来进行演示。

html 中的 hr 标签

html 中的

标记使您能够添加主题分隔符或水平线来分隔或拆分文档部分。

需要适当的 css 来自定义它。它不需要结束标记。它的基本语法如下：

<hr property: value;> ...

属性:

align：该属性可以对齐页面上的水平线。左、中和右是对齐属性的可能值。
noshade：指定线条没有阴影效果。
size：指定水平线的高度。
width：指定水平线的宽度。
color：指定水平线的颜色。

学习 hr 标签功能的实例

让我们创建一个示例 html 项目来实现

标签。打开操作系统支持的任何 html 编辑器，例如 notepad/notepad (pc) 或 textedit (mac)。

在编辑器中编写以下简单的 html 代码，将文件保存为 filename.html，并在任何支持的 web 浏览器中打开保存的文件。

html>
<html>
    <body>
        <center>
            <h1>sample task to practice hr tagh1>
            <p>paragraph to split.p>
        center>
    body>
html>

在 html 中插入水平线

通过在源文件中插入

标记，在标题和段落之间设置一个水平分隔符。

将以下代码片段复制到上面创建的 html 文件中。

html>
<html>
    <body>
        <center>
            <h1>sample task to practice hr tagh1>
            <hr>
            <p>paragraph to split.p>
        center>
    body>
html>

标题和段落之间将显示一条水平线。此栏将具有颜色、大小、宽度、对齐的默认值。

自定义 html 中的水平线

可以根据所需的输出自定义属性（对齐、颜色、大小、宽度、阴影）。必须使用 css 修改文档中水平线的外观。

的高度属性指定了条的粗细。可以使用不透明度属性设置栏的可见性。

例如，如果有人想要在文档中不太突出的栏，则不透明度值必须小于 1。

水平线的粗细

css 的 height 属性用于指定水平线的粗细。高度的最小值为 1px。

以下是 css 样式表的代码片段。

hr {
        position: relative;
        top: 10px;
        border: none;
        height: 1px;
        background: green;
        margin-bottom: 30px;
        width: 30em;
    }

top 属性指定水平线和文档顶部之间的间隙。 css 中的背景是 html 颜色属性的替代品。

它指定条形的颜色。演示这些属性的完整代码如下：

html>
<html>
<head>
    <title> document title>
    <style>
    hr.class1 {
        position: relative;
        top: 10px;
        border: none;
        height: 1px;
        background: red;
        margin-bottom: 30px;
        width: 30em;
    }
    hr.class2{
        position: relative;
        border: none;
        height: 10px;
        background: green;
        width: 30em;
    }
    style>
head>
<body>
<center>
<h1>sample task to practice hr tagh1>
<hr class=class1>
<hr class=class2>
<p>paragraph to split.p>
center>
body>
html>

水平线的不透明度

css 中的 opacity 属性指定水平线的透明度。不透明度值 1 表示不透明，而不透明度值 0 表示完全透明。

以下是不透明度属性的语法。

hr
{
    background-color: gray;
    opacity: 0.5;
}

示例:

html>
<html>
<head>
    <title> document title>
    <style>
    hr.class1 {
        position: relative;
        top: 10px;
        border: none;
        height: 1px;
        background: red;
        margin-bottom: 30px;
        width: 30em;
    }
    hr.class2{
        position: relative;
        border: none;
        height: 10px;
        background: green;
        margin-bottom: 30px;
        width: 30em;
    }
    hr.class3{
        position: relative;
        border: none;
        height: 10px;
        background: green;
        width: 30em;
        opacity: .25;
    }
    style>
head>
<body>
<center>
<h1>sample task to practice hr tagh1>
<hr class=class1>
<hr class=class2>
<hr class=class3>
<p>paragraph to split.p>
center>
body>
html>