How to make a horizontal navigation bar in css-CSS Tutorial-php.cn

How to make a horizontal navigation bar in css

下次还敢

Release： 2024-04-25 12:06:18

Original

977 people have browsed it

The steps to create a horizontal navigation bar using CSS are as follows: Create an HTML navigation structure. Apply CSS styles: layout container: display: flex; justify-content: center; align-items: center; style list: display: flex; list-style-type: none; margin: 0; padding: 0; style list items: margin-right: 1em; style link: text-decoration: none; color: black; mouseover state: a:hov

How to make a horizontal navigation bar in css

##How to use Creating a horizontal navigation bar with CSS

Creating a horizontal navigation bar is a common requirement for most website designs. Using CSS, this can be easily achieved by following these steps:

Create HTML structure:

<code class="html"><nav>
  <ul>
    <li><a href="home.html">主页</a></li>
    <li><a href="about.html">关于</a></li>
    <li><a href="contact.html">联系</a></li>
  </ul>
</nav></code>

Copy after login

Apply CSS styles:

1. Layout container:

<code class="css">nav {
  display: flex;
  justify-content: center;
  align-items: center;
}</code>

Copy after login

display: flex Allows the navigation bar to become a horizontally arranged container.
justify-content: center Center its content horizontally.
align-items: center Center its content vertically.

2. Style list:

<code class="css">ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}</code>

Copy after login

display: flex Also converts the list to a horizontal container.
list-style-type: none Remove bullets.
margin: 0 and padding: 0 remove default spacing and padding.

3. Style list items:

<code class="css">li {
  margin-right: 1em;
}</code>

Copy after login

margin-right: 1em Add between each list item Some spacing.

4. Style link:

<code class="css">a {
  text-decoration: none;
  color: black;
}</code>

Copy after login

text-decoration: none Remove link underline.
color: black Set the link text to black.

5. Mouse hover state:

<code class="css">a:hover {
  color: blue;
}</code>

Copy after login

a:hover Set when the mouse is hovering over a link Text color is blue.

Result:

Following these steps will create a horizontal navigation bar where items are arranged horizontally with each other, centered on the screen. The link text turns blue when you hover over it.

The above is the detailed content of How to make a horizontal navigation bar in css. For more information, please follow other related articles on the PHP Chinese website!