当前位置: 首页 > Web前端 > CSS

css流程图、步骤图、流程线和链接分别实现,支持单链接和多链接,scss

时间:2023-03-30 22:44:56 CSS

生成的CSS适用于分步页面导航图。实现结果如下。css代码如下:@charset"UTF-8";/**单列宽,单行高,列数和行数*/body{font-size:12px;颜色:#000000;font-family:"微软雅黑";溢出-x:隐藏;背景:#ffffff;}/**单列宽、单行高、列号和行号*/.web-width{width:1200px;边距:20px自动;}.for-liucheng{width:1200px;保证金:0000;高度:160px;填充:0000;位置:相对;}.liulist{浮动:左;宽度:300px;高度:10px;背景:#CCCCCC;:左边;宽度:300px;高度:100%;}.liutextbox{位置:绝对;宽度:100%;高度:160px;:53px;}.liutexts{浮动:左;宽度:300px;高度:100%;文本对齐:居中;边距顶部:-7px;}.liutext_2{显示:内联块;%;高度:42px;文本对齐:居中;填充底部:0px;}em{显示:内联块;宽度:24px;高度:24px;边界半径:24px;DBDBD;文本对齐:居中;字体大小:14px;行高:24px;字体样式:正常;字体粗细:粗体;颜色:#fff;}strong{显示:内联块;高度:16px;行高:16px;字体粗细:400;}.for-curem{背景:#77b852;边框:3px实心#ffffff;边距顶部:-3px;}.for-edem{border:3pxsolid#F0F0F0;边距顶部:-3px;}.for-curstrong{颜色:#77b852;}.liutext:hover{光标:指针;}.liutextboxstrong:hover{文本装饰:下划线;}.liuliststable,tabletrth,tabletrtd{border:10pxsolid#CCCCCC;}.liuliststd{高度:30px;}.liulists表{宽度:100%;文本对齐:居中;边界崩溃:崩溃;}html代码如下步骤图示示例

1
填写账户名1
第一步2
第二步2
第二步2
第二步3
设置新密码4
完成<!--for-liucheng/-->

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

scssA部分css可以通过在scss中设置变量来生成,方便计算每一步的高和宽,从而可以对应显示流程线和流程的位置,本例中的多行线为通过表格边框的宽度来实现,相关的宽高的设置是通过scss变量计算的,可以适应css写法的不同情况,如下//sass风格//----------------------------------@charset"utf-8";/**单列宽、单行高、列数和rows*/$dwidth:300px;$dheight:30px;//水平大链接数$anum:4;//垂直线数$bnum:4;$border:10px;$height:($dheight+$border)*$bnum-$dheight;$allheight:($dheight+$border)*$bn嗯;//圆圈直线$circleA:24px;//文字$textA:16px;正文{字体大小:12px;颜色:#000000;font-family:"微软雅黑";溢出-x:隐藏;background:#ffffff;}/**单列宽度单行高度列数行数*/.web-width{width:1200px;margin:20pxauto;}.for-liucheng{width:$dwidth*$anum;margin:0000;高度:$allheight;填充:0000;位置:相对;}.liulist{浮动:左;宽度:$dwidth;高度:$border;背景:#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;高度:$circleA;边界半径:$ci循环A;背景:#BDBDBD;文本对齐:居中;字体大小:14px;行高:$circleA;字体样式:正常;font-weight:bold;color:#fff;}strong{display:inline-block;height:$textA;行高:$textA;font-weight:400;}.for-curem{background:#77b852;border:3pxsolid#ffffff;margin-top:-3px;}.for-edem{border:3pxsolid#F0F0F0;margin-top:-3px;}.for-curstrong{color:#77b852;}.liutext:hover{cursor:pointer;}.liutextboxstrong:hover{text-decoration:underline;}.liuliststable,tabletrth,tabletrtd{border:$bordersolid#CCCCCC;}.liuliststd{height:$dheight;}.liuliststable{width:100%;text-align:center;边界崩溃:崩溃;}