<style type="text/css">
用DIV+CSS打造垂直V形列表一列，效果如下：
打托
- 将车上的货物放在托盘上
- 1分37秒
卸货
- 将托盘拉到分拣区
- 40秒
分拣
- 对拉下来的货物进行130扫描，分目的地放在不同的托盘上
- 1分03秒
归位
- 将分拣好的托盘依目的地拉到各自的区位
- 51秒
装配
- 在区位对货物进行121扫描，作好装车的准备
- 3分44秒
装车
- 将货物按托盘拉到车位
- 1分01秒
卸托
- 将托盘上的货卸下，有序地码进车厢
- 1分14秒
完毕
- 完毕
以上效果的源码为：
<style type="text/css">
<!--
.workflow
{
position: relative;
width: 800px;
height: 600px;
}
.workflow .item
{
height: 7em;
float: none;
clear: both;
position: absolute;
width: 700px;
}
.workflow .item .left
{
width: 10%;
height: 100%;
float: left;
position: relative;
}
.workflow .item .left .top
{
width: 100%;
height: 30%;
background-color: Transparent;
}
.workflow .item .left .top .left
{
height: 100%;
width: 50%;
float: left;
background: url('images/WhiteTriangle_Left.gif') no-repeat center center;
}
.workflow .item .left .top .right
{
height: 100%;
width: 50%;
float: right;
background: url('images/WhiteTriangle.gif') no-repeat center center;
}
.workflow .item .left .middle
{
width: 100%;
color: White;
text-align: center;
vertical-align: middle;
line-height: 3em;
background-color: #4F81BD;
}
.workflow .item .left .bottom
{
width: 100%;
height: 30%;
bottom: 0;
position: absolute;
background-color: #4F81BD;
}
.workflow .item .left .bottom .left
{
height: 100%;
width: 50%;
float: left;
background: url('images/WhiteTriangle_LeftBottom.gif') no-repeat center center;
}
.workflow .item .left .bottom .right
{
height: 100%;
width: 50%;
float: right;
background: url('images/WhiteTriangle_RightBottom.gif') no-repeat center center;
}
.workflow .item .rightDetail
{
height: 100%;
float: left;
width: 80%;
}
.workflow .item .rightDetail .top
{
width: 100%;
height: 66%;
border: solid 2px #4F81BD;
}
.workflow .item .rightDetail .top ul
{
margin-top: 0;
margin-left: 0;
padding-left: 1em;
list-style-position: inside;
}
.workflow .item .rightDetail .top ul li
{
color: Black;
}
.workflow .item .rightDetail .bottom
{
width: 100%;
height: 30%;
}
.workflow .item .clear
{
clear: both;
float: none;
width: 0;
height: 0;
}
-->
</style>
<div class="workflow">
<div class="item">
<div class="left">
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="middle">打托</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="rightDetail">
<div class="top">
<ul>
<li>将车上的货物放在托盘上</li>
<li>1分37秒</li>
</ul>
</div>
<div class="bottom"></div>
</div>
<div class="clear"></div>
</div>
<div class="item" style="margin-top: 5.4em; ">
<div class="left">
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="middle">卸货</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="rightDetail">
<div class="top">
<ul>
<li>将托盘拉到分拣区</li>
<li>40秒</li>
</ul>
</div>
<div class="bottom"></div>
</div>
<div class="clear"></div>
</div>
<div class="item" style="margin-top: 10.8em; ">
<div class="left">
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="middle">分拣</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="rightDetail">
<div class="top">
<ul>
<li>对拉下来的货物进行130扫描，分目的地放在不同的托盘上</li>
<li>1分03秒</li>
</ul>
</div>
<div class="bottom"></div>
</div>
<div class="clear"></div>
</div>
<div class="item" style="margin-top: 16.2em; ">
<div class="left">
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="middle">归位</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="rightDetail">
<div class="top">
<ul>
<li>将分拣好的托盘依目的地拉到各自的区位</li>
<li>51秒</li>
</ul>
</div>
<div class="bottom"></div>
</div>
<div class="clear"></div>
</div>
<div class="item" style="margin-top: 21.6em; ">
<div class="left">
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="middle">装配</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="rightDetail">
<div class="top">
<ul>
<li>在区位对货物进行121扫描，作好装车的准备</li>
<li>3分44秒</li>
</ul>
</div>
<div class="bottom"></div>
</div>
<div class="clear"></div>
</div>
<div class="item" style="margin-top: 27.0em; ">
<div class="left">
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="middle">装车</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="rightDetail">
<div class="top">
<ul>
<li>将货物按托盘拉到车位</li>
<li>1分01秒</li>
</ul>
</div>
<div class="bottom"></div>
</div>
<div class="clear"></div>
</div>
<div class="item" style="margin-top: 32.4em; ">
<div class="left">
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="middle">卸托</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="rightDetail">
<div class="top">
<ul>
<li>将托盘上的货卸下，有序地码进车厢</li>
<li>1分14秒</li>
</ul>
</div>
<div class="bottom"></div>
</div>
<div class="clear"></div>
</div>
<div class="item" style="margin-top: 32.4em; ">
<div class="left">
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="middle">完毕</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="rightDetail">
<div class="top">
<ul>
<li>完毕</li>
</ul>
</div>
<div class="bottom"></div>
</div>
<div class="clear"></div>
</div>
</div>