目录
一、左侧导航
1、效果如下：
2、代码如下：
3、技术点：
1)、箭头居中
2)、导航区域
3)、导航隐藏时，正文重新居中
4)、设置视口高度
这是用chatgpt生成的网页，其实，不是一下子就生成了满足需求的网页，而是要不断地和chatgpt交互，不断地调试改进，不断地让它理解你的需求，最终才能达到可用的效果。
以下导航，就是通过和chatgpt沟通几个小时后，才达到了满意效果。和普通编程不同，你得让它正确理解你的意思才行，不过它做了个大概后，你如果在这个基础上，迅速改进，达到自己的需求也行。
一、左侧导航
1、效果如下：
2、代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>章节导航示例</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>/* 样式部分 */body {margin: 30;font-family: Arial, sans-serif;height: 100vh;}#app {display: flex;width: 100%;height: 100%;flex-direction: column;}.content {display: flex;width: 100%;height: calc(100% - 50px); /* Adjust height to account for the settings area */}.main-content{padding-left: 100px;padding-right: 100px;overflow:auto;}.top-settings {width: 100%;padding: 10px;background-color: #f5f5f5;border-bottom: 1px solid #ccc;display: flex;justify-content: space-between;align-items: center;}.nav-container {width: 200px;transition: width 0.2s ease;position: relative;background-color: transparent !important; /* 使导航栏背景透明 */border-right: 1px solid #ccc;}.nav-container .el-menu {background-color: transparent !important; /* 使导航栏背景透明 */}.nav-container.hidden {width: 0;}.toggle-btn {position: absolute;top: 50%;right: -15px;transform: translateY(-50%);background: #007BFF;color: white;border: none;cursor: pointer;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;z-index: 2;border-radius: 50%;}section {flex-grow: 1;padding: 20px;overflow-y: auto;transition: all 0.3s ease; } h2 {margin-top: 60px;}.el-menu-item a {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;}nav {width: 200px;padding: 10px;border-right: 1px solid #ccc;overflow: hidden;transition: transform 0.3s ease;position: relative;flex-shrink: 0;}nav.hidden {transform: translateX(-200px);}nav ul {list-style-type: none;padding: 0;margin: 0;width: 100%;}nav ul li {margin: 10px 0;width: 100%;}nav ul li a {text-decoration: none;color: #007BFF;display: block;width: 100%;padding: 5px 0;}nav ul li a:hover {text-decoration: underline;}section {flex-grow: 1;padding: 20px;overflow-y: auto;}h2 {margin-top: 60px;}.toggle-btn {background: #007BFF;color: white;border: none;cursor: pointer;position: absolute;top: 50%;transform: translateY(-50%);right: -15px;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;z-index: 2;border-radius: 50%;}</style>
</head>
<body><div id="app"><div class="top-settings"><div class="btn-group"><button @click="increaseLineHeight">行间距+</button><button @click="decreaseLineHeight">行间距-</button><button @click="increaseParagraphMargin">段间距+</button><button @click="decreaseParagraphMargin">段间距-</button></div></div><div class="content"><div :class="['nav-container', { 'hidden': isHidden }]"><el-menu default-active="1" class="el-menu-vertical-demo" :style="navStyle"><el-menu-item index="1"><a href="#section1" @click="scrollToSection('section1')">第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a></el-menu-item><el-menu-item index="2"><a href="#section2" @click="scrollToSection('section2')">第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a></el-menu-item><el-menu-item index="3"><a href="#section3" @click="scrollToSection('section3')">第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a></el-menu-item><el-menu-item index="4"><a href="#section4" @click="scrollToSection('section4')">第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a></el-menu-item></el-menu><button class="toggle-btn" @click="toggleNav">{{ isHidden ? '▶' : '◀' }}</button></div><el-main class="main-content"><div :style="{ lineHeight: lineHeight, paddingTop: paragraphMargin + 'px', paddingBottom: paragraphMargin + 'px' }"><h2 id="section1">第一章</h2><p>这是第一章的内容。</p><h2 id="section2">第二章</h2><p>这是第二章的内容。>第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</p><p>此开卷第一回也。作者自云：因曾历过一番梦幻之后，故将真事隐去，而借“通灵”之说，撰此《石头记》一书也。故曰“甄士隐”云云。但书中所记何事何人？自又云：“今风尘碌碌，一事无成，忽念及当日所有之女子，一一细考较去，觉其行止见识皆出于我之上。何我堂堂须眉，诚不若彼裙钗哉？实愧则有馀，悔又无益之大无可如何之日也！当此，则自欲将已往所赖天恩祖德，锦衣纨袴之时，饫甘餍肥之日，背父兄教育之恩，负师友规训之德，以至今日一技无成，半生潦倒之罪，编述一集，以告天下人：我之罪固不免，然闺阁中本自历历有人，万不可因我之不肖，自护己短，一并使其泯灭也。虽今日之茅椽蓬牖，瓦灶绳床，其晨夕风露，阶柳庭花，亦未有妨我之襟怀笔墨者。虽我未学，下笔无文，又何妨用假语村言，敷演出一段故事来，亦可使闺阁昭传，复可悦世之目，破人愁闷，不亦宜乎？”故曰“贾雨村云云。</p><p>此回中凡用“梦”用“幻”等字，是提醒阅者眼目，亦是此书立意本旨。</p><p>列位看官：你道此书从何而来？说起根由虽近荒唐，细按则深有趣味。待在下将此来历注明，方使阅者了然不惑。</p><p>原来女娲氏炼石补天之时，于大荒山无稽崖炼成高经十二丈，方经二十四丈顽石三万六千五百零一块。娲皇氏只用了三万六千五百块，只单单剩了一块未用，便弃在此山青埂峰下。谁知此石自经煅炼之后，灵性已通，因见众石俱得补天，独自己无材不堪入选，遂自怨自叹，日夜悲号惭愧。</p><p>一日，正当嗟悼之际，俄见一僧一道远远而来，生得骨格不凡，丰神迥异，说说笑笑来至峰下，坐于石边高谈快论。先是说些云山雾海神仙玄幻之事，后便说到红尘中荣华富贵；此石听了，不觉打动凡心，也想要到人间去享一享这荣华富贵，但自恨粗蠢，不得已，便口吐人言，向那僧道说道：“大师，弟子蠢物，不能见礼了。适闻二位谈那人世间荣耀繁华，心切慕之。弟子质虽粗蠢，性却稍通；况见二师仙形道体，定非凡品，必有补天济世之材，利物济人之德。如蒙发一点慈心，携带弟子得入红尘，在那富贵场中，温柔乡里受享几年，自当永佩洪恩，万劫不忘也。”二仙师听毕，齐憨笑道：“善哉，善哉！那红尘中有却有些乐事，但不能永远依恃，况又有‘美中不足，好事多魔’八个字紧相连属，瞬息间则又乐极悲生，人非物换，究竟是到头一梦，万境归空，倒不如不去的好。</p><p>这石凡心已炽，那里听得进这话去，乃复苦求再四。二仙知不可强制，乃叹道：“此亦静极思动，无中生有之数也。既如此，我们便携你去受享受享，只是到不得意时，切莫后悔。”石道：“自然，自然。”那僧又道：“若说你性灵，却又如此质蠢，并更无奇贵之处。如此也只好踮脚而已。也罢，我如今大施佛法助你助，待劫终之日，复还本质，以了此案。你道好否？”石头听了，感谢不尽。那僧便念咒书符，大展幻术，将一块大石登时变成一块鲜明莹洁的美玉，且又缩成扇坠大小的可佩可拿。那僧托于掌上，笑道：“形体倒也是个宝物了！还只没有实在的好处，<p>正值吃晚饭时，见了王夫人，王夫人又嘱他早去。宝玉回来，</p><h2 id="section3">第三章</h2><p>这是第三章的内容。此开卷第一回也。作者自云：因曾历过一番梦幻之后，故将真事隐去，而借“通灵”之说，撰此《石头记》一书也。故曰“甄士隐”云云。但书中所记何事何人？自又云：“今风尘碌碌，一事无成，忽念及当日所有之女子，一一细考较去，觉其行止见识皆出于我之上。何我堂堂须眉，诚不若彼裙钗哉？实愧则有馀，悔又无益之大无可如何之日也！当此，则自欲将已往所赖天恩祖德，锦衣纨袴之时，饫甘餍肥之日，背父兄教育之恩，负师友规训之德，以至今日一技无成，半生潦倒之罪，编述一集，以告天下人：我之罪固不免，然闺阁中本自历历有人，万不可因我之不肖，自护己短，一并使其泯灭也。虽今日之茅椽蓬牖，瓦灶绳床，其晨夕风露，阶柳庭花，亦未有妨我之襟怀笔墨者。虽我未学，下笔无文，又何妨用假语村言，敷演出一段故事来，亦可使闺阁昭传，复可悦世之目，破人愁闷，不亦宜乎？”故曰“贾雨村云云。此回中凡用“梦”用“幻”等字，是提醒阅者眼目，亦是此书立意本旨。列位看官：你道此书从何而来？说起根由虽近荒唐，细按则深有趣味。待在下将此来历注明，方使阅者了然不惑。原来女娲氏炼石补天之时，于大荒山无稽崖炼成高经十二丈，方经二十四丈顽石三万六千五百零一块。娲皇氏只用了三万六千五百块，只单单剩了一块未用，便弃在此山青埂峰下。谁知此石自经煅炼之后，灵性已通，因见众石俱得补天，独自己无材不堪入选，遂自怨自叹，日夜悲号惭愧。一日，正当嗟悼之际，俄见一僧一道远远而来，生得骨格不凡，丰神迥异，说说笑笑来至峰下，坐于石边高谈快论。先是说些云山雾海神仙玄幻之事，后便说到红尘中荣华富贵；此石听了，不觉打动凡心，也想要到人间去享一享这荣华富贵，但自恨粗蠢，不得已，便口吐人言，向那僧道说道：“大师，弟子蠢物，不能见礼了。适闻二位谈那人世间荣耀繁华，心切慕之。弟子质虽粗蠢，性却稍通；况见二师仙形道体，定非凡品，必有补天济世之材，利物济人之德。如蒙发一点慈心，携带弟子得入红尘，在那富贵场中，温柔乡里受享几年，自当永佩洪恩，万劫不忘也。”二仙师听毕，齐憨笑道：“善哉，善哉！那红尘中有却有些乐事，但不能永远依恃，况又有‘美中不足，好事多魔’八个字紧相连属，瞬息间则又乐极悲生，人非物换，究竟是到头一梦，万境归空，倒不如不去的好。这石凡心已炽，那里听得进这话去，乃复苦求再四。二仙知不可强制，乃叹道：“此亦静极思动，无中生有之数也。既如此，我们便携你去受享受享，只是到不得意时，切莫后悔。”石道：“自然，自然。”那僧又道：“若说你性灵，却又如此质蠢，并更无奇贵之处。如此也只好踮脚而已。也罢，我如今大施佛法助你助，待劫终之日，复还本质，以了此案。你道好否？”石头听了，感谢不尽。那僧便念咒书符，大展幻术，将一块大石登时变成一块鲜明莹洁的美玉，且又缩成扇坠大小的可佩可拿。那僧托于掌上，笑道：“形体倒也是个宝物了！还只没有实在的好处，正值吃晚饭时，见了王夫人，王夫人又嘱他早去。宝玉回来，</p><h2 id="section4">第四章</h2><p>这是第四章的内容。此开卷第一回也。作者自云：因曾历过一番梦幻之后，故将真事隐去，而借“通灵”之说，撰此《石头记》一书也。故曰“甄士隐”云云。但书中所记何事何人？自又云：“今风尘碌碌，一事无成，忽念及当日所有之女子，一一细考较去，觉其行止见识皆出于我之上。何我堂堂须眉，诚不若彼裙钗哉？实愧则有馀，悔又无益之大无可如何之日也！当此，则自欲将已往所赖天恩祖德，锦衣纨袴之时，饫甘餍肥之日，背父兄教育之恩，负师友规训之德，以至今日一技无成，半生潦倒之罪，编述一集，以告天下人：我之罪固不免，然闺阁中本自历历有人，万不可因我之不肖，自护己短，一并使其泯灭也。虽今日之茅椽蓬牖，瓦灶绳床，其晨夕风露，阶柳庭花，亦未有妨我之襟怀笔墨者。虽我未学，下笔无文，又何妨用假语村言，敷演出一段故事来，亦可使闺阁昭传，复可悦世之目，破人愁闷，不亦宜乎？”故曰“贾雨村云云。此回中凡用“梦”用“幻”等字，是提醒阅者眼目，亦是此书立意本旨。列位看官：你道此书从何而来？说起根由虽近荒唐，细按则深有趣味。待在下将此来历注明，方使阅者了然不惑。原来女娲氏炼石补天之时，于大荒山无稽崖炼成高经十二丈，方经二十四丈顽石三万六千五百零一块。娲皇氏只用了三万六千五百块，只单单剩了一块未用，便弃在此山青埂峰下。谁知此石自经煅炼之后，灵性已通，因见众石俱得补天，独自己无材不堪入选，遂自怨自叹，日夜悲号惭愧。一日，正当嗟悼之际，俄见一僧一道远远而来，生得骨格不凡，丰神迥异，说说笑笑来至峰下，坐于石边高谈快论。先是说些云山雾海神仙玄幻之事，后便说到红尘中荣华富贵；此石听了，不觉打动凡心，也想要到人间去享一享这荣华富贵，但自恨粗蠢，不得已，便口吐人言，向那僧道说道：“大师，弟子蠢物，不能见礼了。适闻二位谈那人世间荣耀繁华，心切慕之。弟子质虽粗蠢，性却稍通；况见二师仙形道体，定非凡品，必有补天济世之材，利物济人之德。如蒙发一点慈心，携带弟子得入红尘，在那富贵场中，温柔乡里受享几年，自当永佩洪恩，万劫不忘也。”二仙师听毕，齐憨笑道：“善哉，善哉！那红尘中有却有些乐事，但不能永远依恃，况又有‘美中不足，好事多魔’八个字紧相连属，瞬息间则又乐极悲生，人非物换，究竟是到头一梦，万境归空，倒不如不去的好。这石凡心已炽，那里听得进这话去，乃复苦求再四。二仙知不可强制，乃叹道：“此亦静极思动，无中生有之数也。既如此，我们便携你去受享受享，只是到不得意时，切莫后悔。”石道：“自然，自然。”那僧又道：“若说你性灵，却又如此质蠢，并更无奇贵之处。如此也只好踮脚而已。也罢，我如今大施佛法助你助，待劫终之日，复还本质，以了此案。你道好否？”石头听了，感谢不尽。那僧便念咒书符，大展幻术，将一块大石登时变成一块鲜明莹洁的美玉，且又缩成扇坠大小的可佩可拿。那僧托于掌上，笑道：“形体倒也是个宝物了！还只没有实在的好处，正值吃晚饭时，见了王夫人，王夫人又嘱他早去。宝玉回来，</p></div></el-main></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data: {isHidden: false, // 导航栏是否隐藏lineHeight: 1.6, // 行间距paragraphMargin: 10 // 段间距},computed: {navStyle() {return this.isHidden ? { width: '0', overflow: 'hidden' } : { width: '200px' };}},methods: {toggleNav() {this.isHidden = !this.isHidden;},scrollToSection(sectionId) {const element = document.getElementById(sectionId);if (element) {element.scrollIntoView({ behavior: 'smooth' });}},increaseLineHeight() {this.lineHeight += 0.1;},decreaseLineHeight() {if (this.lineHeight > 1) {this.lineHeight -= 0.1;}},increaseParagraphMargin() {this.paragraphMargin += 5;},decreaseParagraphMargin() {if (this.paragraphMargin > 5) {this.paragraphMargin -= 5;}}}});</script>
</body>
</html>3、技术点：
1)、箭头居中
.toggle-btn {position: absolute;top: 50%;right: -15px;2)、导航区域
.nav-container {width: 200px;transition: width 0.2s ease;position: relative;background-color: transparent !important; /* 使导航栏背景透明 */border-right: 1px solid #ccc;}3)、导航隐藏时，正文重新居中
.nav-container.hidden {width: 0;}同时，vue中设置hidden属性
new Vue({el: '#app',data: {isHidden: false, // 导航栏是否隐藏lineHeight: 1.6, // 行间距paragraphMargin: 10 // 段间距}, computed: {navStyle() {return this.isHidden ? { width: '0', overflow: 'hidden' } : { width: '200px' };}}, methods: {toggleNav() {this.isHidden = !this.isHidden;}, <div class="content"><div :class="['nav-container', { 'hidden': isHidden }]"><el-menu default-active="1" class="el-menu-vertical-demo" :style="navStyle"><el-menu-item index="1"><a href="#section1" @click="scrollToSection('section1')">第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a></el-menu-item><el-menu-item index="2"><a href="#section2" @click="scrollToSection('section2')">第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a></el-menu-item><el-menu-item index="3"><a href="#section3" @click="scrollToSection('section3')">第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a></el-menu-item><el-menu-item index="4"><a href="#section4" @click="scrollToSection('section4')">第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a></el-menu-item></el-menu><button class="toggle-btn" @click="toggleNav">{{ isHidden ? '▶' : '◀' }}</button></div>4)、设置视口高度
防止，导航因正文文字很多时，因为滚动条往下滚动，导致导航看不全，看不见情况出现
height: 100vh; 是用于设置一个元素的高度，占据整个视口高度（viewport height）的100%。vh 是视口高度单位的缩写，表示视口高度的百分之一。
body {margin: 30;font-family: Arial, sans-serif;height: 100vh; }#app {display: flex;width: 100%;height: 100%;flex-direction: column;}
