观看记录
  • 我的观影记录
登录
测试首页HTML/CSS自制导航页面做浏览器主页

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

介绍利用简单的HTML/CSS来编写导航页面,并设置为浏览器本家儿页。

将本身需要用到的常用毗连做当作导航页面,美不雅便利。比拟浏览器自带的导航页定制,便宜导航页面有更多的自由度。

工具/原料

  • VS Code(或其他文本编纂东西)
  • 浏览器

方式/步骤

  1. 1

    第一步,我们在一个位置固定的文件夹下(不常移动)新建文本文件,点窜后缀为.html,然后右键->打开体例,找一个文本编纂器打开。

  2. 2

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

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

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

    这一行指定了编码,不然在一些浏览器中会呈现中文乱码的环境。

  3. 3

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

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

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

  4. 4

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

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

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

    结果如图,不敷美不雅只是用于演示样式。

  5. 5

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

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

    对每个分组添加class属性group,利用类名为group样式;而且各自指定style属性笼盖失落group样式中的布景色。

  6. 6

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

    最后保留,浏览器刷新结果如图。

  7. 7

    最后,打开浏览器设置页面,设置启动本家儿页为文件位置,如图所示。

注重事项

  • 本经验介绍了最根基的标签,标签,CSS的用法入门,可以完当作最根基导航页面的建造。可是CSS/HTML中仍有良多良多手艺可以去进修。
  • 用当地文件建造导航页面,和一些小我本家儿页的建造,道理是一样的。

“HTML/CSS自制导航页面做浏览器主页”关联的文章

  • 如何关闭皮皮搞笑精彩内容消息通知

    皮皮搞笑是一款手机搞笑社区App,让用户笑到没心没肺,又忍不住感动流泪的温暖家园,那么如何关闭皮皮搞笑精彩内容消息通知以满足不同用户的需求呢?

    1小时前0阅读

    如何关闭皮皮搞笑精彩内容消息通知
  • win7系统找不到宽带连接怎么办

    现如今很多用户都喜欢使用win7系统,而在使用win7系统的过程中做的最多的就是上网了。Win7系统上网离不开宽带连接,如果win7宽带连接找不到了,应该怎么办呢?下面就让小编为大家带来win7系统找不到宽带连接解决方法

    1小时前0阅读

    win7系统找不到宽带连接怎么办
  • 新版QQ音乐怎么关闭底部的直播导航

    新版QQ音乐怎么关闭底部的直播导航?下面请大家随小编一起来看看操作的方法吧。

    1小时前0阅读

    新版QQ音乐怎么关闭底部的直播导航
  • 怎样查询高速实时路况?

    要出行怎么查询高速实时路况?我们用地图就可以了,在地图上就可以看到实际的路况的,下面详细来看下。

    1小时前0阅读

  • 六芒星手势密码教程
  • 教师讲课过程评价标准

    教师是太阳底下最光辉的职业,但是成为教师之路也是要经历重重考验的,下面给大家说说教师讲课过程评价标准

    1小时前0阅读

  • 酚醛铝箔夹芯板

    酚醛铝箔夹芯板是由酚醛泡沫与两层亚光铝箔经过特殊工艺复合而成。外膜材料为经过高温固化的高分子膜,可有效的防止紫外线及气体腐蚀,并与铝箔结合牢固,又能与酚醛泡沫形成聚合物,从而保证象圆酚醛铝箔夹芯板的质量稳定。

    1小时前0阅读

  • Xperia XZ2 Premium配置如何

    Xperia XZ2 Premium是索尼在4月16日悄悄发布的新机,而且没进行预热,下面来简单了解一下配置。

    1小时前0阅读

  • PLSQL破解,无需注册码和破解工具

    PL/SQL Developer过期了,又没有注册码,又不想花钱买,而且事情又非常急,这时候怎么办?不要着急,请随小编一起解决这种情况吧。

    1小时前0阅读

  • Win11按capslock切换不了大小写怎么解决

    有朋友不知道在哪里设置,下面小编就给大家分享详细的设置方法,有需要帮助的朋友可以参考下这篇经验,希望能对大家有所帮助。

    2小时前0阅读

    Win11按capslock切换不了大小写怎么解决
切换深色外观
留言
视频编辑修改
回到顶部
首页
手机数码
医疗健康
金融管理
社交情感
无名