本文共 1680 字,大约阅读时间需要 5 分钟。
如何构建顶部导航条
Navigation bars are a very important element to any website. They provide the main method of navigation by providing a main list of links to a user. There are many methods to creating a navigation bar. The easiest way to create a navigation bar is to use an unordered list and style it with CSS.
导航栏对于任何网站都是非常重要的元素。 它们通过提供指向用户的链接的主要列表,提供了主要的导航方法。 创建导航栏的方法有很多。 创建导航栏的最简单方法是使用无序列表,并使用CSS设置其样式。
Navigation Bars are mostly made up of <ul>
lists that are horizontally arranged and styled.
导航栏主要由水平排列和样式化的<ul>
列表组成。
While styling the navigation bars, it’s common to remove the extra spacing created by the <ul>
and <li>
tags as well as the bullet points that are automatically inserted:
设置导航栏的样式时,通常会删除<ul>
和<li>
标记以及自动插入的项目符号点所创建的多余间距:
list-style-type: none; margin: 0px; padding: 0px;
Example:
例:
There are two parts to any navigation: the HTML and the CSS. This is just a quick example.
任何导航都有两部分:HTML和CSS。 这只是一个简单的例子。
/* Define the main Navigation block */.myNav { display: block; height: 50px; line-height: 50px; background-color: #333;}/* Remove bullets, margin and padding */.myNav ul { list-style: none; padding: 0; margin: 0;}.myNav li { float: left; /* Or you can use display: inline; */}/* Define the block styling for the links */.myNav li a { display: inline-block; text-align: center; padding: 14px 16px;}/* This is optional, however if you want to display the active link differently apply a background to it */.myNav li a.active { background-color: #3786E1;}
翻译自:
如何构建顶部导航条
转载地址:http://gbuzd.baihongyu.com/