跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多

OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP,带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕安装APP
  3. 轻敲安装进行确认。
  • 选择语言

CSS Navigation Bars

推荐的帖子

  • 行政经理

CSS Navigation Bars


A vertical navbar:

  • Home
  • News
  • Contact
  • About

A horizontal navbar:

  • Home
  • News
  • Contact
  • About

CSS Navigation Bars

Having an easy-to-use navigation is important for any website!

CSS navigation bars are an important component of web design. Navigation bars helps users to easily navigate between different sections of a website.

Navigation bars are typically built with HTML list elements ( <ul> and <li>), and then styled with CSS to get a great look.

Navigation bars are typically located at the top or at the side of a webpage.


Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.

A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:

Example

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>
Try it Yourself »

Now let's remove the bullets and the margins and padding from the <ul> element:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
Try it Yourself »

Example explained:

  • Set list-style-type: none; - Removes the bullet points from list
  • Set margin: 0; - Resets default browser margins
  • Set padding: 0; - Resets default browser paddings

Note: The HTML and CSS code in the example above is the base code used for both vertical and horizontal navigation bars, which you will learn more about in the next chapters.



参与讨论

你可立刻发布并稍后注册。 如果你有帐户,立刻登录发布帖子。

游客
回帖…

帐户

导航

搜索

搜索

配置浏览器推送通知

Chrome (安卓)
  1. 轻敲地址栏旁的锁形图标。
  2. 轻敲权限 → 通知。
  3. 调整你的偏好。
Chrome (台式电脑)
  1. 点击地址栏中的挂锁图标。
  2. 选择网站设置。
  3. 找到通知选项并调整你的偏好。