html超链接的锚点链接的使用
1.创建盒子里面放入章节名字和章节内容
<p align="center" class="title">
<a href="#top1">第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a>
<a href="#top2">第二回 贾夫人仙逝扬州城 冷子兴演说荣国府</a>
<a href="#top3">第三回 金陵城起复贾雨村 荣国府收养林黛玉</a>
<a href="#top4">第四回 薄命女偏逢薄命郎 葫芦僧乱判葫芦案</a>
</p>
<div class="box">
<!-- 第一个锚点 -->
<a name="top1"></a>
<p>
<strong>
<a href="">第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a>
</strong>
</p>
<p> 列位看官：你道此书从何而来？说起根由，虽近荒唐，细按则深有趣味。待在下将此来历注明，方使阅者了然不惑。</p>
<p> 原来女娲氏炼石补天之时，于大荒山无稽崖炼成高经十二丈、方经二十四丈顽石三万六千五百零一块。娲皇氏只用了三万六千五百块，只单单剩了一块未用，便弃在此山青埂峰下。谁知此石自经煅炼之后，灵性已通，因见众石俱得补天，独自己无材不堪入选，遂自怨自叹，日夜悲号惭愧。</p>
<p> 一日，正当嗟悼之际，俄见一僧一道远远而来，生得骨格不凡，丰神迥别，说说笑笑，来至峰下，坐于石边，高谈快论：先是说些云山雾海、神仙玄幻之事，后便说到红尘中荣华富贵。此石听了，不觉打动凡心，也想要到人间去享一享这荣华富贵，但自恨粗蠢，不得已，便口吐人言，向那僧道说道：“大师，弟子蠢物，不能见礼了！适闻二位谈那人世间荣耀繁华，心切慕之。弟子质虽粗蠢，性却稍通，况见二师仙形道体，定非凡品，必有补天济世之材，利物济人之德。如蒙发一点慈心，携带弟子得入红尘，在那富贵场中，温柔乡里受享几年，自当永佩洪恩，万劫不忘也！”二仙师听毕，齐憨笑道：“善哉，善哉！那红尘中却有些乐事，但不能永远依恃；况又有‘美中不足，好事多磨’八个字紧相连属，瞬息间则又乐极悲生，人非物换，究竟是到头一梦，万境归空，倒不如不去的好。”这石凡心已炽，那里听得进这话去，乃复苦求再四。二仙知不可强制，乃叹道：“此亦静极思动，无中生有之数也！既如此，我们便携你去受享受享，只是到不得意时，切莫后悔！”石道：“自然，自然。”那僧又道：“若说你性灵，却又如此质蠢，并更无奇贵之处。如此也只好踮脚而已。也罢！我如今大施佛法，助你助，待劫终之日，复还本质，以了此案。你道好否？”石头听了，感谢不尽。那僧便念咒书符，大展幻术，将一块大石登时变成一块鲜明莹洁的美玉，且又缩成扇坠大小的可佩可拿。那僧托于掌上，笑道：“形体倒也是个宝物了！还只没有实在的好处，须得再镌上数字，使人一见便知是奇物方妙。然后好携你到那昌明隆盛之邦、诗礼簪缨之族、花柳繁华地、温柔富贵乡去安身乐业。”石头听了，喜不能禁，乃问：“不知赐了弟子那哪几件奇处？又不知携了弟子到何地方？望乞明示，使弟子不惑。”那僧笑道：“你且莫问，日后自然明白的。”说着，便袖了这石，同那道人飘然而去，竟不知投奔何方何舍。 </p>
<p> 后来，不知过了几世几劫，因有个空空道人访道求仙，从这大荒山无稽崖青埂峰下经过，忽见一大块石上字迹分明，编述历历。空空道人乃从头一看，原来就是无材补天，幻形入世，蒙茫茫大士、渺渺真人携入红尘，历尽离合悲欢、炎凉世态的一段故事。后面又有一首偈云： </p>
</div>
2.在章节处设置锚点，并在相应位置添加锚点name，添加锚点链接的写法，<a href="#锚点名">
<p align="center" class="title">
<a href="#top1">第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a>
<a href="#top2">第二回 贾夫人仙逝扬州城 冷子兴演说荣国府</a>
<a href="#top3">第三回 金陵城起复贾雨村 荣国府收养林黛玉</a>
<a href="#top4">第四回 薄命女偏逢薄命郎 葫芦僧乱判葫芦案</a>
</p>
<!-- 第一个锚点 -->
<a name="top1"></a>
<p>
<strong>
<a href="">第一回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</a>
</strong>
</p>
<!-- 第二个锚点 -->
<a name="top2"></a>
<p>
<strong>
<a href="">第二回 贾夫人仙逝扬州城 冷子兴演说荣国府</a>
</strong>
</p>
<!-- 第三个锚点 -->
<a name="top3"></a>
<p>
<strong>
<a href="">第三回 金陵城起复贾雨村 荣国府收养林黛玉</a>
</strong>
</p>
<!-- 第四个锚点 -->
<a name="top4"></a>
<p>
<strong>
<a href="">第四回 薄命女偏逢薄命郎 葫芦僧乱判葫芦案</a>
</strong>
</p>
3.添加样式如下
*{
margin: 0;
padding: 0;
}
body{
background-image: url('/img/sback.jpg');
background-repeat: repeat;
font-size: 14px;
font-family: '微软雅黑';
}
.box{
width: 980px;
margin: 0 auto;
background-color: #fff;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.box p{
font-size: 16px;
line-height: 23px;
}
a{
color: lightcoral;
text-decoration: none;
}
a:hover{
color: aqua;
}
.title{
margin-bottom: 30px;
}
当我们点击章节名字时跳转到盒子里章节内容
html超链接的锚点链接的使用相关推荐
- 前端(一)——HTML之基本标签、图片标签、超链接、锚链接
文章目录 1. 定义 2. 发展史及优势 2.1 发展史 2.2 优势 3. W3C标准 4. HTML的基本结构 5. 网站的基本标签 5.1 标题标签 5.2 段落标签 5.3 水平线标签 5.4 ...
- 超链接标签 a （锚点链接）
超链接标签 < a > 在HTML标签中,< a >标签用于定义超链接,作用:从一个页面链接到另一个页面. 链接的语法格式 <a href="https://w ...
- 超链接标签（外部链接、内部链接、空链接、下载链接、网页元素链接、锚点链接）、注释
超链接标签 在HTML中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面 1.链接的语法格式 <a href="跳转目标" target=" ...
- 超链接——内部链接、外部链接、锚点链接、下载链接、空链接、其他元素链接
一.内部链接 first.html 和second.html在同一文件内,想在first.html中通过超链接跳转到second.html中,可以通过内部链接实现. <a href=" ...
- 什么是HTML超链接？锚链接？
什么是HTML超链接?锚链接? HTML超链接 1.超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分. 当把鼠标指针移动到网页中的某 ...
- HTML中超链接：内部链接、外部链接、空链接、锚点链接的区分
①.内部链接:在自己的网站中,网页之间相互跳转. <a href="a.html" target="_blank">跳转到a.html</a& ...
- 超链接 —— 锚点链接
锚点链接: 点我们点击链接, 可以快速定位到页面中的某个位置 在链接文本的 href 属性中, 设置属性值为 #名字 的形式, 如 <a href="two"> 第2集 ...
- html 锚文本,什么是锚文本，锚文本链接对SEO的影响！
SEO是一个细节决定成败的工作,如果你想要试图改善排名,每一名SEO人员在做优化的时候,都绕不开锚文本这个话题,如果你选择正确的锚文本,它会使你事半功倍,反之则是事倍功半. 那么,什么是锚文本,锚文本 ...
- html命名锚记链接失败,命名锚记（设置命名锚记超级链接）
在Dreamweaver中命名锚记的英文是anchor,中文意思为"锚",意指其功能像船的锚一样,能迅速下沉并且定位.(1)将光标移至需要插入锚记的段落标题前,选择"插. ...
最新文章
- zxing 源码笔记
- apt-get需要安装mysql_ubuntu apt-get安装mysql失败-问答-阿里云开发者社区-阿里云
- 临床研究和医疗保健行业实现数据湖架构的机会和挑战
- android 中组件继承关系图，一目了然
- 打印dataframe的前十行_小学生之十行Python解高思五星题(一)
- spark集群测试小案例
- 百练OJ：3865和2677：肿瘤检测
- SQLite基本语法
- Tomcat启动阻塞变慢
- 创建对象并且使用对象的属性和方法
- GlusterFS-Kubernetes云原生存储
- java bigram_Java BiGramDictionary.getBiFrequency方法代碼示例
- redis系列二： linux下安装redis
- 排队论----学习反馈
- 【聚合支付】 如何区分界定聚合支付中的“一清”和“二清”？
- DOSBOX+MASM汇编环境的的安装与使用
- Mysql数据表存在一对多数据合并
- 凸包之Jarvis步进法
- redis数据结构及其应用场景
- vue使用高德地图搜索地址添加标记marker,定位，拖拽选址功能