用盒子模型实现竖线的效果。首先需要打开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>
使用<hr />标签可以插入一条直线。
HTML、CSS、JavaScript三项技术是静态网页设计、制作的核心，针对上述技术的特点，本书从三个方面入手，结合具体实例向读者介绍这三项技术的规范和具体应用。本书从网站建设开始讲起，继而提出网页的基本概念和设计思想，接着详细介绍网页设计的基本描述语言HTML和CSS、JavaScript脚本编程。
本书针对不同知识点的具体应用，提供相应任务范例，详细介绍任务的 *** 作步骤及原理。讲解深入浅出，理论结合实际，具有较强的可读性和可 *** 作性，可以在很大程度上提高读者的实践水平。
在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>
结果如下：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）