FrontPage巧制网站目录

件版本：
软件大小：
软件授权：
适用平台：
http://dl.pconline.com.cn/download/381807.html

如果制作一个目录网页，将某一网页上的链接内容都以目录的形式显示出来，通过该目录很容易找到需要的内容，这样既便于浏览者访问，也给我们维护站点提供了方便。在FrontPage XP中我们可以轻松打造网站的结构目录，效果非常好。

一、创建结构导航目录

在FrontPage中可以使用插入目录组件的方法来创建目录。创建时首先单击程序界面左侧的“导航”选项，切换到“导航”视图窗口中，随后在“导航”窗口中右键单击“首页”图标，在弹出的快捷菜单中选择“新建-网页”命令，随后新建一个网页，并将它命名为“目录”。

切换到“网页”视图下，打开“目录”网页，单击“插入”菜单中“Web组件”命令。打开“Web组件”对话框，在“组件类型”列表中选择“目录”，在“选择目录”项下选择“该Web站点”。单击“完成”按钮，弹出“目录属性”对话框。其中在“目录初始点的网页”文本框中输入要用作目录起点的网页名称，或者单击“浏览”查找需要的网页。在此用户可以指定某个文件夹中的一个网页，目录将会自动找到该网页上所有的超链接所链接的网页。如果要为整个网站创建目录，在此输入首页地址。在“选项”区中按照要求选择网页的显示方式。

单击“确定”按钮即可在当前网页生成一份指定的网页或站点的目录

提示：如果要在起始点所在的网页上创建目录，则目录标题将会是指向同一网页的超链接。例如，如果要在网页 Index.htm上创建目录，而起始点是 Index.htm(同一网页)，则目录的标题将会是指向 Index.htm 的超链接。如果希望不包括目录标题这样的循环超链接，在“标题字号”框中选择“无”。

二、创建类别目录

在FrontPage中，用户可以对站点中的网页进行归类，然后基于网页类别创建目录。使用类别的好处是管理方便，在第一次设置完成后，若有其他文件添加入该类别中，只要经过简单的设置，即可加入新的目录中。

创建时在“文件夹”视图下，按下键盘上的“CTRL”键，选中需要分为同一类别的文件，单击右键，在打开的右键菜单中选择“属性”命令，打开“属性”对话框

然后在“可用类别”列表中勾选该文件所在的属类别，单击右侧的“类别”按钮，打开“主类别列表”对话框，在“新建类别”文本框中输入新建类别的名称，单击“添加”按钮添加到类别中。单击“确定”按钮完成。

切换到“网页”视图打开一个网页，单击“插入”菜单中的“Web组件”命令，打开“插入Web组件”对话框。从“组件类型”列表框中选择“目录”选项，再从“选择目录”列表框中选择“基于网页类别”选项。

单击“完成”按钮，打开“类别属性”对话框，在此选择文件所在的类别。随后在“文件排序依据”框中选择一种文件排序的依据。如果希望按标题的字母顺序对列表进行排序，在此选择“文档标题”;如果希望按文件日期对列表进行排序，选择“上一次修改日期”;单击“确定”按钮，即可生产需要类别的网页目录，单击“用浏览器预览”可以测试目录。

注于Java领域优质技术，欢迎关注

作者：一像素

0、算法概述

0.1 算法分类

十种常见排序算法可以分为两大类：

比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此也称为非线性时间比较类排序。
非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性时间运行，因此也称为线性时间非比较类排序。

0.2 算法复杂度

0.3 相关概念

稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面。
不稳定：如果a原本在b的前面，而a=b，排序之后 a 可能会出现在 b 的后面。
时间复杂度：对排序数据的总的操作次数。反映当n变化时，操作次数呈现什么规律。
空间复杂度：是指算法在计算机

内执行时所需存储空间的度量，它也是数据规模n的函数。

1、冒泡排序（Bubble Sort）

冒泡排序是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。

1.1 算法描述

比较相邻的元素。如果第一个比第二个大，就交换它们两个；
对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这样在最后的元素应该会是最大的数；
针对所有的元素重复以上的步骤，除了最后一个；
重复步骤1~3，直到排序完成。

1.2 动图演示

1.3 代码实现

2、选择排序（Selection Sort）

选择排序(Selection-sort)是一种简单直观的排序算法。它的工作原理：首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。

2.1 算法描述

n个记录的直接选择排序可经过n-1趟直接选择排序得到有序结果。具体算法描述如下：

