如何在HTML中画一条线

html-css017

如何在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>

结果如下:

用一个div设置他的高度,width等于1,用border、background都可以给它设置颜色,它就是一条直线了。

具体实现方法操作如下:

工具原料:编辑器、浏览器;

方法1、可以给一个一定宽度的元素设置一个border-bottom属性,让其只有一个底边框,进而实现一条线的效果,代码如下:

<div id="div1">             </div><style>    #div1{    margin-top: 100px    width: 900px    border-bottom: 1px solid #000000    }

</style>

方法2、使用hr标签实现画一条线,代码如下:

<!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>