美文网首页
锚点定位

锚点定位

作者: 学王 | 来源:发表于2024-07-02 23:22 被阅读0次
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="div">
        <ul class="ul" id="ul">
        </ul>
        <div class="innderDiv" id="kkk">
            <h1>项目评估</h1>
            <p>这么多不同历史文化、社会制度、经济体量、发展阶段的国家,为何能始终保持团结协作,致力于构建平等相待、守望相助、休戚与共、安危共担的命运共同体?</p>
            <p>这么多不同历史文化、社会制度、经济体量、发展阶段的国家,为何能始终保持团结协作,致力于构建平等相待、守望相助、休戚与共、安危共担的命运共同体?</p>
            <p>这么多不同历史文化、社会制度、经济体量、发展阶段的国家,为何能始终保持团结协作,致力于构建平等相待、守望相助、休戚与共、安危共担的命运共同体?</p>
            <h1>H12</h1>
            <h2>历史数据</h2>
            <p>
                上合组织诞生之初,在各成员国共同签署的第一份成立宣言中,就明确了以“互信、互利、平等、协商、尊重多样文明、谋求共同发展”为基本内容的“上海精神”。这从一开始就决定了上合组织不搞封闭排他的集团政治小圈子,不走意识形态对抗的老路,不搞以大欺小、恃强凌弱的“丛林法则”,而是倡导文明对话、尊重彼此核心利益和选择的发展道路、照顾彼此利益诉求、遇事协商一致。
                20多年来,上合组织始终高举“上海精神”旗帜,开创了不同社会制度和发展道路的国家间团结协作、开放共赢、包容互鉴的全新合作模式。习主席强调:“地区一体化和经济全球化是时代潮流,各国和各国人民应该从这一进程中受益。”
            </p>
            <p>
                上合组织诞生之初,在各成员国共同签署的第一份成立宣言中,就明确了以“互信、互利、平等、协商、尊重多样文明、谋求共同发展”为基本内容的“上海精神”。这从一开始就决定了上合组织不搞封闭排他的集团政治小圈子,不走意识形态对抗的老路,不搞以大欺小、恃强凌弱的“丛林法则”,而是倡导文明对话、尊重彼此核心利益和选择的发展道路、照顾彼此利益诉求、遇事协商一致。
                20多年来,上合组织始终高举“上海精神”旗帜,开创了不同社会制度和发展道路的国家间团结协作、开放共赢、包容互鉴的全新合作模式。习主席强调:“地区一体化和经济全球化是时代潮流,各国和各国人民应该从这一进程中受益。”
            </p>
            <p>
                上合组织诞生之初,在各成员国共同签署的第一份成立宣言中,就明确了以“互信、互利、平等、协商、尊重多样文明、谋求共同发展”为基本内容的“上海精神”。这从一开始就决定了上合组织不搞封闭排他的集团政治小圈子,不走意识形态对抗的老路,不搞以大欺小、恃强凌弱的“丛林法则”,而是倡导文明对话、尊重彼此核心利益和选择的发展道路、照顾彼此利益诉求、遇事协商一致。
                20多年来,上合组织始终高举“上海精神”旗帜,开创了不同社会制度和发展道路的国家间团结协作、开放共赢、包容互鉴的全新合作模式。习主席强调:“地区一体化和经济全球化是时代潮流,各国和各国人民应该从这一进程中受益。”
            </p>
            <p>
                上合组织诞生之初,在各成员国共同签署的第一份成立宣言中,就明确了以“互信、互利、平等、协商、尊重多样文明、谋求共同发展”为基本内容的“上海精神”。这从一开始就决定了上合组织不搞封闭排他的集团政治小圈子,不走意识形态对抗的老路,不搞以大欺小、恃强凌弱的“丛林法则”,而是倡导文明对话、尊重彼此核心利益和选择的发展道路、照顾彼此利益诉求、遇事协商一致。
                20多年来,上合组织始终高举“上海精神”旗帜,开创了不同社会制度和发展道路的国家间团结协作、开放共赢、包容互鉴的全新合作模式。习主席强调:“地区一体化和经济全球化是时代潮流,各国和各国人民应该从这一进程中受益。”
            </p>
            <p>
                上合组织诞生之初,在各成员国共同签署的第一份成立宣言中,就明确了以“互信、互利、平等、协商、尊重多样文明、谋求共同发展”为基本内容的“上海精神”。这从一开始就决定了上合组织不搞封闭排他的集团政治小圈子,不走意识形态对抗的老路,不搞以大欺小、恃强凌弱的“丛林法则”,而是倡导文明对话、尊重彼此核心利益和选择的发展道路、照顾彼此利益诉求、遇事协商一致。
                20多年来,上合组织始终高举“上海精神”旗帜,开创了不同社会制度和发展道路的国家间团结协作、开放共赢、包容互鉴的全新合作模式。习主席强调:“地区一体化和经济全球化是时代潮流,各国和各国人民应该从这一进程中受益。”
            </p>
            <h1>H13</h1>
            <h1>运营数据</h1>
            <h1>H15</h1>
            <p>
                上合组织诞生之初,在各成员国共同签署的第一份成立宣言中,就明确了以“互信、互利、平等、协商、尊重多样文明、谋求共同发展”为基本内容的“上海精神”。这从一开始就决定了上合组织不搞封闭排他的集团政治小圈子,不走意识形态对抗的老路,不搞以大欺小、恃强凌弱的“丛林法则”,而是倡导文明对话、尊重彼此核心利益和选择的发展道路、照顾彼此利益诉求、遇事协商一致。
                20多年来,上合组织始终高举“上海精神”旗帜,开创了不同社会制度和发展道路的国家间团结协作、开放共赢、包容互鉴的全新合作模式。习主席强调:“地区一体化和经济全球化是时代潮流,各国和各国人民应该从这一进程中受益。”
            </p>
            <h2>H22</h2>
            <h2>H23</h2>
            <div>
                <h1>测试</h1>
                <h2>测试</h2>
            </div>
            <p>
                上合组织诞生之初,在各成员国共同签署的第一份成立宣言中,就明确了以“互信、互利、平等、协商、尊重多样文明、谋求共同发展”为基本内容的“上海精神”。这从一开始就决定了上合组织不搞封闭排他的集团政治小圈子,不走意识形态对抗的老路,不搞以大欺小、恃强凌弱的“丛林法则”,而是倡导文明对话、尊重彼此核心利益和选择的发展道路、照顾彼此利益诉求、遇事协商一致。
                20多年来,上合组织始终高举“上海精神”旗帜,开创了不同社会制度和发展道路的国家间团结协作、开放共赢、包容互鉴的全新合作模式。习主席强调:“地区一体化和经济全球化是时代潮流,各国和各国人民应该从这一进程中受益。”
            </p>
            <p>
                上合组织诞生之初,在各成员国共同签署的第一份成立宣言中,就明确了以“互信、互利、平等、协商、尊重多样文明、谋求共同发展”为基本内容的“上海精神”。这从一开始就决定了上合组织不搞封闭排他的集团政治小圈子,不走意识形态对抗的老路,不搞以大欺小、恃强凌弱的“丛林法则”,而是倡导文明对话、尊重彼此核心利益和选择的发展道路、照顾彼此利益诉求、遇事协商一致。
                20多年来,上合组织始终高举“上海精神”旗帜,开创了不同社会制度和发展道路的国家间团结协作、开放共赢、包容互鉴的全新合作模式。习主席强调:“地区一体化和经济全球化是时代潮流,各国和各国人民应该从这一进程中受益。”
            </p>
            <p>
                上合组织诞生之初,在各成员国共同签署的第一份成立宣言中,就明确了以“互信、互利、平等、协商、尊重多样文明、谋求共同发展”为基本内容的“上海精神”。这从一开始就决定了上合组织不搞封闭排他的集团政治小圈子,不走意识形态对抗的老路,不搞以大欺小、恃强凌弱的“丛林法则”,而是倡导文明对话、尊重彼此核心利益和选择的发展道路、照顾彼此利益诉求、遇事协商一致。
                20多年来,上合组织始终高举“上海精神”旗帜,开创了不同社会制度和发展道路的国家间团结协作、开放共赢、包容互鉴的全新合作模式。习主席强调:“地区一体化和经济全球化是时代潮流,各国和各国人民应该从这一进程中受益。”
            </p>
            <h1>H16</h1>
            <h2>H24</h2>
            <p>
                上合组织诞生之初,在各成员国共同签署的第一份成立宣言中,就明确了以“互信、互利、平等、协商、尊重多样文明、谋求共同发展”为基本内容的“上海精神”。这从一开始就决定了上合组织不搞封闭排他的集团政治小圈子,不走意识形态对抗的老路,不搞以大欺小、恃强凌弱的“丛林法则”,而是倡导文明对话、尊重彼此核心利益和选择的发展道路、照顾彼此利益诉求、遇事协商一致。
                20多年来,上合组织始终高举“上海精神”旗帜,开创了不同社会制度和发展道路的国家间团结协作、开放共赢、包容互鉴的全新合作模式。习主席强调:“地区一体化和经济全球化是时代潮流,各国和各国人民应该从这一进程中受益。”
            </p>
            <p>
                上合组织诞生之初,在各成员国共同签署的第一份成立宣言中,就明确了以“互信、互利、平等、协商、尊重多样文明、谋求共同发展”为基本内容的“上海精神”。这从一开始就决定了上合组织不搞封闭排他的集团政治小圈子,不走意识形态对抗的老路,不搞以大欺小、恃强凌弱的“丛林法则”,而是倡导文明对话、尊重彼此核心利益和选择的发展道路、照顾彼此利益诉求、遇事协商一致。
                20多年来,上合组织始终高举“上海精神”旗帜,开创了不同社会制度和发展道路的国家间团结协作、开放共赢、包容互鉴的全新合作模式。习主席强调:“地区一体化和经济全球化是时代潮流,各国和各国人民应该从这一进程中受益。”
            </p>
            <p>
                上合组织诞生之初,在各成员国共同签署的第一份成立宣言中,就明确了以“互信、互利、平等、协商、尊重多样文明、谋求共同发展”为基本内容的“上海精神”。这从一开始就决定了上合组织不搞封闭排他的集团政治小圈子,不走意识形态对抗的老路,不搞以大欺小、恃强凌弱的“丛林法则”,而是倡导文明对话、尊重彼此核心利益和选择的发展道路、照顾彼此利益诉求、遇事协商一致。
                20多年来,上合组织始终高举“上海精神”旗帜,开创了不同社会制度和发展道路的国家间团结协作、开放共赢、包容互鉴的全新合作模式。习主席强调:“地区一体化和经济全球化是时代潮流,各国和各国人民应该从这一进程中受益。”
            </p>
            <p>
                上合组织诞生之初,在各成员国共同签署的第一份成立宣言中,就明确了以“互信、互利、平等、协商、尊重多样文明、谋求共同发展”为基本内容的“上海精神”。这从一开始就决定了上合组织不搞封闭排他的集团政治小圈子,不走意识形态对抗的老路,不搞以大欺小、恃强凌弱的“丛林法则”,而是倡导文明对话、尊重彼此核心利益和选择的发展道路、照顾彼此利益诉求、遇事协商一致。
                20多年来,上合组织始终高举“上海精神”旗帜,开创了不同社会制度和发展道路的国家间团结协作、开放共赢、包容互鉴的全新合作模式。习主席强调:“地区一体化和经济全球化是时代潮流,各国和各国人民应该从这一进程中受益。”
            </p>
        </div>
    </div>
