> 웹 프론트엔드 > HTML 튜토리얼 > HTML 및 CSS를 사용하여 반응형 이미지 탐색 레이아웃을 만드는 방법

HTML 및 CSS를 사용하여 반응형 이미지 탐색 레이아웃을 만드는 방법

WBOY
풀어 주다: 2023-10-20 09:55:52
원래의
1408명이 탐색했습니다.

HTML 및 CSS를 사용하여 반응형 이미지 탐색 레이아웃을 만드는 방법

HTML과 CSS를 사용하여 반응형 이미지 탐색 레이아웃을 만드는 방법

HTML과 CSS는 웹 페이지 레이아웃을 만드는 데 중요한 도구입니다. HTML 구조 태그와 CSS 스타일 규칙을 사용하여 다양한 페이지 레이아웃을 만들 수 있습니다. 이 기사에서는 HTML과 CSS를 사용하여 반응형 이미지 탐색 레이아웃을 만드는 방법을 알아봅니다.

먼저 HTML 코드를 작성해 보겠습니다.

<!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>
로그인 후 복사

위 코드에서는 네비게이션 바를 생성합니다. 탐색 모음에는 순서가 지정되지 않은 목록이 포함되어 있으며 각 목록 항목에는 이미지와 링크가 있는 앵커 요소가 포함되어 있습니다. src 속성에 적절한 이미지 경로를 입력했는지 확인하세요. src属性中。

接下来,我们将编写CSS代码来为导航栏添加样式。

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;
  }
}
로그인 후 복사

在上面的CSS代码中,我们为导航栏和列表项设置了一些基本的样式。我们还使用媒体查询来设置在屏幕宽度小于600px时列表项应该显示为块级元素。

最后,我们需要创建一个名为style.css

다음으로 탐색 모음에 스타일을 추가하는 CSS 코드를 작성하겠습니다.

rrreee

위의 CSS 코드에서는 탐색 표시줄과 목록 항목에 대한 몇 가지 기본 스타일을 설정했습니다. 또한 미디어 쿼리를 사용하여 화면 너비가 600px 미만일 때 목록 항목이 블록 수준 요소로 표시되도록 설정합니다.

마지막으로 style.css라는 외부 스타일시트를 생성하고 이를 HTML 파일에 연결해야 합니다.

이제 브라우저에서 HTML 파일을 열고 반응형 이미지 탐색 레이아웃을 볼 수 있습니다. 화면 너비가 600px보다 큰 경우 탐색 표시줄은 다음과 같이 가로로 표시되어야 합니다.


[홈] [정보] [서비스] [연락처]

화면 너비가 600px보다 작으면 탐색 표시줄이 세로로 표시되어야 합니다. , 다음과 같이

[홈]

[정보]🎜[서비스]🎜[연락처]🎜🎜HTML과 CSS를 사용하여 간단한 반응형 이미지 탐색 레이아웃을 만들었습니다. 스타일을 추가로 사용자 정의하고 필요에 맞게 더 많은 기능을 추가할 수 있습니다. 🎜

위 내용은 HTML 및 CSS를 사용하여 반응형 이미지 탐색 레이아웃을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