资讯专栏INFORMATION COLUMN

css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS

刘德刚 / 2786人阅读

摘要:适用于分步骤操作的页面导航图实现结果如下上图对应下述代码,稍作修改可以生成下图。

适用于分步骤操作的页面导航图

实现结果如下

上图对应下述代码,稍作修改可以生成下图。

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 代码如下





步骤图示例





 
 
   
 
 
 
1
填写账户名
1
第一步
2
第二步
2
第二步
2
第二步
3
设置新密码
4
完成

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

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;}  

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113166.html

相关文章

  • 浅谈 CSS Sprites 雪碧应用

    摘要:编写配置文件,以下是关键配置代码雪碧图合并输出到文件参数执行目录参数生成的和图片的文件名之所以推荐,是因为非常的灵活,看懂模块的可以根据你的项目情况编写对应的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题;目前小图标显示常见有两种方式...

    MkkHou 评论0 收藏0
  • 用 Electron 打造 Win/Mac 应用,从「代码」到可下载的「安装包」,可能比你想得麻烦一

    摘要:三配置环节目的一是为之后的环节初始化工作流参数,二是准备好应用文件夹内容即要打包的目标文件夹做的事解析命令行参数,初始化工作参数,填充配置文件,把配置文件和相关依赖文件导入到文件夹内合适的 首发于酷家乐前端博客,作者@摘星(segmentfault @StinsonZhao) 我们能从很多地方学习到怎么起一个 Electron 项目,有些还会介绍怎么打包或构建你的代码,但距离「真正地...

    LdhAndroid 评论0 收藏0
  • 浏览器渲染流程&Composite(渲染层合并)简总结

    摘要:渲染层合并对页面中元素的绘制是在多个层上进行的。拥有两套不同的渲染路径硬件加速路径和旧软件路径中有不同类型的层负责子树和负责的子树,只有是作为纹理上传给的。整个图在中其实有几种不同的层类型渲染层,这是负责对应子树图形层,这是负责对应子树。 梳理浏览器渲染流程 首先简单了解一下浏览器请求、加载、渲染一个页面的大致过程: DNS 查询 TCP 连接 HTTP 请求即响应 服务器响应 客户...

    willin 评论0 收藏0
  • 浏览器渲染流程&Composite(渲染层合并)简总结

    摘要:渲染层合并对页面中元素的绘制是在多个层上进行的。拥有两套不同的渲染路径硬件加速路径和旧软件路径中有不同类型的层负责子树和负责的子树,只有是作为纹理上传给的。整个图在中其实有几种不同的层类型渲染层,这是负责对应子树图形层,这是负责对应子树。 梳理浏览器渲染流程 首先简单了解一下浏览器请求、加载、渲染一个页面的大致过程: DNS 查询 TCP 连接 HTTP 请求即响应 服务器响应 客户...

    Channe 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<