</body>
<script>
    window.onload = () => {
        // 赋值
        let eles = [];
        function traverseElement(element) {
            // 遍历当前元素的子元素
            for (let i = 0; i < element.children.length; i++) {
                let id = Math.floor(Math.random() * 100000);
                const child = element.children[i];
                if (['H1', 'H2', 'H3', 'H4', 'H5'].includes(child.tagName)) {
                    eles.push({
                        tagName: child.tagName,
                        innerHTML: child.innerHTML,
                        id
                    })
                    child.setAttribute('id', id);
                }
                traverseElement(child); // 递归遍历子元素
            }
        }
        traverseElement(document.getElementById('kkk'))
        let INNERHTML = '';
        eles.forEach(e => {
            INNERHTML += `<li><a class="smooth-scroll" href="#${e.id}">${e.innerHTML}</a></li>`
        });
        document.getElementById("ul").innerHTML = INNERHTML;
        // 监听
        document.querySelectorAll('.smooth-scroll').forEach(
            anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href').substring(1);
                    const targetElement = document.getElementById(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({ block: 'center' });
                    }
                });
            });
    }
</script>
<style>
    .div {
        display: flex;
    }

    .ul {
        width: 100px;
        list-style: none;
        padding: 0;
    }

    .innderDiv {
        flex: 1;
    }
