html+css 实现类似word目录效果并生成pdf

最新推荐文章于 2023-09-23 17:23:39 发布

carefreefly

最新推荐文章于 2023-09-23 17:23:39 发布

阅读量1k

点赞数

文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/carefreefly/article/details/127189372

版权

直接上码

<!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;
            /*设置背景色*/
            /*background: #00FF00 ;*/
            /*设置背景图片*/
            /*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="cata

最低0.47元/天解锁文章