需要准备的材料分别有：电脑、chrome浏览器、html编辑器。
1、首先打开html编辑器，新建一个html文件，例如：index.html。
2、其次，在index.html的<body>标签中，添加代码：<hr/>。
3、浏览器运行index.html页面，此时成功在html中画了一条线。
网页中制作一条水平线的HTML代码有以下的方法可以实现：
1.使用html中的border属性来设置一条水平线
<div style="width:500px border:1px solid red"></div><!--复制到html文件中就会是一条红色水平直线，线的颜色、长短、可自己调节-->2.使用hr标签可以制作一条水平直线
<hr/>
3.使用background-color来制作一条线，和border基本类似
<div style="width:500px height:1pxbackground-color:red"></div><!--复制到html文件中就会是一条红色水平直线，线的颜色、长短、可自己调节-->4.可利用背景图来实现和background-color原理一样
<div style="width:500px height:1pxbackground:url(背景图的路径) repeat-x"></div><!--复制到html文件中就会是一条红色水平直线，线的颜色、长短、可自己调节-->用盒子模型实现竖线的效果。首先需要打开hbuilder编辑器，新建一个html文件，写入基本的html结构：然后插入一个div标签，在上方的style标签里面设置div的css样式，这里给div设置背景颜色，并给它一个高度，宽度设置为0，设置border-left属性即可做出竖线：最后打开浏览器，即可看到一个蓝色的竖线了。
插入<hr/>标签实现，修改宽度和高度实现竖线效果，由于<hr/>标签有局限性，不推荐使用；示例如下：<hr style="height:60pxwidth:1px" />。插入<table>表格标签，修改样式实现竖线效果,示例代码如下；<table style="height:60pxborder-color:000000border-left-style:solidborder-width:1px"><tr><td valign="top"></td></tr></table>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）