注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

幽狼De博客

记录成长中的点点滴滴

 
 
 

日志

 
 

漂亮的带箭头的流程图  

2011-03-25 09:33:48|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
<title>中国站长天空-网页特效-综合特效-漂亮的带箭头的流程图</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.help_step_box{background:#f1f7e4;height:55px;overflow:hidden;border-top:1px solid #FFF;}
.help_step_item{float:left;height:55px;line-height:55px;padding:0 25px 0 45px;cursor:pointer;position:relative;font-size:14px;font-weight:bold;}
.help_step_num{width:19px;height:19px;line-height:19px;position:absolute;text-align:center;top:18px;left:20px;font-size:16px;font-weight:bold;background:url(http://www.zzsky.cn/effect/images/201011222015/num.png);color:#156600;}
.help_step_set{background:#27a806;color:#FFF;}
.help_step_set .help_step_left{width:8px;height:55px;background:url(http://www.zzsky.cn/effect/images/201011222015/bak.jpg) left top no-repeat;position:absolute;left:0;top:0;}
.help_step_set .help_step_right{width:8px;height:55px;background:url(http://www.zzsky.cn/effect/images/201011222015/bak.jpg) left bottom no-repeat; position:absolute;right:-8px;top:0;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="help_wrap">
  <div class="help_step_box fa">
    <div onclick="javascript:go_fa_step(1)" id="fa_1" class="help_step_item">
      <div class="help_step_num">1</div>
      拆开方便面
      <div class="help_step_right"></div>
    </div>
    <div onclick="javascript:go_fa_step(2)" id="fa_2" class="help_step_item help_step_set">
      <div class="help_step_left"></div>
      <div class="help_step_num">2</div>
      取出调料包
      <div class="help_step_right"></div>
    </div>
    <div onclick="javascript:go_fa_step(3)" id="fa_3" class="help_step_item">
      <div class="help_step_left"></div>
      <div class="help_step_num">3</div>
      加热水泡3~5分钟
      <div class="help_step_right"></div>
    </div>
    <div onclick="javascript:go_fa_step(4)" id="fa_4" class="help_step_item">
      <div class="help_step_left"></div>
      <div class="help_step_num">4</div>
      加入调料并搅拌
      <div class="help_step_right"></div>
    </div>
    <div onclick="javascript:go_fa_step(5)" id="fa_5" class="help_step_item">
      <div class="help_step_left"></div>
      <div class="help_step_num">5</div>
      可以吃了
      </div>
    </div>
  </div>
</div>
<script language="javascript">
function go_fa_step(id){
    for (i=1;i<6;i++){
        document.getElementById("fa_"+i).className='help_step_item';
    }
    document.getElementById("fa_"+id).className+=" help_step_set"
}
</script>
</body>
</html>
  评论这张
 
阅读(1419)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018