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

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

WBOY

Release： 2023-10-25 08:04:50

Original

1276 people have browsed it

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

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

With the popularity of mobile devices, responsive design has become a basic requirement for web design. In web page production, the navigation bar is a very important component. This article will introduce how to use HTML and CSS to create a responsive image navigation bar layout. The specific code examples are as follows:

HTML part:

<!DOCTYPE html>
<html>
<head>
  <title>响应式图片导航栏</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <nav>
      <div class="logo">
        <img src="logo.png" alt="网站Logo">
      </div>
      <ul class="menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>

  <section>
    <h1>欢迎来到我们的网站</h1>
    <p>这是一个响应式图片导航栏布局的示例。</p>
  </section>
</body>
</html>

Copy after login

CSS part:

body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  padding: 20px;
  text-align: center;
}

.logo img {
  width: 100px;
}

.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.menu li {
  margin: 0 10px;
}

.menu li a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

section {
  text-align: center;
  padding: 20px;
}

@media (max-width: 600px) {
  .menu {
    flex-direction: column;
  }
  
  .menu li {
    margin: 10px 0;
  }
}

Copy after login

above In the code, we first use HTML to create a basic web page structure, in which a header element is used in the navigation bar. The navigation bar includes a logo on the left and a menu on the right.

In CSS, we set some basic styles, such as setting the margin and padding of the body to 0, setting the background color of the navigation bar to #333, and setting the width of the logo to 100 pixels, etc.

In the @media query, we use a media query and modify the style of the menu so that it lines up vertically when the screen width is 600 pixels or less.

With the above HTML and CSS code, we can implement a simple responsive image navigation bar layout. When the screen width is small, the menu will automatically become vertically arranged to adapt to browsing on mobile devices.

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