HTML/CSS自制导航页面做浏览器主页
介绍利用简单的HTML/CSS来编写导航页面，并设置为浏览器本家儿页。
将本身需要用到的常用毗连做当作导航页面，美不雅便利。比拟浏览器自带的导航页心猿意马制，便宜导航页面有更多的自由度。
东西/原料
- VS Code（或其他文本编纂东西）
- 浏览器
方式/步调
- 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
最后，打开浏览器设置页面，设置启动本家儿页为文件位置，如图所示。
注重事项
- 本经验介绍了最根基的标签，标签，CSS的用法入门，可以完当作最根基导航页面的建造。可是CSS/HTML中仍有良多良多手艺可以去进修。
- 用当地文件建造导航页面，和一些小我本家儿页的建造，道理是一样的。
- 发表于 2018-04-01 00:00
- 阅读 ( 1525 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章