Categories

有特色的模板

HTML/CSS. 如何创建垂直和水平菜单

Chris Diaz March 13, 2020
Rating: 3.6/5. From 35 votes.
Please wait...

本教程将向您展示如何在中创建垂直和水平菜单 HTML using CSS styles. 在您继续之前,请确保您熟悉无序列表 HTML tags. 也请查看教程 如何在HTML中创建菜单.

首先,创建一个 HTML 使用无序列表的菜单:


然后,您需要创建新的CSS文件并将其附加到 HTML page:

  

Make sure you put the CSS attachement code into the tag of your html page.

你也可以使用内联样式.

	 

因此,您将拥有以下内容 HTMl code:





	

















































无序列表有它自己的样式,所以不需要任何额外的更改,你就有一个垂直菜单.

至于水平菜单,您需要在 HTML and CSS.

首先将新类添加到列表中,替换

    with

      现在在CSS文件中,让我们使菜单水平. 无序列表具有默认分配的边距和填充值. 我们需要清除它们:

      ul.horizontal{
      margin:0;
      padding:0;
      }
      

      然后让你的列表项目水平显示:

      ul.horizontal li{
      display:block;
      float:left;
      padding:0 10px;
      }
      

      我们将水平填充值添加到列表项中,使它们不会相互粘在一起. 现在你的菜单准备好了,分配链接,添加一些花哨的颜色和 background 你的都准备好了.


      Zemez响应式导航条JavaScript

      Zemez响应式导航条JavaScript.

      Demo | Download

      普通用户既没有时间也没有耐心浏览你的网页 website 寻找所需的信息. 很难使用 navigation 让用户感到尴尬,随时可能离开网站. 选择Zemez响应式导航条 JavaScript 为了避免这些错误,并提高您的web资源的功能.

      This Navbar JavaScript 对于那些想要为网络资源添加更多功能的人来说,这是一个美丽的解决方案吗. 该包有8个独特的布局, 多级下拉菜单和巨型菜单, 有浅色和深色两种配色. 此外,它是交叉的browser 兼容,因为它支持Edge 15+, Firefox 54+, Chrome 51+, Safari 10+. 单击演示链接查看此操作的演示 script work.

      More features:

      • SASS
      • Sticky navbar
      • 固定和全宽布局
      • Flexbox based
      • 24小时支持
这个条目被张贴了出来 使用CSS and tagged css, HTML, list, menu. Bookmark the permalink.

Submit a ticket

如果您仍然无法找到关于您的问题的足够的教程,请使用以下链接向我们的技术支持团队提交请求. 我们将在接下来的24小时内为您提供我们的帮助和协助: Submit a ticket