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

<title>float</title>

</head>

<style>

#div1{

width: 500px

border-bottom: 1px solid red

}

</style>

</html>

需要准备的材料分别有：电脑、chrome浏览器、html编辑器。

1、首先打开html编辑器，新建一个html文件，例如：index.html。

2、其次，在index.html的<body>标签中，添加代码：<hr/>。

3、浏览器运行index.html页面，此时成功在html中画了一条线。

欢迎分享，转载请注明来源：内存溢出

用html代码怎样画一条竖直线？