</style>

</html>

相关文章

  • 2019-07-02 overflow 与锚点定位

    overflow 与锚点定位 锚点,通俗点的解释就是可以让页面定位到某个位置的点。 基于URL 地址的锚链实现锚点...

  • HTML基础学习

    1.1 锚点定位 (难点) 通过创建锚点链接,用户能够快速定位到目标内容。 创建锚点链接分为两步: 1.2 bas...

  • hash锚点定位偏移问题之用js方法解决

    当我们使用a标签做锚点定位的时候,如果有做固定顶部导航栏的话,直接定位到锚点的时候,会发现定位的位置相较于锚点往下...

  • HTML-锚点定位

    在HTML中使用锚点连接,用户可以快速定位到目标内容。创建锚点定位分成两步:1、定义锚点连接: 2、设置连接id

  • CSS定位锚点

    第一节 元素的定位设置 position属性 position属性:定义建立元素布局所用的定位机制说明: stat...

  • 8、定位锚点

    .fu2{width: 200px;height: 200px;background: #f9c;margin: ...

  • iview 锚点爬坑 && vue 锚点

    在vue中实现锚点定位效果 iview的锚点 原生锚点实现 iview爬坑点 且需要把滚动容器的id或者class...

  • 【a标签的锚点技术】

    锚点技术 锚点:指的是一个网页上的某个“定位位置”。 锚点的实现:需要使用至少2次a标签来配合完成。 其基本形式如...

  • Android ConstraintLayout适配(二)

    一、Guideline 引导线或锚点线当需要一个任意位置的锚点时,可以使用锚点线(Guideline)来帮助定位,...

  • 移动端 vue 中实现锚点定位

    期望效果:点击每个锚点,能够定位到锚点所在的位置。(代码规范采用的是eslint) 简单粗暴代码如下所示: ...

网友评论

      本文标题:锚点定位

      本文链接:https://www.haomeiwen.com/subject/frlbcjtx.html