初始状态：无序区为R[1..n]，有序区为空；
第i趟排序(i=1,2,3…n-1)开始时，当前有序区和无序区分别为R[1..i-1]和R(i..n）。该趟排序从当前无序区中-选出关键字最小的记录 R[k]，将它与无序区的第1个记录R交换，使R[1..i]和R[i+1..n)分别变为记录个数增加1个的新有序区和记录个数减少1个的新无序区；
n-1趟结束，数组有序化了。

2.2 动图演示

2.3 代码实现

2.4 算法分析

表现最稳定的排序算法之一，因为无论什么数据进去都是O(n²)的时间复杂度，所以用到它的时候，数据规模越小越好。唯一的好处可能就是不占用额外的内存空间了吧。理论上讲，选择排序可能也是平时排序一般人想到的最多的排序方法了吧。

3、插入排序（Insertion Sort）

插入排序（Insertion-Sort）的算法描述是一种简单直观的排序算法。它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。

3.1 算法描述

一般来说，插入排序都采用in-place在数组上实现。具体算法描述如下：

从第一个元素开始，该元素可以认为已经被排序；
取出下一个元素，在已经排序的元素序列中从后向前扫描；
如果该元素（已排序）大于新元素，将该元素移到下一位置；
重复步骤3，直到找到已排序的元素小于或者等于新元素的位置；
将新元素插入到该位置后；
重复步骤2~5。

3.2 动图演示

3.2 代码实现

3.4 算法分析

插入排序在实现上，通常采用in-place排序（即只需用到O(1)的额外空间的排序），因而在从后向前扫描过程中，需要反复把已排序元素逐步向后挪位，为最新元素提供插入空间。

4、希尔排序（Shell Sort）

1959年Shell发明，第一个突破O(n²)的排序算法，是简单插入排序的改进版。它与插入排序的不同之处在于，它会优先比较距离较远的元素。希尔排序又叫缩小增量排序。

4.1 算法描述

先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，具体算法描述：

选择一个增量序列t1，t2，…，tk，其中ti>tj，tk=1；
按增量序列个数k，对序列进行k 趟排序；
每趟排序，根据对应的增量ti，将待排序列分割成若干长度为m 的子序列，分别对各子表进行直接插入排序。仅增量因子为1 时，整个序列作为一个表来处理，表长度即为整个序列的长度。

4.2 动图演示

4.3 代码实现

4.4 算法分析

希尔排序的核心在于间隔序列的设定。既可以提前设定好间隔序列，也可以动态的定义间隔序列。动态定义间隔序列的算法是《算法（第4版）》的合著者Robert Sedgewick提出的。

5、归并排序（Merge Sort）

归并排序是建立在归并操作上的一种有效的排序算法。该算法是采用分治法（Divide and Conquer）的一个非常典型的应用。将已有序的子序列合并，得到完全有序的序列；即先使每个子序列有序，再使子序列段间有序。若将两个有序表合并成一个有序表，称为2-路归并。

5.1 算法描述

把长度为n的输入序列分成两个长度为n/2的子序列；
对这两个子序列分别采用归并排序；
将两个排序好的子序列合并成一个最终的排序序列。

5.2 动图演示

5.3 代码实现

5.4 算法分析

归并排序是一种稳定的排序方法。和选择排序一样，归并排序的性能不受输入数据的影响，但表现比选择排序好的多，因为始终都是O(nlogn）的时间复杂度。代价是需要额外的内存空间。

6、快速排序（Quick Sort）

快速排序的基本思想：通过一趟排序将待排记录分隔成独立的两部分，其中一部分记录的关键字均比另一部分的关键字小，则可分别对这两部分记录继续进行排序，以达到整个序列有序。

6.1 算法描述

快速排序使用分治法来把一个串（list）分为两个子串（sub-lists）。具体算法描述如下：

从数列中挑出一个元素，称为 “基准”（pivot）；
重新排序数列，所有元素比基准值小的摆放在基准前面，所有元素比基准值大的摆在基准的后面（相同的数可以到任一边）。在这个分区退出之后，该基准就处于数列的中间位置。这个称为分区（partition）操作；
递归地（recursive）把小于基准值元素的子数列和大于基准值元素的子数列排序。

6.2 动图演示

6.3 代码实现

7、堆排序（Heap Sort）

堆排序（Heapsort）是指利用堆这种数据结构所设计的一种排序算法。堆积是一个近似完全二叉树的结构，并同时满足堆积的性质：即子结点的键值或索引总是小于（或者大于）它的父节点。

7.1 算法描述

将初始待排序关键字序列(R1,R2….Rn)构建成大顶堆，此堆为初始的无序区；
将堆顶元素R[1]与最后一个元素R[n]交换，此时得到新的无序区(R1,R2,……Rn-1)和新的有序区(Rn),且满足R[1,2…n-1]<=R[n]；
由于交换后新的堆顶R[1]可能违反堆的性质，因此需要对当前无序区(R1,R2,……Rn-1)调整为新堆，然后再次将R[1]与无序区最后一个元素交换，得到新的无序区(R1,R2….Rn-2)和新的有序区(Rn-1,Rn)。不断重复此过程直到有序区的元素个数为n-1，则整个排序过程完成。

7.2 动图演示

7.3 代码实现

8、计数排序（Counting Sort）

计数排序不是基于比较的排序算法，其核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。作为一种线性时间复杂度的排序，计数排序要求输入的数据必须是有确定范围的整数。

8.1 算法描述

找出待排序的数组中最大和最小的元素；
统计数组中每个值为i的元素出现的次数，存入数组C的第i项；
对所有的计数累加（从C中的第一个元素开始，每一项和前一项相加）；
反向填充目标数组：将每个元素i放在新数组的第C(i)项，每放一个元素就将C(i)减去1。

8.2 动图演示

8.3 代码实现

8.4 算法分析

计数排序是一个稳定的排序算法。当输入的元素是 n 个 0到 k 之间的整数时，时间复杂度是O(n+k)，空间复杂度也是O(n+k)，其排序速度快于任何比较排序算法。当k不是很大并且序列比较集中时，计数排序是一个很有效的排序算法。

9、桶排序（Bucket Sort）

桶排序是计数排序的升级版。它利用了函数的映射关系，高效与否的关键就在于这个映射函数的确定。桶排序 (Bucket sort)的工作的原理：假设输入数据服从均匀分布，将数据分到有限数量的桶里，每个桶再分别排序（有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排）。

9.1 算法描述

设置一个定量的数组当作空桶；
遍历输入数据，并且把数据一个一个放到对应的桶里去；
对每个不是空的桶进行排序；
从不是空的桶里把排好序的数据拼接起来。

9.2 图片演示

9.3 代码实现

9.4 算法分析

桶排序最好情况下使用线性时间O(n)，桶排序的时间复杂度，取决与对各个桶之间数据进行排序的时间复杂度，因为其它部分的时间复杂度都为O(n)。很显然，桶划分的越小，各个桶之间的数据越少，排序所用的时间也会越少。但相应的空间消耗就会增大。

10、基数排序（Radix Sort）

基数排序是按照低位先排序，然后收集；再按照高位排序，然后再收集；依次类推，直到最高位。有时候有些属性是有优先级顺序的，先按低优先级排序，再按高优先级排序。最后的次序就是高优先级高的在前，高优先级相同的低优先级高的在前。

10.1 算法描述

取得数组中的最大数，并取得位数；
arr为原始数组，从最低位开始取每个位组成radix数组；
对radix进行计数排序（利用计数排序适用于小范围数的特点）；

10.2 动图演示

10.3 代码实现

10.4 算法分析

基数排序基于分别排序，分别收集，所以是稳定的。但基数排序的性能比桶排序要略差，每一次关键字的桶分配都需要O(n)的时间复杂度，而且分配之后得到新的关键字序列又需要O(n)的时间复杂度。假如待排数据可以分为d个关键字，则基数排序的时间复杂度将是O(d*2n) ，当然d要远远小于n，因此基本上还是线性级别的。

基数排序的空间复杂度为O(n+k)，其中k为桶的数量。一般来说n>>k，因此额外空间需要大概n个左右。

来自：https://www.cnblogs.com/onepixel/articles/7674659.html

生 CSS 嵌套（Native CSS nesting）已经被所有现代桌面浏览器所支持！，但是请注意，移动端浏览器支持的还很有限。

1.原生 CSS 嵌套

原生 CSS 嵌套可以像 SASS、LESS 预处理器一样，将相关的选择器组合在一起，从而减少需要编写的规则数量，它可以节省打字时间，并使语法更易于阅读和维护。您可以将选择器嵌套到任意深度，但要小心不要超过两层或三层。嵌套深度没有技术限制，但它会使代码更难以阅读，并且生成的 CSS 可能会变得不必要的冗长。

.button {
   background-color: red;

   &.warning {
     background-color: blue;
   }

   & .icon {
      width: 1rem;
      height: 1rem;
   }
}

虽然原生 CSS 嵌套语法在过去几年中不断发展，使大多数 Web 开发人员感到满意，但不要指望所有 SCSS 代码都能像您期望的那样直接工作。

2.原生 CSS 嵌套规则

您可以将任何选择器嵌套在另一个选择器中，但它必须以符号开头，例如 &, .（类选择器）、#（ID选择器）、@（对于媒体查询）、:、::、+、 ~、 > 或 [。换句话说，它不能是对 HTML 元素的直接引用。下面的代码是无效的，不会对 input 元素选择器进行解析：

.parent {
  color: red;

  input {
    margin: 1em;
  }
}
/* Invalid, because "input" is an identifier. */

解决此问题的最简单方法是使用与号 ( &)，它以与 Sass 相同的方式引用当前选择器。

2.1.& 符号的使用

.parent {
  color: red;

  & input {
    margin: 1em;
  }

  /* use pseudo-elements and pseudo-classes */
  &::after {}

  &:hover {}

  &:target {}
}
/* valid, no longer starts with an identifier */

或者，您可以使用其中之一：

> input：只对子元素生效
:is(input)：将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素
:where(input)：优先级总是为 0

它们都可以在这个简单的示例中工作，但是稍后您可能会遇到更复杂的样式表的特异性问题。

它还&允许您在父选择器上定位伪元素和伪类。例如：

p.my-element {

  &::after {}

  &:hover {}

  &:target {}
}

请注意，& 可以在选择器中的任何位置使用。例如：

.child1 {
  .parent3 & {
    color: red;
  }
}

这将转换为以下非嵌套语法：

.parent3 .child1 { color: red; }

您甚至可以在选择器中使用多个 & 符号：

ul {
  & li & {
    color: blue;
  }
}

这将以嵌套 <ul> 元素 ( ul li ul) 为目标，但如果您想保持理智，我建议不要使用它！

2.2.@ 符号的使用

嵌套媒体查询示例：

p {
  color: cyan;
  @media (min-width: 800px) {
    color: purple;
  }
}

3.原生 CSS 嵌套陷阱

3.1.场景一：父选择器包装在 :is() 中

原生 CSS 嵌套将父选择器包装在 :is() 中，这可能会导致与 Sass 输出的差异，比如以下嵌套代码：

.parent1, #parent2 {
  .child1 {

  }
}

当它在浏览器中解析时，它实际上变成以下内容：

:is(.parent1, #parent2) .child1 {

}

Sass 将相同的代码编译为：

.parent1 .child1,
#parent2 .child1 {

}

