在html中我要打出一条虚线怎么写

 我来答
大豆豆x2
2018-03-30 · TA获得超过3131个赞
知道小有建树答主
回答量:23
采纳率:100%
帮助的人:3040
展开全部

具体有两种方法:

1、画虚线的图,然后插入网页中。缺点是这个虚线不能随意变动大小,因为拉伸图片会产生失真。

2、编程<div style="width:200px;height:0px;border-top:1px black dashed;" />。缺点,不能改变方向。

还可以用svg,可以随意改变大小,粗细,方向,例子如下:

<html>

<head>

</head>

</head>

<body>

<svg

xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:cc="http://creativecommons.org/ns#"

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

version="1.1"

width="500"

height="500"

id="svg2">

<defs

id="defs4" />

<metadata

id="metadata7">

<rdf:RDF>

<cc:Work

rdf:about="">

<dc:format>image/svg+xml</dc:format>

<dc:type

rdf:resource="http://purl.org/dc/dcmitype/StillImage" />

<dc:title></dc:title>

</cc:Work>

</rdf:RDF>

</metadata>

<g

transform="translate(0,-552.36218)"

id="layer1">

<path

d="m 68.571428,651.6479 239.999992,0"

id="path2985"

style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1, 3;stroke-dashoffset:0" />

</g>

</body>

</html>

缺点是不能直接在IE里用,火狐、Chrome等都没问题。

raycar0524
2013-03-30 · TA获得超过4683个赞
知道小有建树答主
回答量:812
采纳率:0%
帮助的人:634万
展开全部
具体方法有三个:(楼下的提供了另一个思路,把他的修正了一下)
1. 画虚线的图,然后插入网页中,缺点是这个虚线不能随意变动大小。因为拉伸图片会产生失真。
2. <div style="width:200px;height:0px;border-top:1px black dashed;" />,缺点,不能改变方向

3. 用svg,可以随意改变大小,粗细,方向,例子如下:
<html>
<head>
</head>
</head>
<body>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="500"
height="500"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0,-552.36218)"
id="layer1">
<path
d="m 68.571428,651.6479 239.999992,0"
id="path2985"
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1, 3;stroke-dashoffset:0" />
</g>
</body>
</html>
缺点,不能直接在IE里用,火狐、Chrome等都没问题。
想在IE里用,还得加入Raphaël—JavaScript Library,让IE能识别这个SVG图。
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
神仙VI
2013-03-30 · 超过22用户采纳过TA的回答
知道答主
回答量:95
采纳率:100%
帮助的人:48.8万
展开全部
你可以 <hr/ style="color="#fff;border:1px red dashed;"> 这里要先把水平线本来颜色改为白色。 在设计水平线的边框样式为虚线样式 就可以了
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
推荐于2018-02-26
展开全部
style="border-top:1px silver dashed;"
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
飛魂
2013-03-30 · TA获得超过217个赞
知道小有建树答主
回答量:456
采纳率:0%
帮助的人:85万
展开全部
画一张虚线的图,然后用<img>标签添加
- -要不然就是<hr>实线
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式