需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div {margin-left: 100pxborder-right:1px dashed blackheight:150pxwidth:1px}
3、浏览器运行index.html页面，此时成功用css和div实现了垂直的点虚线。
Css只有一个hr标签可以生成水平线，如果要插入垂直虚线的话，只需要在左右边框定义宽度和样式即可。即如下样式（dashed是虚线样式）：
border-left:1px dashed blue
表格边框默认是以实线进行显示的，怎么才能把它变成虚线呢？其实很简单只要简单加一些样式属性便可搞定，希望下面的例子对大家有所帮助复制代码
代码如下:
<style>
.table5{text-align:center
border:1px
solid
#cccccc
border-radius
:3px
background-color:#FFFFFF
width:650px}
.table5
td{border-bottom:1px
dashed
#cccccc}
.table5
.last
td{border-bottom:0}
</style>
复制代码
代码如下:
<table
width="100%"
border="0"
cellpadding="2"
cellspacing="0"
class="table5">
<tr
>
<td
colspan="4"></td>
</tr>
<tr
>
<td
width="4%"><img
src="images/greendot.jpg"
width="4"
height="4"
/></td>
<td
width="17%"
class="text-fl">萍水相逢</td>
<td
width="63%"
align="center"
class="text-fl">消费10个金币，对换10元手机费</td>
<td
width="16%"
align="center"
valign="middle">2013.01.20</td>
</tr>
<tr
class="last">
<td
><img
src="images/greendot.jpg"
/></td>
<td
class="text-fl">M萍水相MM</td>
<td
align="center"
class="text-fl">消费500积分，对换500粉丝</td>
<td
align="center"
valign="middle">2013.01.20</td>
</tr>
<tr
>
<td
colspan="4"></td>
</tr>
</table>
