<!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. PTA 1005 Spell It Right

    题目描述: Given a non-negative integer N, your task is to compute the sum of all the digits of N, and ou ...

  2. 论文阅读笔记（十八）【ITIP2019】：Dynamic Graph Co-Matching for Unsupervised Video-Based Person Re-Identification

    论文阅读笔记(十七)ICCV2017的扩刊(会议论文[传送门]) 改进部分: (1)惩罚函数:原本由两部分组成的惩罚函数,改为只包含 Sequence Cost 函数: (2)对重新权重改进: ① P ...

  3. pyqt5-字体，颜色选择对话框设置label标签字体颜色样式

    1.采用实例方法,先创建2个dialog对象,采用该对象的信号触发相应的操作 import sys from PyQt5.Qt import * class MyWidget(QWidget): de ...

  4. script标签的async和defer

    兼容性 IE对于defer一直都支持,async属性IE6-9都没有支持,IE10及以上支持 相同点与不同点 带有async或defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的 ...

  5. VS中关于数据库的操作

    1.数据库迁移 第一步: 第二步: 在窗口中选择项目中的EntitiyFramwork项目(与数据库连接的文件集) 第三步: 输入update-database 二:数据对比 第一步: 第二步:选择需 ...

  6. IntelliJ IDEA 2019年最新版2019.3.1 安装激活教程【最强，可用至2100、2089年】

    IntelliJ IDEA 2019年最新版 永久激活教程 本文包括最新[2019.3.1 & 1.3]激活 和[2018.3.2]激活 说明:①2019.3.②2019.1.③2018.3版 ...

  7. C语言118. 杨辉三角

    给定一个非负整数 numRows,生成杨辉三角的前 numRows 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例: 输入: 5输出:[ [1], [1,1], [1,2,1], [1, ...

  8. 【E20200102-1】centos 7 下vsftp的安装和配置

    一.准备工作 1.1.服务器准备 操作系统:centos 7.x 关闭防火墙(firewall/iptables)和SELinux 参见笔记<[E20200101-1]Centos 7.x 关闭 ...

  9. Java 中多态的实现（下）

    Java 中多态的另一个语法实现是重写.重载是通过静态分派实现的,重写则是通过动态分派实现的. 在学习动态分派之前,需要对虚拟机的知识有一个初步的了解. 虚拟机运行时数据区 运行 Java 程序时,虚 ...

  10. ubuntu中的Linux安装程序的方法

    Ubuntu: 1.下载.deb文件,下载后,cd到.deb文件目录,然后使用sudo dpkg -i xxx.deb      dpkg=debian packager的缩写  -i=install ...