下载PDF文件
下载PDF文件
本文教你如何在HTML中创建水平线。水平线可以用来分隔网站上的内容。创建一行的代码非常简单。但是，你可以在HTML 4.01中添加嵌入代码来设计行。在HTML5中，你需要使用CSS对行进行样式设置。 [1] X 研究来源
步骤
-
打开或创建一个新的HTML文档。 可以使用文本编辑器（如“记事本”）编辑HTML文档。你还可以使用代码编辑器，如Adobe Dreamweaver。使用以下步骤在程序中打开HTML文档或者采用其他方法：
- 打开“记事本”，或者文本编辑器和代码编辑器。
- 点击 文件 菜单。
- 点击 打开 。
- 选择HTML文件。
- 点击 打开
-
选择要插入行的位置。 向下滚动，直到找到要插入这行的上面一行，然后点击这行的最左侧，将光标直接放在这一行的最前面。
-
创建空白区域。 按两次 Enter ，向下移动你想要在上面输入行的文本，然后将光标向上移动到空白区域。
-
添加"<hr>"标签。 在行开始前的空格中输入 <hr> 。 <hr> 标签负责在整个页面上创建一条水平线。
-
将“hr”标签前面的行移到新行上。 按 Enter 即可。这时， <hr> 标签应该就在自己的那一行了。
-
向水平线添加属性（可选）。 你可以向水平线添加属性，例如长度、宽度、颜色和对齐。在代码括号中的“hr”后面使用以下代码。可以在括号中添加多个属性，方法是用空格分隔它们。 [2] X 研究来源
- 输入 <hr size="#"> 更改行的粗细。用粗细的数字（如，size="10"）替换#。
- 输入 <hr width="#"> 更改行的宽度。用宽度的像素数或页面宽度的百分比（如，width="200", or width="75%"）替换#。
- 输入 <hr color="#"> 更改行的颜色。用颜色或十六进制代码的名称（如，color="red" or color="#FF0000"）替换#。
- 输入 <hr align="#"> 对齐行。用"right"、"left"或"center"（如， <hr width="50%" align="center"> ）替换#。
-
保存HTML文件。 要将文本文件保存为HTML文档，你需要将文件扩展名（.txt、.docx）替换成“.html”。使用下列步骤保存HTML文件：
- 点击 文件 菜单。
- 点击 另存为 。
- 在“文件名”旁边输入文件名称。
- 在文件名末尾输入 .html 。
- 点击 保存 。
-
测试HTML。 右击文件，选择 打开方式 。然后选择网页浏览器。在“hr”标签的位置应该会出现一条实线。你的HTML代码应该是这样的： [3] X 研究来源
<!DOCTYPE html> < html > < body > < h1 > 这是标题 </ h1 > < hr size = "6" width = "50%" align = "left" color = "green" > < p1 > 这是段落文本，与标题之间用一行隔开。 </ p1 > </ body > </ html >
广告
-
打开或创建一个新的HTML文档。 可以使用文本编辑器（如“记事本”）编辑HTML文档。你还可以使用代码编辑器，如Adobe Dreamweaver。使用以下步骤在程序中打开HTML文档或者采用其他方法：
- 打开“记事本”，或者文本编辑器和代码编辑器。
- 点击 文件 菜单。
- 点击 打开 。
- 选择HTML文件。
- 点击 打开
-
在HTML文档中添加head标签。 如果HTML文档还没有head标签，采用以下步骤添加head标签。head标签位于“<html>”标签后面，“<body>”标签的前面。
- 在文档顶部输入 <head> 。
- 按两次 Enter 添加新的两行。
- 输入 </head> 结束head标签。
-
在head标签内输入 <style type="text/css"> 。 style标签位于两个head标签之间。这样就创建了一个位置，你可以在其中输入CSS代码来设置HTML的样式。
- 或者你也可以用外部样式表。查看 " 如何将CSS文件添加到HTML " 了解如何将外部CSS文件链接到HTML文件。
-
输入 hr { 。 这是用于设置水平线样式的CSS标签。在head标签内的style标签后添加它，或者在外部CSS文件中添加。
-
添加"<hr>"标签的CSS样式。 这些样式在"hr {"标签的后面。设置水平线样式的方法有很多。下面提供一些示例。
- 输入 width: ##px; 设置行宽度。用行宽的像素数替换##。你还可以使用百分比（%）代替像素（px）。
- 输入 height: ##px; 设置行的粗细。用行粗细的像素数替换##。
- 输入 background-color: ##; 设置行的颜色。将##替换为颜色名称，或井号（#）后面加上十六进制颜色代码。
- 输入 margin-right: ##px; 设置右边距像素数。用像素数或“自动”替换##。输入“自动”将行左对齐或中间对齐。
- 输入 margin-left: ##px; 设置左边距像素数。用像素数或“自动”替换##。输入“自动”将行右对齐或中间对齐。
- 输入 margin-top: ##px; 设置行的顶部外边距。将##替换为页边距的大小或像素数。
- 输入 margin-bottom: ##px; 设置行的底部外边距。将##替换为页边距的大小或像素数。
- 输入 border-width: ##px; 创建行周围的边框（可选）。用边框粗细的像素数替换##。
- 输入 border-color: ##; 设置边框颜色（可选）。将##替换为颜色名称，或者井号（#）后面加上十六进制颜色代码。
-
在样式设置后输入 } 。 这样就会关闭<hr>标签的样式设置。
-
在HTML文档body标签中的任意位置输入 <hr> 。 这样就会向HTML文档添加一条水平线。任何时候在HTML文档中使用<hr>标签时，CSS样式设置都会适用。 [4] X 研究来源 你的代码应该是这样的：
<!DOCTYPE html> < html > < head > < style type = "text/css" > hr { width : 50 % ; height : 20 px ; background-color : red ; margin-right : auto ; margin-left : auto ; margin-top : 5 px ; margin-bottom : 5 px ; border-width : 2 px ; border-color : green ; } </ style > </ head > < body > < h1 > 这是标题 </ h1 > < hr > < p1 > 这是用水平线分隔的段落文本 </ p1 > </ body > </ html >
广告
参考
广告
