[HTML/CSS应用]博客文档排版之创建一个结构清晰的索引
上一篇文章我们介绍了在源码编辑模式下，怎样向文章中插入一个比较个性化的表格；这篇文章，我们再来说说怎样在源码编辑模式下，给你的文章创建一个结构清晰的索引。
一个结构清晰的索引，可以使你的文章显得更友好，更容易阅读。下面我们还是结合实际示例进行解说，首先，我们来看一下示例的实际显示效果。
本文所使用的示例实际显示效果如下：(示例所使用内容为笔者之前的一篇原创博文：CentOS 网络配置详解)
CentOS 网络配置详解
一. 网络接口配置实例
修改 /etc/sysconfig/network-scripts/ifcfg-ethx 文件
1. 动态获取IP
DEVICE=eth0
BOOTPROTO=dhcp
ONBOOT=yes
2. 配置静态IP
DEVICE=eth0
BOOTPROTO=none
ONBOOT=yes
NETMASK=255.255.255.0
IPADDR=192.168.56.111
USERCTL=no
配置好后，重启网络服务即可生效
service network restart
二. /etc/sysconfig/network-scripts/ifcfg-interface-name 文件中各项说明
DEVICE=eth0 # 设备名
BROADCAST=192.168.0.255 # 广播地址
HWADDR= 08:00:20:00:23:04 # MAC 地址
IPADDR=192.168.0.101 # IP地址
NETMASK=255.255.255.0 # 子网掩码
ONBOOT=yes # 系统启动时激活该网络接口
TYPE=Ethernet # 网络接口类型
USERCTL=no # 非 root 用户不被允许控制该设备
NM_CONTROLLED=yes # 允许NetworkManager 配置该设备
三. 修改 DNS 服务器地址
vim /etc/resolv.conf
nameserver 211.101.120.60
nameserver 211.101.120.191
四. 修改主机名
vim /etc/sysconfig/network
HOSTNAME=LinuxOS
注意要和 /etc/hosts 中的主机名对应
解说：
从示例中可以看到，我们创建了两级索引。那么要怎样来创建呢？
首先，我们要在链接指向的位置创建一个书签，语法为：
<a name="label">xxx</a>
例如，我们标题一的写法为：
<h4><a name="t1">一、网络接口配置实例</a></h4>
然后，我们创建指向该书签的索引链接，语法为：
<a href="url">xxx</a>
例如，指向标题一的索引写法为：
<a href="#t1">一、网络接口配置实例</a>
上述示例完整代码如下：
<h2 style="text-align:center;">CentOS 网络配置详解</h2>
<div style="margin:50px 20px;line-height:1.5;">
<ul>
<li><a style="text-decoration:none;" href="#t1" target="_self">一. 网络接口配置实例</a>
<ul>
<li><a style="text-decoration:none;" href="#t11" target="_self">1. 动态获取IP</a></li>
<li><a style="text-decoration:none;" href="#t12" target="_self">2. 配置静态IP</a></li>
</ul>
</li>
<li><a style="text-decoration:none;" href="#t2" target="_self">二. /etc/sysconfig/network-scripts/ifcfg-interface-name 文件中各项说明</a></li>
<li><a style="text-decoration:none;" href="#t3" target="_self">三. 修改 DNS 服务器地址</a></li>
<li><a style="text-decoration:none;" href="#t4" target="_self">四. 修改主机名</a></li>
</ul>
</div>
<h4><a name="t1">一. 网络接口配置实例</a></h4>
<p>... ...</p>
<h6><a name="t11">1. 动态获取IP</a></h6>
<p>... ...</p>
<h6><a name="t12">2. 配置静态IP</a></h6>
<p>... ...</p>
<h4><a name="t2">二. /etc/sysconfig/network-scripts/ifcfg-interface-name 文件中各项说明</a></h4>
<p>... ...</p>
<h4><a name="t3">三. 修改 DNS 服务器地址</a></h4>
<p>... ...</p>
<h4><a name="t4">四. 修改主机名</a></h4>
<p>... ...</p>
注解：
<p>... ...</p> 代表省略的段落文本 text-decoration:none 去掉链接的下划线
需要特别说明的是：如果你是在CSDN博客中创建索引，那么只需要确保你要创建索引的内容是使用<h1> - <h6> 标签进行定义的，CSDN会自动为你生成索引。大家可以看到，本文的顶部有一个“目录”项，那个就是自动生成的。并且，即便你手动创建了，CSDN会强制将你的 target="_self" 改成 target="_bank"，将导致你的链接在新的窗口中被打开！本文所讲述的方案，适用于不自动创建索引的情况。
-- End --
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
