在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的背景色，否則層級關系的覆蓋效果不明顯
好嘞，看看最后的結果吧
完美................................