如何在HTML中画一条线

html-css09

如何在HTML中画一条线,第1张

在html中花一条线的方法是有很多的,一般可以直接使用html代码实现或者借助css代码来实现都是可以的。

方法1、使用<hr>标签画线

<html>

<body>

<p>hr 标签定义水平线:</p>

<hr />

<p>这是段落。</p>

<hr />

<p>这是段落。</p>

<hr />

<p>这是段落。</p>

</body>

</html>

结果如下:

方法2:使用css的border进行画线

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>float</title>

</head>

<div id="div1"></div>

<style>

#div1{

width: 500px

border-bottom: 1px solid red

}

</style>

</html>

结果如下:

1、html没有直接插入竖线的代码,但可以用盒子模型实现竖线的效果。具体的做法是首先需要打开hbuilder编辑器,新建一个html文件,写入基本的html结构:

2、然后插入一个div标签,在上方的style标签里面设置div的css样式,这里给div设置背景颜色,并给它一个高度,宽度设置为0,设置border-left属性即可做出竖线:

3、最后打开浏览器,即可看到一个蓝色的竖线了: