css流程图、步骤图，流程线与环节分别实现，支持单环节、多环节情况。scss生成CSS
适用于分步骤操作的页面导航图
实现结果如下
上图对应下述代码，稍作修改可以生成下图。
css代码如下：
@charset "UTF-8";
/**单列宽度 单行高度 列数 行数*/
body {
font-size: 12px;
color: #000000;
font-family: "Microsoft Yahei";
overflow-x: hidden;
background: #ffffff; }
/**单列宽度 单行高度 列数 行数*/
.web-width {
width: 1200px;
margin: 20px auto; }
.for-liucheng {
width: 1200px;
margin: 0 0 0 0;
height: 160px;
padding: 0 0 0 0;
position: relative; }
.liulist {
float: left;
width: 300px;
height: 10px;
background: #CCCCCC;
margin-top: 60px; }
.liulists {
float: left;
width: 300px;
height: 100%; }
.liutextbox {
position: absolute;
width: 100%;
height: 160px; }
.liutext {
float: left;
width: 300px;
text-align: center;
margin-top: 53px; }
.liutexts {
float: left;
width: 300px;
height: 100%;
text-align: center;
margin-top: -7px; }
.liutext_2 {
display: inline-block;
float: left;
width: 100%;
height: 42px;
text-align: center;
padding-bottom: 0px; }
em {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 24px;
background: #BDBDBD;
text-align: center;
font-size: 14px;
line-height: 24px;
font-style: normal;
font-weight: bold;
color: #fff; }
strong {
display: inline-block;
height: 16px;
line-height: 16px;
font-weight: 400; }
.for-cur em {
background: #77b852;
border: 3px solid #ffffff;
margin-top: -3px; }
.for-ed em {
border: 3px solid #F0F0F0;
margin-top: -3px; }
.for-cur strong {
color: #77b852; }
.liutext:hover {
cursor: pointer; }
.liutextbox strong:hover {
text-decoration: underline; }
.liulists table, table tr th, table tr td {
border: 10px solid #CCCCCC; }
.liulists td {
height: 30px; }
.liulists table {
width: 100%;
text-align: center;
border-collapse: collapse; }
html 代码如下
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>步骤图示例</title>
<link type="text/css" href="stylesheets/new_file.css" rel="stylesheet" />
</head>
<script type="text/javascript" src="js/jquery-1.8.3-min.js" ></script>
<script type="text/javascript">
$(function(){
$("#A").addClass("for-ed"); //已完成
$("#B1").addClass("for-ed"); //已完成
});
function openH(obj)
{
//$("#A").addClass("for-cur");
$(".liutext").removeClass("for-cur");
$(".liutext_2").removeClass("for-cur");
$(obj).addClass("for-cur");
}
</script>
<body style="overflow:hidden">
<div class="web-width">
<div class="for-liucheng">
<div class="liulist"></div>
<div class="liulists" style="float:left;overflow:hidden">
<table>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
</div>
<div class="liulist"></div>
<div class="liulist"></div>
<div class="liutextbox">
<div id="A" class="liutext" onclick="openH(this);"><em>1</em><br /><strong>填写账户名</strong></div>
<div id="B" class="liutexts" >
<div id="B1" class="liutext_2" onclick="openH(this);"><em>1</em><br /><strong>第一步</strong></div>
<div id="B2" class="liutext_2" onclick="openH(this);"><em>2</em><br /><strong>第二步</strong></div>
<div id="B3" class="liutext_2" onclick="openH(this);"><em>2</em><br /><strong>第二步</strong></div>
<div id="B4" class="liutext_2" onclick="openH(this);"><em>2</em><br /><strong>第二步</strong></div>
</div>
<div id="C" class="liutext" onclick="openH(this);"><em>3</em><br /><strong>设置新密码</strong></div>
<div id="D" class="liutext" onclick="openH(this);"><em>4</em><br /><strong>完成</strong></div>
</div>
</div><!--for-liucheng/-->
</div><!--web-width/-->
<div style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>
scss
第一部分的css，可以通过scss 设置变量生成css ，方便计算每个步骤环节的高度宽度，使得流程线和流程的位置能对应显示，并且此案例的多行线是通过table的border的宽度实现，相关宽高的设置通过scss变量计算，能适应不同的情况的css编写，具体如下
//sass style
//-----------------------------------
@charset "utf-8";
/**单列宽度 单行高度 列数 行数*/
$dwidth: 300px;
$dheight: 30px;
//横向大环节个数
$anum: 4;
//纵向行个数
$bnum: 4;
$border: 10px;
$height:($dheight+$border) * $bnum - $dheight;
$allheight:($dheight+$border) * $bnum;
//圆圈直径
$circleA: 24px;
//文字
$textA: 16px;
body{font-size:12px;color:#000000; font-family:"Microsoft Yahei"; overflow-x:hidden; background:#ffffff;}
/**单列宽度 单行高度 列数 行数*/
.web-width{width: 1200px;margin:20px auto;}
.for-liucheng{width: $dwidth *$anum ;margin:0 0 0 0;height: $allheight;padding:0 0 0 0; position:relative;}
.liulist{float:left;width:$dwidth; height:$border;background:#CCCCCC;margin-top: ($height - $border)/2;}
.liulists{float:left;width:$dwidth; height:100%;}
.liutextbox{ position:absolute;width:100%;height:($dheight+$border) * $bnum;}
.liutext{float:left;width:$dwidth;text-align:center;margin-top: ($height - $border)/2-$circleA/2+$border/2;}
.liutexts{float:left;width:$dwidth;height:100%; text-align:center;margin-top: -$circleA/2+$border/2;}
.liutext_2{display:inline-block;float:left;width:100%; height:$allheight/$bnum+2px;text-align:center;padding-bottom: 0px;}
em{ display:inline-block;width:$circleA; height:$circleA;border-radius:$circleA; background:#BDBDBD; text-align:center; font-size:14px; line-height:$circleA; font-style:normal; font-weight:bold;color:#fff;}
strong{ display:inline-block;height:$textA; line-height:$textA; font-weight:400;}
.for-cur em{ background:#77b852;border:3px solid #ffffff;margin-top: -3px;}
.for-ed em{ border:3px solid #F0F0F0;margin-top: -3px;}
.for-cur strong{color:#77b852;}
.liutext:hover
{
cursor: pointer;
}
.liutextbox strong:hover
{
text-decoration: underline;
}
.liulists table,table tr th, table tr td { border:$border solid #CCCCCC; }
.liulists td { height: $dheight; }
.liulists table { width: 100%;text-align: center; border-collapse: collapse;} css流程图、步骤图，流程线与环节分别实现，支持单环节、多环节情况。scss生成CSS的更多相关文章
- 微信小程序~项目步骤和流程
从运营的角度讲制作,不是从程序的角度讲开发,所以简单明晰,通俗易懂,小白也能按照流程完成制作. 微信小程序制作步骤及流程 1.确定好微信小程序的的定位和目的 如行业,功能,内容,目标用户,目标市场,意 ...
- 前端优化：css雪碧图实践应用详解
一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...
- css雪碧图（精灵图）与字体图标的介绍以及对比
css雪碧图(精灵图)与字体图标的介绍以及对比 设想一个实际场景:在一个页面为了展示,我们放置了很多独立的小图片,浏览器在显示页面的时候,就需要向服务器就会发送很多请求,来获取并加载这些小图片,但是这 ...
- CSS品控与流程
精通CSS意味着不仅能写出可用的标记和样式,还能让代码好阅读.方便移植.易维护. 1.外部代码质量:调试CSS 外部代理质量就是用户能体验到的最终结果.主要体现在几个方面. 正确性.CSS属性名都写对 ...
- 在线Spirte图定位工具，自动生成CSS
发现一个在线雪碧图中的图片地位的工具,并且能够自动生成css.spritecow 废话不多说,有图有真相:
- 使用compass自动合并css雪碧图(css sprite)
本文转载自: 使用compass自动合并css雪碧图(css sprite)
- .使用 HTML+CSS 实现如图布局，border-widht 5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- CSS实现背景图尺寸不随浏览器大小而变化的两种方法
一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看 一些网站的首页 ...
- Css雪碧图
Css雪碧图: CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 原理 ...
随机推荐
- oj教程--链表
链表.我们知道数组是一种通用的数据结构,能用来实现栈.队列等很多数据结构.而链表也是一种使用广泛的通用数据结构,它也可以用来作为实现栈.队列等数据结构的基础,基本上除非需要频繁的通过下标来随机访问各个 ...
- .NET的两种部署模式，了解一下
前言 以往部署程序一直是习惯性先安装运行时环境,然后再将发布打包好的程序运行起来:但当多个程序依赖不同版本框架平台时,如果部署在同一台机器上,那就需要在同一台机器上安装多个版本的运行时,总感觉有点不太 ...
- @PostConstruct使用注意点
前景提要:在一个项目中,由于数据库中敏感词删除掉了,但是在网页进行匹配时仍然能够匹配上已删除的词. 查看项目源码发现使用了@PostConstruct注解: 此注解的作用是:@PostConstruc ...
- javaScript阻止浏览器F5刷新
1 <script type="text/javascript"> 2 //禁止用F5键 3 document.onkeydown = function (e) { 4 ...
- k8s集群Job负载 支持多个 Pod 可靠的并发执行，如何权衡利弊选择适合的并行计算模式？
k8s的Job负载 支持多个 Pod 可靠的并发执行,如何权衡利弊选择适合的并行计算模式? 简单聊聊你对工作负载Job的理解? Job 支持多个 Pod 可靠的并发执行,如何权衡利弊选择适合的并行计算 ...
- jdk配置完成tomcat无法启动问题解决
今天在进行struts2练习之前,准备为电脑配置tomcat容器,发现jdk的java指令可以正确运行,而tomcat启动时控制台弹出后立即消失.查资料显示jdk为正确配置,但是自己的java指令都能 ...
- 网站SQL注入防御实战
SQL注入作为直接威胁web业务的最严重攻击行为,已经被大多数的网站管理员所了解,这种通过HTTP标准端口,利用网页编码不严谨,提交精心构造的代码实现对数据库非授权访问的攻击方法,已经被越来越多的sc ...
- maven——使用阿里云镜像
1.在本地的仓库目录下找到settings.xml文件,添加 <mirrors> <mirror> <id>alimaven</id> <name ...
- 模型 _meta API ( options )
模型 _meta API class Options[源代码] 模型 _meta API是Django ORM的核心.它使系统的其他部分(如查找,查询,表单和管理员)能够了解每个模型的功能. API可 ...
- K8S原来如此简单（六）Pod调度
我们前面部署的pod调度取决于kube-scheduler,它会根据自己的算法,集群的状态来选择合适的node部署我们的pod. 下面我们来看下如何来根据我们自己的要求,来影响pod的调度. 定向no ...