直接上碼
<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<style>
body {
font-family: FangSong,HanaMinB;
line-height: 1.2;
/*設(shè)置背景色*/
/*background: #00FF00 ;*/
/*設(shè)置背景圖片*/
/*background-image:url(data:image/gif;base64,AAAA) no-repeat fixed top;*/
}
/** 指定pdf紙張大小 **/
@page {
size: A4 ;
margin: 1cm;
/*margin-bottom: 1cm;*/
/*border: thin solid black;*/
}
.page_break { page-break-after:always;}
.seclev2 {
text-indent:20pt;
}
.seclev2c {
text-indent:40pt;
}
a {
text-decoration:none;
}
a:link {
color:#000000;
}
a:visited {color:#00FF00;}
ul li{list-style-type:none;}
ul li div{display:inline-block;}
.catalog-out{position:relative;width: 100%;height:17px}
.catalog-line{border-top:1px dashed #d8d8d8; position: absolute;top:10px;margin:0.5px;width:98%;}
.catalog-title{position: absolute;left:0px;padding:0.5px;z-index: 100;text-align: left;background:#ffffff;padding-right:20px;}
.catalog-page-num{position: absolute;right:0px;padding:0.5px;z-index: 100;text-align: right;background:#ffffff;padding-left:20px;}
</style>
</head>
<body>
<ul>
<li>
<div class="catalog-out">
<div class="catalog-title">第一章 概要</div><div class="catalog-line"> </div><div class="catalog-page-num">1</div>
</div>
<ul>
<li>
<div class="catalog-out">
<div class="catalog-title">1.1 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">1</div>
</div>
<ul>
<li>
<div class="catalog-out">
<div class="catalog-title">1.1.1 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">2</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.1.2 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">3</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.1.3 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">4</div>
</div>
</li>
</ul>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.2 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">1</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.3 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">5</div>
</div>
</li>
</ul>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">第二章 總體設(shè)計(jì)</div><div class="catalog-line"> </div><div class="catalog-page-num">6</div>
</div>
<ul>
<li>
<div class="catalog-out">
<div class="catalog-title">1.1 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">7</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.2 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">8</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.3 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">9</div>
</div>
</li>
</ul>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">第三章 詳細(xì)設(shè)計(jì)</div><div class="catalog-line"> </div><div class="catalog-page-num">10</div>
</div>
<ul>
<li>
<div class="catalog-out">
<div class="catalog-title">1.1 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">11</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.2 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">12</div>
</div>
</li>
<li>
<div class="catalog-out">
<div class="catalog-title">1.3 xxxxxx</div><div class="catalog-line"> </div><div class="catalog-page-num">13</div>
</div>
</li>
</ul>
</li>
</ul>
</body>
</html>
效果下圖，隨意伸縮：
目錄樣式效果圖
關(guān)鍵的樣式
/* 去除ul自帶的. 樣式 */
ul li{list-style-type:none;}
/* 設(shè)置div不換行 */
ul li div{display:inline-block;}
/* 目錄行最外層蛋欣，定義內(nèi)部為相對(duì)定位 */
.catalog-out{position:relative;width: 100%;height:17px}
/* 目錄中間的線 */
.catalog-line{border-top:1px dashed #d8d8d8; position: absolute;top:10px;margin:0.5px;width:98%;}
/* 目錄左側(cè)標(biāo)題 眷茁，固定左側(cè)澳窑，設(shè)置白底遮住部分line暑始，伸縮不會(huì)發(fā)生舉例變化 */
.catalog-title{position: absolute;left:0px;padding:0.5px;z-index: 100;text-align: left;background:#ffffff;padding-right:20px;}
/* 目錄右側(cè)頁(yè)碼 淋袖，固定右側(cè)伴鳖，設(shè)置白底遮住部分line节值，伸縮不會(huì)發(fā)生舉例變化*/
.catalog-page-num{position: absolute;right:0px;padding:0.5px;z-index: 100;text-align: right;background:#ffffff;padding-left:20px;}
也可以通過(guò)工具生成pdf：
https://gitee.com/Rayin/rayin
