CSS 导航栏 您所在的位置:网站首页 网页导航样式设置 CSS 导航栏

CSS 导航栏

2024-07-16 15:08| 来源: 网络整理| 查看: 265

❮ 上一节 下一节 ❯ CSS 导航栏 Demo:导航栏

垂直导航栏

Home News Contact About

水平导航栏

Home News Contact About Home News Contact About 导航栏

易用的导航对于任何网站都很重要。

通过使用 CSS,您可以将无聊的 HTML 菜单转换为美观的导航栏。

导航栏 = 链接列表

导航栏需要标准 HTML 作为基础。

在我们的实例中,将用标准的 HTML 列表构建导航栏。

导航栏基本上就是链接列表,因此使用 和 元素会很有意义:

实例   Home   News   Contact   About 亲自试一试 »

现在,从列表中删除项目符号以及外边距和内边距(填充):

实例 ul {   list-style-type: none;   margin: 0;   padding: 0; } 亲自试一试 »

实例说明:

list-style-type: none; - 删除项目符号。导航条不需要列表项标记。 设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。

上例中的代码是垂直和水平导航栏中使用的标准代码,您将在下一章中学习更多内容。

❮ 上一节 下一节 ❯


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有