<!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. C# 调用APlayer教程

    APlayer介绍 引擎介绍: APlayer 媒体播放引擎是迅雷公司从 年开始开发的通用音视频媒体文件播放内核. 迅雷看看播放器和迅雷影音就是使用 APlayer 作为播放内核,目前迅雷看看播放器在 ...

  2. Pyecharts-数据可视化模块

    Pyecharts 介绍 数据可视化模块 Echarts是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可.而Python是一门富有表达力的语言,很适合用于数据处 ...

  3. 组件使用v-model、$listeners、.sync(区别于v-model的双向数据绑定)

    自定义组件 自定义组件的v-model 首先我们先说一下在自定义组件中使用v-model的必要条件 在自定义的组件中要有input(这里我们先不讨论单选复选框) 在自定义组件的模板对象中要有props ...

  4. P2710 数列[fhq treap]

    调了一辈子的fhq treap- 如果不会最大子段和 如果不会fhq treap 7个操作- 其中三个查询 单点查询其实可以和区间查询写成一个( fhq treap 的修改操作大概就是 \(split ...

  5. 基于STL的字典生成模块-模拟搜索引擎算法的尝试

    该课题来源于UVA中Searching the Web的题目:https://vjudge.net/problem/UVA-1597 按照题目的说法,我对按照特定格式输入的文章中的词语合成字典,以满足 ...

  6. pygame 运行心理学问卷

    import pygame import sys from pygame.locals import * # wait for keys to putdown def waitForKeys(keys ...

  7. IO流学习之File类

    File类 Java文件类以抽象的方式代表文件名和目录路径名.该类主要用于文件和目录的创建.文件的查找和文件的删除等. File对象代表磁盘中实际存在的文件和目录.就是把文件和目录转换成对象,读取到内 ...

  8. link（外部资源关系）

    规定了外部资源与当前文档的关系 常于链接样式表<link href="/media/examples/link-element-example.css" rel=" ...

  9. 安装APACHE到CentOS（YUM）

    运行环境 系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:httpd-2.4.6 硬件要求:无 安装过程 1.安装YUM-EPEL源 HTTP-Tools ...

  10. spark.streaming.kafka.maxRatePerPartition的理解

    spark.streaming.kafka.maxRatePerPartition设定对目标topic每个partition每秒钟拉取的数据条数. 假设此项设为1,批次间隔为10s,目标topic只有 ...