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

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

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


评论 28
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值