首页 前端知识 Jquery锚点导航定位、css设置头部左侧固定,右侧内容滚动

Jquery锚点导航定位、css设置头部左侧固定,右侧内容滚动

2024-02-15 14:02:58 前端知识 前端哥 363 581 我要收藏

锚点导航,点击左侧导航定位到标题

如图所示:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        #menu {
            position: fixed;
            top: 150px;
            float: left;
            width: 230px;
            height: 100%;
            border-right: 1px solid #e6e6e6;
        }
        
        #menu ul {
            margin-left: -40px;
        }
        
        #menu ul li a {
            text-align: left;
            display: block;
            font-size: 12px;
            font-weight: bold;
            width: 230px;
            line-height: 30px;
            text-decoration: none;
            color: #606266;
            padding: 0 0 0 10px;
            font-family: "Microsoft YaHei";
        }
        
        li {
            list-style: none;
        }
        
        #menu ul li a:hover {
            background: #e7e7e7;
        }
        
        #boxes {
            flex: 1;
            overflow: hidden;
            overflow-y: scroll;
            position: fixed;
            top: 150px;
            right: 0;
            padding-right: 20px;
            bottom: 0;
        }
    </style>
</head>

<body>
    <p style="color: #3398db; font-weight: bold; padding: 5px 5px 5px 5px;">质控分析报告 &nbsp;</p>
    <div>
        <table class="table table-bordered">
            <tr>
                <td>
                    头部
                </td>
            </tr>
        </table>
    </div>
    <div class="content">
        <div id="menu">
            <ul>
                <li><a href="#item4" style="text-align: left; margin-left: -10px;">概述</a></li>
            </ul>
            <ul>
                <li><a href="#item1" class="current">第一章节 前言部分</a></li>
                <li><a href="#item2">第二章节 单病种数据填报 /上报情况分析</a></li>
                <li><a href="#item3">第三章节 各科室单病种数据质量分析</a></li>
            </ul>
        </div>
        <div id="boxes" style="float: left; width: 80%;">
            <h2 style="text-align: center;"><span style="font-size: 15pt"><span style="font-family: 微软雅黑"><strong><strong><span
                style="font-size: 15pt"><span style="font-family: 微软雅黑"></span></span>
                </strong>
                </strong>
                </span>
                </span>
            </h2>
            <h2 style="text-align: center"><span style="font-size: 15pt"><span style="font-family: 微软雅黑"><strong><strong><span
                style="font-size: 15pt"><span style="font-family: 微软雅黑"><strong
                    class="tag2">XXXX</strong>单病种质控分析报告</span> </span>
                </strong>
                </strong>
                </span>
                </span>
            </h2>
            <p id="item1" class="item">
                <span style="font-size: 15pt; margin-left: 40px;"><span style="font-family: 微软雅黑"><strong><strong><span
                    style="font-size: 13pt"><span style="font-family: 微软雅黑"><strong>&nbsp;<span
                        style="font-family: 微软雅黑">第一章节</span> <span style="font-family: 微软雅黑">前言部分</span></strong>
                </span>
                </span>
                </strong>
                </strong>
                </span>
                </span>
            </p>
            <p style="margin-left: 40px; padding: 0 60px 10px 20px; text-align: justify">
                <span style="font-size: 12pt"><span
                    style="font-family: Calibri"><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                        style="font-family: 微软雅黑">&nbsp; &nbsp;
                            2020年7月30日,国家卫生健康委办公厅关于进一步加强单病种质量管理与控制工作的通知中指出,国家卫生健康委在全国开展了单病种质量管理与控制工作</span></span>
                </span>&nbsp;<span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                        style="font-family: 微软雅黑">,建立了</span><span style="font-family: 微软雅黑">&ldquo;单病种质量监测平台&rdquo;,持续监测单病种质控指标并发布质控结果</span></span>
                </span><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                        style="font-family: 微软雅黑"></span></span>
                </span><span style="font-size: 13pt"><span
                            style="font-family: 微软雅黑"><span style="font-family: 微软雅黑">上海今创《单病种监测上报系统》</span></span>
                </span><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                            style="font-family: 微软雅黑">以保障医疗质量和医疗安全</span></span>
                </span><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                                    style="font-family: 微软雅黑">为出发点,</span></span>
                </span><span style="font-size: 13pt"><span
                                        style="font-family: 微软雅黑"><span style="font-family: 微软雅黑">进一步提升医疗质量精细化、科学化管理水平</span></span>
                </span><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                                        style="font-family: 微软雅黑"></span></span>
                </span>
                </span>
                </span>
            </p>
            <h2 style="padding: 0 60px 10px 20px; text-align: left; margin-left: 40px;" id="item2" class="item"><span style="font-size: 15pt"><span
                style="font-family: 微软雅黑"><strong><strong><span style="font-size: 13pt"><span
                    style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">&nbsp;第二章节</span> <span style="font-family: 微软雅黑">单病种数据填报</span> <span style="font-family: 微软雅黑">/</span><span style="font-family: 微软雅黑">上报情况分析</span></strong>
                </span>
                </span>
                </strong>
                </strong>
                </span>
                </span>
            </h2>
            <p style="text-align: center; margin-left: 40px;">
                <span style="font-size: 12pt"><span
                    style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                        style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">&nbsp; 1.1
                                    &nbsp;整体情况:</span></strong>
                </span>
                </span>
                </strong>
                </span>
                </span>
            </p>
            <p style="margin-left: 40px; text-align: justify">
                <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                    style="font-size: 13pt"><span style="font-family: 微软雅黑" class="tag1"></span>&nbsp;</span><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span style="font-family: 微软雅黑"></span> <span style="font-family: 微软雅黑"><span class="tag2">xxxx</span>医院共填报单病种类型共
                <span class="tag3">xxxx</span>个,分别为<span class="tag4">xxxx病种</span>填报数量共计 <span class="tag5">xxxx</span></span>
                </span>
                </span>
                </span>
                </span>
            </p>
            <p style="margin-left: 40px; text-align: justify">
                <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                    style="font-size: 13pt"><span style="font-family: 微软雅黑"><span style="font-family: 微软雅黑"></span><span style="font-family: 微软雅黑"><span class="tag6"></span><span class="tag7"></span></span>
                </span>
                </span>
                </span>
                </span>
            </p>
            <p style="margin-left: 40px; text-align: justify">
                <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                    style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                        style="font-family: 微软雅黑">上报单病种数量共计</span><span class="tag8">xxxx</span></span>
                </span>
                </span>
                </span><span style="font-size: 12pt"><span style="font-family: Calibri"><span
                    style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                        style="font-family: 微软雅黑">其中上报成功</span><span style="font-family: 微软雅黑"><span
                            class="tag9">xxxx</span>例,上报成功率 <span class="tag10">xxxx</span>;上报失败<span class="tag11">xxxx</span>例,失败率<span class="tag12">xxxx</span> </span>
                </span>
                </span>
                </span>
                </span>
            </p>
            <table align="center" border="1" cellpadding="0" cellspacing="0" id="fpageform1" style="width: 870px; font-size: 16px;">
                <thead>
                    <tr>
                        <th scope="col">序号</th>
                        <th scope="col">病种类型</th>
                        <th scope="col">需上报例数</th>
                        <th scope="col">填报例数</th>
                        <th scope="col">上报总数(上报成功+上报失败)</th>
                        <th scope="col">上报率</th>
                    </tr>
                </thead>
                <tbody class="tag13">
                    <tr>
                        <td>内容</td>
                        <td>内容</td>
                        <td>内容</td>
                        <td>内容</td>
                    </tr>
                </tbody>
            </table>
            <p>&nbsp;</p>
            <p style="margin-left: 40px; text-align: justify">
                <span style="font-size: 12pt"><span
                    style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                        style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">1.2
                                    单病种数据质量情况:</span></strong>
                </span>
                </span>
                </strong>
                </span>
                </span>
            </p>
            <p style="margin-left: 40px; text-align: justify">
                <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                    style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                        style="font-family: 微软雅黑">在医院等级评审、三级公立</span></span>
                </span><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                                style="font-family: 微软雅黑">医院绩效考核中</span></span>
                </span><span style="font-size: 13pt"><span
                                    style="font-family: 微软雅黑"><span style="font-family: 微软雅黑">电子病历系统功能应用水平分级等大型</span><span style="font-family: 微软雅黑">&ldquo;考试&rdquo;中,单病种质控都是&ldquo;必考&rdquo;项目。其中,单病种重点关注指标包括:</span></span>
                </span>
                </span>
                </span>
            </p>
            <p style="margin-left: 40px; text-align: justify">
                <span style="font-size: 12pt"><span
                    style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                        style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">某病种例数</span></strong>
                </span>
                </span>
                </strong><span style="font-size: 13pt"><span
                        style="font-family: 微软雅黑">=符合纳入条件的某病种出院人数累加求和;</span></span>
                </span>
                </span>
            </p>
            <p style="margin-left: 40px; text-align: justify">
                <span style="font-size: 12pt"><span
                    style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                        style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">病历上报率</span></strong>
                </span>
                </span>
                </strong><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                        style="font-family: 微软雅黑">=年度内符合单病种纳入条件的某病种上报至国家单病种质量监测平台的病例数/同期符合单病种纳入条件的该病种出院人数累加求和</span></span>
                </span><span style="font-size: 13pt"><span style="font-family: 微软雅黑">*100%</span></span>
                </span>
                </span>
            </p>
            <p style="margin-left: 20px; width: 96%; height: 20px;"></p>
            <p style="margin-left: 20px; margin-top: 60px; width: 96%; height: 320px;" id="tag14"></p>
            <h2 style="text-align: center"><span style="font-size: 12pt"><span style="font-family: Calibri"><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                    style="font-family: 微软雅黑">图为单病种填报趋势图<span>(备注:统计一年的填报数据)</span></span>
                </span>
                </span>
                </span>
                </span>
            </h2>
            <p style="margin-left: 40px; text-align: center">
                <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                    style="font-size: 13pt"><span style="font-family: 微软雅黑"><span style="color: #ff0000"></span></span>
                </span>
                </span>
                </span>
            </p>
            <p id="tag15" style="text-align: justify; width: 96%; height: 320px;"></p>
            <p style="text-align: center">
                <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                    style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                        style="font-family: 微软雅黑">图为单病种上报趋势图<span>(备注:统计一年的上报数据)</span></span>
                </span>
                </span>
                </span>
                </span>
            </p>
            <p style="text-align: center">
                <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                    style="font-size: 13pt"><span style="font-family: 微软雅黑"><span style="color: #ff0000"></span></span>
                </span>
                </span>
                </span>
            </p>
            <p style="text-align: left; margin-left: 60px;">
                <span style="font-size: 12pt"><span
                    style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                        style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">平均住院日</span></strong>
                </span>
                </span>
                </strong><span style="font-family: 微软雅黑" class="tag16" title="某病种出院患者占用总床日数/同期同病种总出院人数">=某病种出院患者占用总床日数/同期同病种总出院人数</span> </span>
                </span>
                </span>
                </span>
            </p>
            <p style="text-align: left; margin-left: 60px;">
                <span style="font-size: 12pt"><span
                    style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                        style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">次均费用</span></strong>
                </span>
                </span>
                </strong><span style="font-family: 微软雅黑" class="tag17" title="某病种总出院费用/同期同病种总出院人数">=某病种总出院费用/同期同病种总出院人数</span> </span>
                </span>
            </p>
            <p style="text-align: left; margin-left: 60px;">
                <span style="font-size: 12pt"><span
                    style="font-family: Calibri"><strong><span style="font-size: 13pt"><span
                        style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">病死率</span></strong>
                </span>
                </span>
                </strong><span style="font-family: 微软雅黑" class="tag18" title="某病种死亡人数/同期同病种总出院人数*100%">=某病种死亡人数/同期同病种总出院人数*100%</span></span>
                </span>
            </p>
            <h2 style="text-align: center"><span style="font-size: 12pt"><span style="font-family: Calibri"><span
                style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                    style="font-family: 微软雅黑; font-weight: bold;">各病种平均住院日、次均费用、病死率汇总(上报数据)</span></span>
                </span>
                </span>
                </span>
            </h2>
            <table align="center" border="1" cellpadding="0" cellspacing="0" id="fpageform2" style="width: 870px; font-size: 16px;">
                <thead>
                    <tr>
                        <th scope="col">病种类型</th>
                        <th scope="col">平均住院日</th>
                        <th scope="col">次均费用</th>
                        <th scope="col">病死率</th>
                    </tr>
                </thead>
                <tbody class="tag19">
                    <tr>
                        <td>内容</td>
                        <td>内容</td>
                        <td>内容</td>
                        <td>内容</td>
                    </tr>
                </tbody>
            </table>
            <br />
            <h2 style="margin-left: 40px; padding: 0 60px 10px 20px; text-align: left" id="item3" class="item"><span style="font-size: 15pt"><span
                style="font-family: 微软雅黑"><strong><strong><span style="font-size: 13pt"><span
                    style="font-family: 微软雅黑"><strong><span style="font-family: 微软雅黑">第三章节</span> <span style="font-family: 微软雅黑">各科室单病种数据质量分析</span></strong>
                </span>
                </span>
                </strong>
                </strong>
                </span>
                </span>
            </h2>
            <p style="margin-left: 40px; text-align: justify">
                <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                    style="font-size: 13pt"><span style="font-family: 微软雅黑"><span style="font-family: 微软雅黑">&nbsp;
                            填报单病种数量数量共计</span><span style="font-family: 微软雅黑"><span class="tag20">xxx</span> 例,遍布<span class="tag21">xxx</span>个科室,其中按填报量排名前三科室分布为<span class="tag22">xxx</span></span>
                </span>
                </span>
                </span>
                </span>
            </p>
            <p style="text-align: justify; width: 90%; height: 400px;" id="tag23"></p>
            <p style="text-align: center">
                <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                    style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                        style="font-family: 微软雅黑">各科室填报例数统计图</span></span>
                </span>
                </span>
                </span>
            </p>
            <p style="margin-left: 40px; margin-top: 60px; text-align: justify">
                <span style="font-size: 12pt"><span
                    style="font-family: Calibri"><span style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                        style="font-family: 微软雅黑">&nbsp; 上报单病种数量数量共计</span><span style="font-family: 微软雅黑"><span
                            class="tag24">xxx</span> 例,遍布<span class="tag25">xxx</span>个科室,其中按上报量(上报成功+上报失败)排名前三科室分布为<span class="tag26">xxx</span></span>
                </span>
                </span>
                </span>
                </span>
            </p>
            <p style="text-align: justify; width: 90%; height: 400px;" id="tag27"></p>
            <p style="text-align: center">
                <span style="font-size: 12pt"><span style="font-family: Calibri"><span
                    style="font-size: 13pt"><span style="font-family: 微软雅黑"><span
                        style="font-family: 微软雅黑">各科室上报例数统计图</span></span>
                </span>
                </span>
                </span>
            </p>
        </div>
    </div>
</body>

</html>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2106.html
标签
评论
发布的文章

01-10jQuery框架

2024-03-01 12:03:59

JS jQuery基础2

2024-03-01 12:03:54

jQuery实现文件上传

2024-03-01 12:03:53

JQuery简介与解析

2024-03-01 12:03:31

jquery上传图片单图多图

2024-03-01 12:03:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!