摘要:适用于分步骤操作的页面导航图实现结果如下上图对应下述代码,稍作修改可以生成下图。
适用于分步骤操作的页面导航图
实现结果如下
上图对应下述代码,稍作修改可以生成下图。
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
摘要:编写配置文件,以下是关键配置代码雪碧图合并输出到文件参数执行目录参数生成的和图片的文件名之所以推荐,是因为非常的灵活,看懂模块的可以根据你的项目情况编写对应的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题;目前小图标显示常见有两种方式...
摘要:三配置环节目的一是为之后的环节初始化工作流参数,二是准备好应用文件夹内容即要打包的目标文件夹做的事解析命令行参数,初始化工作参数,填充配置文件,把配置文件和相关依赖文件导入到文件夹内合适的 首发于酷家乐前端博客,作者@摘星(segmentfault @StinsonZhao) 我们能从很多地方学习到怎么起一个 Electron 项目,有些还会介绍怎么打包或构建你的代码,但距离「真正地...
摘要:渲染层合并对页面中元素的绘制是在多个层上进行的。拥有两套不同的渲染路径硬件加速路径和旧软件路径中有不同类型的层负责子树和负责的子树,只有是作为纹理上传给的。整个图在中其实有几种不同的层类型渲染层,这是负责对应子树图形层,这是负责对应子树。 梳理浏览器渲染流程 首先简单了解一下浏览器请求、加载、渲染一个页面的大致过程: DNS 查询 TCP 连接 HTTP 请求即响应 服务器响应 客户...
摘要:渲染层合并对页面中元素的绘制是在多个层上进行的。拥有两套不同的渲染路径硬件加速路径和旧软件路径中有不同类型的层负责子树和负责的子树,只有是作为纹理上传给的。整个图在中其实有几种不同的层类型渲染层,这是负责对应子树图形层,这是负责对应子树。 梳理浏览器渲染流程 首先简单了解一下浏览器请求、加载、渲染一个页面的大致过程: DNS 查询 TCP 连接 HTTP 请求即响应 服务器响应 客户...
阅读 1202·2021-11-15 11:37
阅读 2218·2021-09-30 09:55
阅读 4335·2021-09-22 15:51
阅读 3691·2021-09-22 15:46
阅读 2746·2019-08-30 15:52
阅读 404·2019-08-29 16:20
阅读 2787·2019-08-29 15:12
阅读 1102·2019-08-26 18:27