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

2025-10-18 15:43:39

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

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

2、在文本编辑器中,编写基本的<html><head><body>这些标签。

然后,在<head>下面添加一行如图所示内容:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

这一行指定了编码,否则在一些浏览器中会出现中文乱码的情况。

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

3、接下来在Body中,添加一些<a>标签。

格式为:<a href=网页链接>显示名称</a>

添加好保存,然后用浏览器打开此html文件,可以看到简单的导航页以形成。

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

4、接下来,在head或者其它方便位置添加CSS层叠样式表。

如图,添加了一个类名为tag的样式,类名为math的样式,类名为cs的样式。

然后给body中的每个a标签添加class属性如图,使得三个样式应用给它们。

效果如图,不够美观只是用于演示样式。

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

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

5、接下来继续添加一个类名为group的样式。

然后在body里面,使用div标签对那些表示链接的a标签分组。

对每个分组添加class属性group,使用类名为group样式;并且各自指定style属性覆盖掉group样式中的背景色。

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

6、然后,在CSS样式中继续添加margin外边距,padding内边距,border-width边框宽,border-radius边框圆角半径等。

最后保存,浏览器刷新效果如图。

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

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

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

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