数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何将水平线分成多个部分？
在 HTML 中，<hr> 标签代表 水平线，最常显示为用于分隔内容（或定义更改）的水平线 HTML 页面。<hr> 标签是一个空标签，不需要后跟闭合标签。以下是此标签的语法 –
<hr> ...
它支持以下属性
align: 它确定规则在页面上的对齐方式（左/中/右）。如果未指定值，则使用默认值（左）。
color: 它使用颜色名称或十六进制值设置规则的颜色。
noshade: 它将规则设置为没有阴影。
size: 它以像素为单位设置规则的高度。
width: 它以像素或百分比为单位设置规则的宽度。
示例
下面的示例显示了 <hr> 标签的默认行为。
<!DOCTYPE html>
<html>
<title>An example of horizontal rule</title>
<body>
<h3>It is a beautiful day</h3>
<hr>
There is a horizontal rule above this line.
</body>
</html>
但是，我们可以通过使用下面讨论的某些 CSS 属性将水平线分成多个部分。
CSS 属性 Display
‘display’ CSS 属性确定元素是作为块元素还是内联元素处理，以及用于其子元素的布局，可以是流布局、网格或弹性布局。正式地，display 属性指定元素的内部和外部显示类型。
外部类型确定元素在流布局中的参与；内部类型确定子布局。
display: value;
一些重要的值包括：inline、block、contents、flex、grid、inline-block 等。
inline: 元素创建一个或多个内联元素框，其前后没有换行符。如果有空间，下一个元素将在普通流中的同一行上。
block: 在普通流中，元素生成一个块元素框，在元素前后都生成换行符。
contents: 容器被移除，并且 DOM 中上一级元素的子元素被替换。
flex: 元素表现为块元素，并使用弹性盒模型排列其内容。
grid: 元素表现为块元素，并使用网格模型排列其内容。
inline-block: 元素创建一个块元素框，该框与周围内容一起流动，就像它是一个单独的内联框一样（行为与替换元素非常相似）。
使用 border-top 属性的虚线值
‘border-top’ 简写属性将所有顶部边框属性连接到一个声明中。必须按以下顺序设置以下属性
border-top-width
border-top-style (必需) (必需)
border-top-color
如果未指定 border-top-color，则使用的颜色将是文本颜色。
语法
border-top: border-width border-style border-color
其中，
border-width: 它设置元素顶部边框的宽度。
border-style: 它设置元素顶部边框的样式（点状/虚线/实线/隐藏…）。
border-style: 它设置元素顶部边框的样式（点状/虚线/实线/隐藏…）。
示例
此示例在 <hr> 元素上使用 border-top 属性及其“dashed”值，并将水平线分成多个部分。
<!DOCTYPE html>
<html>
<head>
<title>How to Divide a Horizontal Line into Multiple Parts?</title>
<style>
hr {
border-top: 4px dashed thistle;
}
p{
background-color:lavenderblush;
padding:5px 4px 4px 10px;
color:rebeccapurple;
font-size:18px;
border:1px solid purple;
}
</style>
</head>
<body>
<hr>
<h2>A Life Lesson</h2>
<hr>
<p>
The unhappiest people are often those who care the most about what everyone else thinks. There is great freedom in leaving others to their opinions. And there is a huge weight lifted when you take nothing personally.
</p>
</body>
</html>
使用具有不同宽度的多个 <hr> 标签
在此示例中，我们使用多个 <hr> 元素，并将 display 设置为“inline-block”，并将 border-top 设置为“solid”。然后我们设置每条水平线的所需宽度。
示例
<!DOCTYPE html>
<html>
<head>
<title>How to Divide a Horizontal Line into Multiple Parts?</title>
<style>
.inlineHR {
display: inline-block;
border-top: 4px solid mediumvioletred;
}
.hr1 {
width: 70px;
}
.hr2 {
width: 60px;
margin-left: 10px;
}
.hr3 {
width: 50px;
margin-left: 10px;
}
.hr4 {
width: 40px;
margin-left: 10px;
}
.hr5 {
width: 30px;
margin-left: 10px;
}
p{
text-align:justify;
background-color:seashell;
}
</style>
</head>
<body>
<h2>CSS display property</h2>
<hr class='inlineHR hr1' />
<hr class='inlineHR hr2' />
<hr class='inlineHR hr3' />
<hr class='inlineHR hr4' />
<hr class='inlineHR hr5' />
<p>
The display CSS property determines whether an element is treated as a block or inline element, as well as the layout used for its children, which can be flow layout, grid, or flex. Formally, the display property specifies the inner and outer display types of an element. The outer type determines an element's participation in flow layout; the inner type determines child layout.
</p>
</body>
</html>
301 次查看
