HTML/CSS自制导航页面做浏览器主页

VS Code（或其他文本编辑工具）

浏览器

第一步，我们在一个位置固定的文件夹下（不常移动）新建文本文件，修改后缀为.html，然后右键->打开方式，找一个文本编辑器打开。

在文本编辑器中，编写基本的这些标签。然后，在下面添加一行如图所示内容：这一行指定了编码，否则在一些浏览器中会出现中文乱码的情况。

接下来在Body中，添加一些标签。格式为：显示名称添加好保存，然后用浏览器打开此html文件，可以看到简单的导航页以形成。

接下来，在head或者其它方便位置添加CSS层叠样式表。如图，添加了一个类名为tag的样式，类名为math的样式，类名为cs的样式。然后给body中的每个a标签添加class属性如图，使得三个样式应用给它们。效果如图，不够美观只是用于演示样式。

接下来继续添加一个类名为group的样式。然后在body里面，使用div标签对那些表示链接的a标签分组。对每个分组添加class属性group，使用类名为group样式；并且各自指定style属性覆盖掉group样式中的背景色。

然后，在CSS样式中继续添加margin外边距，padding内边距，border-width边框宽，border-radius边框圆角半径等。最后保存，浏览器刷新效果如图。

最后，打开浏览器设置页面，设置启动主页为文件位置，如图所示。

本经验介绍了最基本的标签，标签，CSS的用法入门，可以完成最基本导航页面的制作。但是CSS/HTML中仍有很多很多技术可以去学习。

用本地文件制作导航页面，和一些个人主页的制作，原理是一样的。