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的背景定位来显示需要显示的图片部分. 原理 ...
随机推荐
- Python：构建可执行exe文件
学习自: Python 程序打包成 exe 可执行文件 - 不夜男人 - 博客园 Python生成Windows可执行exe文件 - 韩小北 - 博客园 pyinstaller参数介绍以及总结_Bea ...
- 面试官：Redis的共享对象池了解吗？
我正在面试间里焦急地等待着,突然听到了门外的脚步声,随即门被打开,穿着干净满脸清秀的青年走了进来,一股男士香水的淡香扑面而来. 面试官:"平时在工作中用过Redis吗?" 我:&q ...
- VirtualBox虚拟机--安装新系统
问题概述:在VirtualBox虚拟机中使用ISO镜像文件安装新系统. 继在本机系统上学习Python把系统搞坏掉以后,总结教训试新东西还是先在虚拟机上练手. 找同事拷了一个win10系统的ISO镜像 ...
- [2022-2-18] OICLASS提高组模拟赛2 A·整数分解为2的幂
题目链接 问题 A: 整数分解为 2 的幂 题目描述 任何正整数都能分解成 2 的幂,给定整数 N,求 N 的此类划分方法的数量!由于方案数量较大,输出 Mod 1000000007 的结果. 比如 ...
- 学习c语言时对一些疑问的测试
#include<stdio.h>#include<string.h> int main(){/* 1 */// int a[3][3]={6,1,2,3,4,5};// in ...
- thinkPHP ajax 状态修改（上架修改为下架）
<td> {if $v.status==1} <span class="top{$v.id}" name="0" onclick=" ...
- layui ajax删除
表单页面 //监听行工具事件 table.on('tool(test)', function(obj){ var data = obj.data; //console.log(obj) if(obj. ...
- php 23种设计模型 - 桥接模式
桥接模式(Bridge) 桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化.这种类型的设计模式属于结构型模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦. 这种模式涉 ...
- 《手把手教你》系列基础篇（七十六）-java+ selenium自动化测试-框架设计基础-TestNG实现DDT - 下篇（详解教程）
1.简介 今天这一篇宏哥主要是结合实际工作中将遇到的测试场景和前边两篇学习的知识结合起来给大家讲解和分享一下,希望以后大家在以后遇到其他的测试场景也可以将自己的所学的知识应用到测试场景中. 2.测试场 ...
- vue-cli实现异步请求返回mock模拟数据
在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...