<!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. Java,C 位移运算符 有符号右移>>与无符号右移>>>

    个人博客 地址:https://www.wenhaofan.com/a/20181029232749 有符号右移 正数有符号右移 首先计算4>>2 将4转为二进制 0000 0100 右移 ...

  2. get请求与post请求中文乱码问题的解决办法

    首先出现中文乱码的原因是tomcat默认的编码方式是"ISO-8859-1",这种编码方式以单个字节作为一个字符,而汉字是以两个字节表示一个字符的. 一,get请求参数中文乱码的解 ...

  3. HTML连载65-过渡模块的基本使用

    一.过渡模块的基本使用 1.*:hover;这个伪类选择器除了可以用在a标签上,还可以用在其他任何标签上. 2.过渡三要素: (1)必须要有属性发生变化:(2)必须告诉系统哪个属性需要执行过渡效果:( ...

  4. 【spring boot】SpringBoot初学（3）– application配置和profile隔离配置

    前言 github: https://github.com/vergilyn/SpringBootDemo 说明:我代码的结构是用profile来区分/激活要加载的配置,从而在一个project中写各 ...

  5. PAT (Basic Level) Practice （中文）1033 旧键盘打字 (20 分)

    旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是怎样? 输入格式: 输入在 2 行中分别给出坏掉的那些键.以及应该输入 ...

  6. 2020牛客寒假算法基础集训营6 E.立方数（唯一分解定理 素数筛）

    https://ac.nowcoder.com/acm/contest/3007/E 放下题解 #include<bits/stdc++.h> using namespace std; t ...

  7. kuangbin专题专题十一 网络流 Minimum Cost POJ - 2516

    题目链接:https://vjudge.net/problem/POJ-2516 思路:对于每种商品跑最小费用最大流,如果所有商品和人一起建图跑,O(v^2*m)数量级太大,会超时. 把店里的商品拆点 ...

  8. 【Unity|C#】基础篇(14)——预处理指令（#）

    [学习资料] <C#图解教程>(第23章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu. ...

  9. vjudge A Funny Game 思维题 （其实今天讲的全是数学。。。）

    原文链接https://vjudge.net/contest/331993#problem/H Alice and Bob decide to play a funny game. At the be ...

  10. 微信小程序：如何判断数组中的条数?

    可以<view wx:if="{{list.length == 0}}"> </view> 可以在 {{}} 内进行简单的运算,包括三元运算符.逻辑判断.算 ...