<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>