如何让目录更美观更实用（博客内链接）

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

其实做到百度百科这样的目录非常简单，稍微有点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，觉得百度百科的目录不错，自己也试试，效果还是不错的。