1、第一步，我们在一个位置固定的文件夹下（不常移动）新建文本文件，修改后缀为.html，然后右键->打开方式，找一个文本编辑器打开。
2、在文本编辑器中，编写基本的<html><head><水瑞侮瑜body>这些番舸榆毛标签。然后，在<head>下面添加一行如图所示内容：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">这一行指定了编码，否则在一些浏览器中会出现中文乱码的情况。
3、接下来在Body中，添加一些<a>标签。格式为：<a href=网页链接>显示名称</a>添加好保存，然后用浏览器打开此html文件，可以看到简单的导航页以形成。
4、接下来，在head或者其它方便位置添加CSS殿秩痊肭层叠样式表。如图，添加了一个类名为tag的样式，类名为math的样式，类名为cs的样式。然后给body中的每个a标签添加class属性如图，使得三个样式应用给它们。效果如图，不够美观只是用于演示样式。
5、接下来继续添加一个类名为group的样式。然后在body里面，使用div标签对那些表示链接的a标签分组。对每个分组添加class属性group，使用类名为group样式；并且各自指定style属性覆盖掉group样式中的背景色。
6、然后，在CSS样式中继续添加margin外边距，padding内边距，border-width边框宽，border-radius边框圆角半径等。最后保存，浏览器刷新效果如图。
7、最后，打开浏览器设置页面，设置启动主页为文件位置，如图所示。
