一、直线
也许是XP风格的影响吧，现在网页设计中经常使用直线效果。最常用的是<HR>标记（水平直线），它有一个Color属性，可以用代码：<hr noshade size=”1″ width=”100%” color=”0000FF”>产生一条蓝色水平直线。不过Netscape是不支持<HR>的Color属性的。所以我们要用最熟悉的表格/单元格，来完成这个“光荣而又艰巨”的任务。以下我们以Dreamweaver为例。
首先，将一个表格的边距（CellPad）设为“0”，这样才能做出无边框的表格哦（包括有宽度的虚边框）；设置表格/单元格的背景色，如“#0000FF”。到这里还不行，因为Netscape也不支持显示无内容的表格/单元格背景色。
接下来的就是关键了，打开Fireworks（任何作图软件都可以，我习惯用Macromedia的东东，呵呵），新建一个1×1的文档，任取一种颜色做背景（或用默认的白色也可），然后按Ctrl+Shift+X，选项中格式设为Gif，按选择透明色按钮（最左下角的那个）选择色素表中的“白色”，然后按“导出”按钮，以适当文件名保存。
最后，在刚才的那个表格中插入这个1×1的Gif图像，设置其宽为你需要的宽度（并非必须，其实只要表格中有东东Netscape就能显示其背景色了）。OK，搞定！
水平竖线的制作方法也类似：表格的边距（Cellpadding）仍然要设为“0”；将其中一个单元格的宽度设为“1”（注意：DW在创建表格时会自动在每一个单元各种加入空格标记 ，一定要把这格单元格中的这个空格标记删除）；设置这个单元格的背景色；插入刚才的那个1×1的Gif图像；调整图像高度。
另外，如果是要做一个细框表格（边线宽度为1像素的矩形框），只要三步就够了：插入一个1行1列的表格，设置其“间距（CellPad）”为1；将此表格的背景色改为你想要的颜色，如#0000FF；将光标定于唯一的单元格中，在属性面板中将单元格背景色改为白色（假设你网页的背景色为白色）。看到了么，很漂亮的细矩形框！
二、虚线
最简单的制作虚线的方法就是将虚线做成图片，但这样不但增大了网页下载时间，也不能灵活的应用于网页中各个地方。自从有了IE5.5，我们又有了一种利用CSS的新方法！
方法一：利用水平直线（<HR>标记）的Class属性。
首先在网页适当地方插入一条水平直线；在网页的<Head>与</Head>之间加入以下代码：
<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=#0000FF size=1>。按F12看看吧，效果是不是很不错！
方法二：利用表格/单元格的Class属性。
建立一个表格；然后在网页的<Head>与</Head>加入以下代码：
<STYLE type=text/css>
.dtright {
BORDER-BOTTOM: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-RIGHT: #0000FF 1px solid; BORDER-TOP: black 0px solid
}
.dtleft {
BORDER-BOTTOM: black 0px dashed; BORDER-LEFT: #0000FF 1px dashed; BORDER-RIGHT: black 0px dashed; BORDER-TOP: black 0px dashed
}
.dttop {
BORDER-BOTTOM: black 0px dashed; BORDER-LEFT: black 0px dashed; BORDER-RIGHT: black 0px dashed; BORDER-TOP: #0000FF 1px dashed
}
.dtbottom {
BORDER-BOTTOM: #0000FF 1px dashed; BORDER-LEFT: black 0px dashed; BORDER-RIGHT: black 0px dashed; BORDER-TOP: black 0px dashed
}
</STYLE>
最后修改表格标记<TABLE>为：<TABLE border=0 cellPadding=0 cellSpacing=0 class=dttop width=”100%”>。呵呵，表格的顶边就是一条虚线了。同样，单元格只要修改标记<TD>为：<TD class=rdash width=50%>就可以了。
如果要产生左、右、下边界的虚线效果，只需将class属性分别改为dtleft、dtright、dtbottom即可。
方法三：利用单元格背景图像。
打开Firework，新建一个2*1的图像，在其中任何一个像素中用铅笔工具涂上非背景色，然后Ctrl+Shift+R导出为gif文件；然后设置单元格的背景图片属性为这个文件，设置单元格的高为1px，并在单元格中插入上文所做的1*1透明图片，调整大小。完成！
如果觉得这个虚线太密了，可以把2*1文件改为建立一个4*1的，以此类推。
网页中线条制作技巧
本文地址：https://upinba.fr.cr/website/143.html
本站文章如无特别说明，皆为本人原创，转载请以链接形式注明原始出处和作者，谢绝不尊重版权者抄袭！