<!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>【荐】CSS实现漂亮实用带箭头的流程图_网页代码站(www.webdm.cn)</title>
<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(/images/20121015/num.png);color:#156600;}
.help_step_set{background:#27a806;color:#FFF;}
.help_step_set .help_step_left{width:8px;height:55px;background:url(/images/20121015/bak.jpg) left top no-repeat;position:absolute;left:0;top:0;}
.help_step_set .help_step_right{width:8px;height:55px;background:url(/images/20121015/bak.jpg) left bottom no-repeat; position:absolute;right:-8px;top:0;}
</style>
</head>
<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>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>

【荐】CSS实现漂亮实用带箭头的流程图的更多相关文章

  1. Asp.Net实现JS前台带箭头的流程图方法总结！（个人笔记，信息不全）

    Asp.Net实现JS前台带箭头的流程图方法总结!(持续更新中) 一.返回前台json格式 json5 = "[{\"Id\":2259,\"Name\&quo ...

  2. 圆角带箭头的提示框css实现

    css是一个很强大的东西,很多网页效果,我们可以通过css直接实现.今天给大家分享的是一个用css实现的圆角带箭头的提示框. 效果如下图: 这一个样式主要涉及到了css的边框样式border的运用和定 ...

  3. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  4. css实现带箭头选项卡

    这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...

  5. div+css实现圆形div以及带箭头提示框效果

    .img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...

  6. CSS实现带箭头的提示框

    我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了: 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形:只 ...

  7. css简单实现带箭头的边框

    原文地址 https://tianshengjie.cn/artic... css简单实现带箭头的边框 普通边框 <style> .border { width: 100px; heigh ...

  8. div+css制作带箭头提示框效果图(原创文章)

    一直都在看站友们的作品,今天也来给大家分享一个小的效果,第一次发还有点小紧张呢,语言表达能力不是很好,还请见谅…^ 先来个简单点的吧,上效果图 刚开始在网上看到效果图的时候感觉好神奇,当我试着写出来的 ...

  9. 不得不吐槽的Android PopupWindow的几个痛点（实现带箭头的上下文菜单遇到的坑）

    说到PopupWindow,我个人感觉是又爱又恨,没有深入使用之前总觉得这个东西应该很简单,很好用,但是真正使用PopupWindow实现一些效果的时候总会遇到一些问题,但是即便是人家的api有问题, ...

随机推荐

  1. 开发分支管理模型之阿里AoneFlow

    说到分支管理模型,令人最为熟悉的莫过于TrunkBased 和 GitFlow. TrunkBased 模型是持续集成思想所崇尚的工作方式,它由单个master分支和许多release分支组成,每个r ...

  2. gulp常用插件之bower使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 bower这是一款客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源. 更多使用文档请点击访 ...

  3. 135.在django中操作cookie

    操作cookie 设置cookie 设置cookie是设置值给浏览器的,因此我们可以通过response的对象来设置,可以通过HttpResponse的对象或者是HttpResponseBase的子类 ...

  4. 《javascript正则表达式迷你书》笔记

    字符匹配攻略 横向匹配--通过量词 {m,n} {m,} {m} ? + * 贪婪匹配 后面跟?号 惰性匹配 纵向匹配--通过字符组 \d \D \w \W \s \S . \w表示[0-9a-zA- ...

  5. Tiptop ERP 采购运费一键分摊

    项目背景: 公司的采购运费在逐年上升,之前财务都是做在管理费用中,金额大了后已经严重造成成本失真,所以财务要求it部能帮助分摊运费   1.纸质单据 2.系统入库单apmt720 3.系统请款单apm ...

  6. C#中怎样在ToolStripMenuItem下再添加子级菜单

    场景 在右键菜单ContextMenuStrip下添加子菜单选项可以通过 ContextMenuStrip menuStrip ToolStripMenuItem mnuChartOption = n ...

  7. 关于docker容器访问的主机的端口问题

    docker容器需要访问主机的,不能使用127.0.0.1,127.0.0.1访问的是docker容器不是主机: docker容器创建时会分配一个主机ip,可在主机使用命令 docker inspec ...

  8. docker镜像ubuntu封装jdk1.8.0【dockerfile】

    github地址:https://github.com/laileman/Docker/Dockerfile/ubuntu-jdk1.8.0_172 1-目录结构 2- dockerfile内容 3- ...

  9. [SNOI2017]炸弹[线段树优化建图]

    [SNOI2017]炸弹 线段树优化建图,然后跑一边tarjan把点全部缩起来,炸一次肯定是有连锁反应的所以整个连通块都一样-于是就可以发现有些是只有单向边的不能忘记更新,没了. #include & ...

  10. Python 高维数组“稀疏矩阵”scipy sparse学习笔记

    scipy 里面的sparse函数进行的矩阵存储 可以节省内存 主要是scipy包里面的 sparse 这里目前只用到两个 稀疏矩阵的读取 sparse.load() 转稀疏矩阵为普通矩阵 spars ...