[HTML/CSS应用]博客文档排字之创建一个结构清晰的索引

上一篇文章我们介绍了在源码编辑模式下，怎样向文章中插入一个比较个性化的表格；这篇文章，我们再来说说怎样在源码编辑模式下，给你的文章创建一个结构清晰的索引。

一个结构清晰的索引，可以使你的文章显得更友好，更容易阅读。下面我们还是结合实际示例进行解说，首先，我们来看一下示例的实际显示效果。

• 一. 网络接口配置实例
  • 1. 动态获取IP
  • 2. 配置静态IP
• 二. /etc/sysconfig/network-scripts/ifcfg-interface-name 文件中各项说明
• 三. 修改 DNS 服务器地址
• 四. 修改主机名

一. 网络接口配置实例

修改 /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  去掉链接的下划线