`

一些好用的html线条脚本 [转]

阅读更多

其中 width 规定线条的长度,还可以是百分比;color 是颜色,size 当然就是厚度了。 align 规定线条位置,left、right、center。 noshade 是否有立体效果 <*HR align=center width=300 color=#00ffff noShade SIZE=1*>

两头渐变透明:

 

<*hr width=80% size=3 color=#00ffff style="FILTER: alpha(opacity=100,finishopacity=0,style=3)"*>


右边渐变透明:

 

<*hr width=80% size=3 color=#00ffff style="FILTER: alpha(opacity=100,finishopacity=0,style=1)"*>


画虚线:

 

<*hr width=80% size=1 color=#00ffff style="border:1 dashed #00ffff"*>

画双线:

 

<*hr width=80% size=3 color=#00ffff style="border:3 double green"*>


立体效果:


<*hr width=80% size=3 color=#00ffff style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)"*>

钢针效果:

 

<*hr width=80% size=3 color=#00ffff style="filter:progid:DXImageTransform.Microsoft.Glow(color=#00ffff,strength=10)"*>


纺棰形:

 

<*hr width=80% size=30 color=#00ffff style="filter:alpha(opacity=100,finishopacity=0,style=2)"*>

 

 

==================================

 

横线
<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td height="1"></td>
</tr>
</table>
width="100"是宽度为100像素,height="1"是高度为1像素

坚线
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td width="1" height="100"></td>
</tr>
</table>
width="1"是宽度为1像素,height="100"是高度为100像素  

 

横线:
<hr width=100 height=1>
竖线:
<hr width=1 height=100>

这样应该就可以了吧。

 

 

在网页中,一般要实现虚线效果。制作方法很多,在我们网站中,也介绍使用Fireworks制作虚线的效果。如果我们改用水平线制作虚线效果呢?制作方法就是使用CSS定义:

  在<head>中预先定义好CSS:
<STYLE type=text/css>
.dotline {
BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted
}
</STYLE>
  然后修改水平线的代码为:<hr class=dotline color=#000000 size=1>。按F12看看吧,效果是不是很不错!
  或者不预定义好CSS样式,直接在<hr>中加入代码:
<hr style="BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted" color=#000000 size=1>

  更为简单的方法:<hr style="border:1px dashed red; height:1px">

 

分享到:
评论

相关推荐

    JavaScript编写带旋转+线条干扰的验证码脚本实例

    那么接下来楼主将带领大家一步步用JavaScript做出一个验证码脚本! 先给出成品,方便大家理解: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;style&gt; #...

    HTML5+JavaScript 动画基础 2013年出版423页

    《HTML5+JavaScript动画基础》包括了基础知识、基础动画、高级动画、3D动画和其他技术5大部分,分别介绍了动画的基本概念、动画的...《HTML5+JavaScript动画基础》面向所有使用HTML5或从Flash转过来的Web开发人员。

    HTML开发王

    9.2.2 设置表格边框线条宽度(border属性) 9.2.3 设置表格宽度(width属性) 9.2.4 表格在页面中的对齐(align属性) 9.2.5 表格的描述(summary属性) 9.2.6 表格的背景色(bgcolor属性) 9.2.7 表格中单元格的间距和衬距...

    jmCanvas.js:在 HTML5 Canvas 中绘制的简单脚本

    jmCanvas.js是一个非常简单的 JavaScript 脚本,用于在 HTML5 Canvas 元素中绘制。 它包括绘制矩形、圆形、线条、文本等的所有功能... ##Installation 首先,您必须将 jmCanvas 添加到您的 HTML 文档中: &lt; ...

    HTML5 canvas基本绘图之绘制线条

    &lt;canvas&gt;&lt;/canvas&gt;是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。...

    ActionScript开发人员指南中文版

    在Flash中复制补间动画脚本 合并补间动画脚本 描述动画 添加滤镜 将补间动画与其显示对象关联 第章:使用反向运动 反向运动的基础知识 IK骨架动画处理概述 获取有关IK骨架的信息 实例化IKMover并限制其移动 移动IK...

    HTML5 canvas 参考手册

    本手册提供完整的 getContext(“2d”) 对象的属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。   浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 标签的属性及方法。 ...

    HTML5 canvas基本绘图之绘制线段

    &lt;canvas&gt;&lt;/canvas&gt;是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。...

    pan-genome-charts:泛基因组图图表

    cd pan-genome-chartspython -m SimpleHTTPServer 网络服务器启动后,将这些链接加载到浏览器中: 这些脚本会为图表生成底层的矢量形状和线条,然后使用SVG Crowbar保存为SVG。 在Illustrator中添加了一些颜色调整...

    flash操作题

    8、鼠标定位在“控制”图层第1帧,打开“动作”面板——点“将新项目添加到脚本中”按钮 ,选择“动作—影片控制—stop” ——再单击第60帧处插入一关键帧——打开“动作”面板——点“将新项目添加到脚本中”按钮 ...

    flash shiti

    隐藏被选择对象的线条 7. 当Flash 导出较短小的事件声音(例如按钮单击的声音)时,最适合的压缩选项是: □ A. ADPCM 压缩选项 □ B. MP3 压缩选项 □ C. Speech 压缩选项 □ D. Raw 压缩选项 8. 对于在网络上播放...

    Cassette-Video-Decoder:基于JavaScript的盒带视频播放器!

    这些将在编码过程中由编码器脚本输出。 brightness: 1, saturation: 1, 图像的亮度和饱和度。 如果图像看起来暗淡或太暗,请增加这些。 lineWidth: 2.5, 在屏幕上绘制的线条的宽度。 如果视频

    SWiSHmax.rar

    特效画面 -------------------------------------------------------------------------------- 功能强劲的绘图工具 提供先进的绘图工具包括: 线条、画笔、贝兹曲线、文字、椭圆/圆形、矩形/正方形及自动成形....

    SWiSHmax3 v3 分段3(只能上传20M分3段)

     提供先进的绘图工具包括: 线条、画笔、贝兹曲线、文字、椭圆/圆形、矩形/正方形及自动成形.  错综复杂的的形状编辑选项让你更容易修改你的图形的比率、尺寸、旋转、偏斜、 透视图法, 也可 将你的图形切成薄片或...

    Swish Max V 3.0 分段1(只能上传20M分3段)

     提供先进的绘图工具包括: 线条、画笔、贝兹曲线、文字、椭圆/圆形、矩形/正方形及自动成形.  错综复杂的的形状编辑选项让你更容易修改你的图形的比率、尺寸、旋转、偏斜、 透视图法, 也可将你的图形切成薄片或...

    SWiSHmax3 v3 分段2(只能上传20分3段)

     提供先进的绘图工具包括: 线条、画笔、贝兹曲线、文字、椭圆/圆形、矩形/正方形及自动成形.  错综复杂的的形状编辑选项让你更容易修改你的图形的比率、尺寸、旋转、偏斜、 透视图法, 也可将你的图形切成薄片或...

    ACReport中国式报表控件2011(Ver2.3)

    7、清单和分组报表中,补充空行时,可以选择是否显示横线和竖线条。 8、页面选项中增加“保持页脚在页面底部”、“是否套打模板”、“不打印背景图”等选项。 9、增加了批量设置字段别名的方法:...

    jquery插件使用方法大全

    推荐 微软的visual studio 2008 sp1支持对jquery的动态提示,只要在代码页导入对应的vsdoc脚本就可以。 目前为止,jQuery的最新版本为1.7.2。 编辑本段历史版本  jQuery 1.0(2006年8月):该库的第一个稳定版本,...

    Tar-Heel-Hero:由Three.js创建的吉他英雄启发游戏

    创建了一个脚本,该脚本分析从活页乐谱生成的Music XML文件,以使用歌曲中的实际音符。 使用移动的线条和注释渲染了THREE.js场景。 菜单和其他游戏功能使用了Vanilla JS和HTML / CSS。 游戏预告片

Global site tag (gtag.js) - Google Analytics