How to create a responsive image navigation layout using HTML and CSS-HTML Tutorial-php.cn

How to create a responsive image navigation layout using HTML and CSS

WBOY

Release： 2023-10-20 09:55:52

Original

1384 people have browsed it

How to create a responsive image navigation layout using HTML and CSS

How to use HTML and CSS to create a responsive image navigation layout

HTML and CSS are important tools for creating web page layouts. By using HTML structural tags and CSS style rules, we can create a variety of page layouts. In this article, we will learn how to create a responsive image navigation layout using HTML and CSS.

First, let's write the HTML code.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式图片导航布局</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <li><a href="#"><img src="home.png" alt="Home"></a></li>
      <li><a href="#"><img src="about.png" alt="About"></a></li>
      <li><a href="#"><img src="services.png" alt="Services"></a></li>
      <li><a href="#"><img src="contact.png" alt="Contact"></a></li>
    </ul>
  </nav>
</body>

</html>

Copy after login

In the above code, we create a navigation bar. The navigation bar contains an unordered list, and each list item contains an anchor element with an image and link. Please make sure to put the appropriate image path in the src attribute.

Next, we will write CSS code to add styles to the navigation bar.

nav {
  background-color: #333;
  text-align: center;
  padding: 10px 0;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin: 0 10px;
}

nav ul li a img {
  width: 30px;
  height: 30px;
}

@media (max-width: 600px) {
  nav ul li {
    display: block;
    margin: 10px 0;
  }
}

Copy after login

In the above CSS code, we set some basic styles for the navigation bar and list items. We also use media queries to set that the list items should be displayed as block-level elements when the screen width is less than 600px.

Finally, we need to create an external stylesheet called style.css and connect it to the HTML file.

Now we can open the HTML file in the browser and view our responsive image navigation layout. When the screen width is greater than 600px, the navigation bar should appear horizontally, as shown below:

[Home] [About] [Services] [Contact]

When the screen width is less than 600px, the navigation bar should appear vertically like this:

[Home]
[About]
[Services]
[Contact]

By using HTML and CSS, we create A simple responsive image navigation layout. You can further customize the style and add more functionality to suit your needs.

The above is the detailed content of How to create a responsive image navigation layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!