如何让目录更美观更实用(博客内链接)

目录是博客内容高度总结的显示方式,可以直观展现博客表达的脉络,起到提纲挈领的作用。如果你的博客内容较少目录的作用不是很大,但是如果你的博客长篇大论,一个好的目录可以清晰的展现你的思路和内容纲要,不至于让你的观众看着看着想点右上角的叉叉。如果百度百科没有这样的目录,你还有仔细看下去的勇气么?

其实做到百度百科这样的目录非常简单,稍微有点html基础就行,下面先来看一下一个简单的带链接的目录示例:

作者简介 博客简介 内容简介 博客总结

点击“作者简介”跳转到这里:廊坊师范学院信息技术提高班八期李达。

点击“博客简介”跳转到这里:通过修改html让目录更美观更实用。

点击“博客内容“跳转到这里:下面将仔细演示一下修改的过程。

原理:通过在html中添加内部链接,达到跳转的效果。

演示:

1、把光标放置在想要编辑的区域,通过右键---查看源代码进入html编辑区,以谷歌浏览器如图所示:


2、根据响应区域,右键--Edit as HTML,如图:


3、在需要跳转到到的地方添加<span id=".jumpto"></span>

<span id=".author" style="font-size:18px" class="Apple-style-span">点击“<span class="Apple-style-span" style="font-weight: bold;">作者简介</span>”跳转到这里:廊坊师范学院信息技术提高班八期李达。</span>
4、同理,在需要点击跳转的地方,添加代码<a href="#.jumpto"></a>,其中.jumpto可修改,一致即可。如图

<a href="#.author" _xhe_href="#.author"><span class="tocnumber"></span><span class="toctext">作者简介</span></a>

点击“博客总结”跳转到这里:偶尔也写一些内容较多的博客,回头看自己的博客,觉得如果没有一个主旨鲜明的目录的确看的难受,看其他人的博客也有同感。鉴于刚学完基础的html,觉得百度百科的目录不错,自己也试试,效果还是不错的。