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的背景定位来显示需要显示的图片部分. 原理 ...
随机推荐
- 2020CCPC长春F. Strange Memory
题目大意 一棵以 \(1\) 为根的 \(n(2\leq n\leq 10^5)\) 的树,每个节点 \(i\) 有权值 \(a_{i}(1\leq a_{i}\leq 10^6)\) ,求 \(\s ...
- 浏览器无插件播放rtsp流解决方案
1. 安装 FFmpeg 参考 CentOS下安装FFmpeg,特别详细. 我遇到的错误和解决办法: 缺少lame ffmpeg+libmp3lame库源码安装教程(CentOS) make ffmp ...
- Spark中的Wordcount
目录 通过scala语言基于local编写spark的Wordcount 基于yarn去调度WordCount 通过scala语言基于local编写spark的Wordcount import org ...
- 矩池云上关于conda的一些使用技巧
关于源的加速和使用 bash /public/script/switch_conda_source.sh 输入想要切换的源前面的序号,然后按回车,源会自动切换. 当然这个地方需要注意的是如果遇到一些国 ...
- 微信小程序yansongda 支付宝测试
小程序支付接入文档 1:php 框架composer 安装yansongda插件 composer require yansongda/pay:^2.10 -vvv 2:支付宝沙箱支付获取自己Appi ...
- 一比一还原axios源码（一）—— 发起第一个请求
上一篇文章,我们简单介绍了XMLHttpRequest及其他可以发起AJAX请求的API,那部分大家有兴趣可以自己去扩展学习.另外,简单介绍了怎么去读以及我会怎么写这个系列的文章,那么下面就开始真正的 ...
- hive从入门到放弃(三)——DML数据操作
上一篇给大家介绍了 hive 的 DDL 数据定义语言,这篇来介绍一下 DML 数据操作语言. 没看过的可以点击跳转阅读: hive从入门到放弃(一)--初识hive hive从入门到放弃(二)--D ...
- 学习HashMap源码
HashMap简介 HashMap是一种存储K-V类型的容器,HashMap底层数据结构为数组+链表+红黑树(jdk 1.8新增),它根据键的HashCode值存储数据,获取元素的时间复杂度为O( ...
- vmware下的manjaro挂载共享文件夹
开始时在archwiki上看到的是以下命令 mkdir <shared folders root directory> vmware-hgfsclient vmhgfs-fuse -o a ...
- 数据库常用的sql语句大全--sql
前言 本片博客使用mysql数据库进行数据操作,使用Navicat for mysql 这个IDE进行可视化操作.每个SQL语句都是亲身实验验证的,并且经过自己的思考的.能够保证sql语句的可运行性. ...