利用html实现类似于word自动生成的目录的效果
在word中的自动生成目录当中,我们会看到是这样的目录结构:
嗯,自动生成固然是简单,但是在html当中,却没有一个合适的标签来去做。今天后台导出PDF的时候告诉我,他需要用html做一个这样的结构,然后想了想,实现了第一种方法:
一.js&css结合法
话不多说,直接上代码,代码解决
<head> <meta charset="UTF-8"> <title>Title</title> <style> * { marker: 0; padding: 0; } p { width: 300px; height: 20px; position: relative; } s { display: inline-block; height: 100%; border-bottom: 1px dotted black; } </style> </head> <body> <p> <span>第一层目录</span><s></s> </p> </body> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script> $(function () { var resultWidth = $("p").width() - $("span").width(); $("s").css("width",resultWidth) }) </script>
那个后面的点点点啊,我在想实现方法的时候突然想到了下划线的原点虚线,即border-bottom:1px dotted blank
还有最重要的一点就是后面的点点点是根绝前面内容自动填充的啊,那我就写一个js来获得span的宽度,用父盒子的宽度减去span的宽度就是点点点的宽度啊,嗯,我真聪明;
然而,后台大哥告诉我不能用js,好的,那就用css,多大点事
二.纯css生成
照例上代码
<head> <meta charset="UTF-8"> <title>Title</title> <style> * { marker: 0; padding: 0; } p { width: 300px; height: 20px; position: relative; } span { position: absolute; left: 0; z-index: 2; background-color: white; } s { display: inline-block; height: 100%; width: 100%; position: absolute; left: 0; bottom: 0; /*z-index: -1;*/ border-bottom: 1px dotted black; } </style> </head> <body> <p> <span>第一层目录</span><s></s> </p> </body>
还是原来的配方,还是原来的味道,少了jq的催化,增加了css的味道。
在这里我想起了定位以及z-index层级关系,最重要的一点是要进行遮盖,一定要记得设置span的背景色,否则层级关系的覆盖效果不明显
好嘞,看看最后的结果吧
完美................................