3.2.场景二：& 符号后置

您可能还会遇到一个更微妙的问题。考虑一下：

.parent .child {
  .grandparent & {}
}

原生 CSS 等效项是：

.grandparent :is(.parent .child) {}

这与以下错误排序的 HTML 元素匹配：

<div class="parent">
  <div class="grandparent">
    <div class="child">MATCH</div>
  </div>
</div>

MATCH变得有样式是因为 CSS 解析器执行以下操作：

它会查找所有元素，其所属类的child祖先也parent为DOM 层次结构中的任何点。

找到包含MATCH的元素后，解析器会grandparent在 DOM 层次结构中的任何位置再次检查它是否具有 — 的祖先。它找到一个并相应地设置该元素的样式。

Sass 中的情况并非如此，它编译为：

.grandparent .parent .child {} 上面的 HTML 没有样式化，因为元素类不遵循严格的grandparent、parent、和child顺序。

3.3.场景三：字符串替换

Sass 使用字符串替换，因此如下所示的声明是有效的，并且与类的任何元素相匹配 .btn-primary：

.btn {
  &-primary {
    color: blue;
  }
}

但是原生 CSS 嵌套会忽略&-space选择器。

4.CSS 预处理器还需要吗？

从短期来看，现有的 CSS 预处理器仍然至关重要。Sass 开发团队宣布，他们将支持 .css 文件中的原生 CSS 嵌套，并按原样输出代码。他们将一如既往地编译嵌套 SCSS 代码，以避免破坏现有代码库，但当全球浏览器支持率达到 98% 时，他们将开始输出 :is() 选择器。

我猜想，PostCSS 插件等预处理器目前会扩展嵌套代码，但随着浏览器支持的普及，就会取消这一功能。当然，使用预处理器还有其他很好的理由，比如将部分代码捆绑到一个文件中，以及对代码进行精简。但如果嵌套是你唯一需要的功能，你当然可以考虑在较小的项目中使用原生 CSS。

总结

CSS 嵌套是最有用、最实用的预处理器功能之一。浏览器供应商努力创造了一个与 CSS 非常相似的原生 CSS 版本，以满足网络开发人员的需求。虽然两者之间存在细微差别，而且在使用（过于）复杂的选择器时可能会遇到不寻常的特殊性问题，但很少有代码库需要进行彻底修改。

原生嵌套可能会让你重新考虑是否需要 CSS 预处理器，但它们仍能提供其他好处。Sass 和类似工具仍然是大多数开发者工具包的重要组成部分。

在线咨询

上一篇：PHP 内存泄漏分析定位
下一篇：10-7-“老猫软件”淘宝光合逛逛怎么批量发布上传去

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商