> 웹 프론트엔드 > HTML 튜토리얼 > HTML과 CSS를 사용하여 반응형 제품 디스플레이 레이아웃을 만드는 방법

HTML과 CSS를 사용하여 반응형 제품 디스플레이 레이아웃을 만드는 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
풀어 주다: 2023-10-16 08:24:35
원래의
1015명이 탐색했습니다.

HTML과 CSS를 사용하여 반응형 제품 디스플레이 레이아웃을 만드는 방법

HTML 및 CSS를 사용하여 반응형 제품 디스플레이 레이아웃을 만드는 방법

개요:
현대 사회에서는 점점 더 많은 사람들이 인터넷을 통해 쇼핑합니다. 더 많은 소비자의 관심을 끌기 위해 웹사이트 개발자는 아름답고 반응이 빠른 제품 디스플레이 페이지를 만들어야 합니다. 이 기사에서는 HTML과 CSS를 사용하여 간단하고 효과적인 제품 디스플레이 레이아웃을 구현하는 방법을 소개합니다.

1단계: HTML 구조 설정
먼저 기본 HTML 구조를 설정해야 합니다. 이 구조에서는 div 요소를 사용하여 제품에 대한 컨테이너를 만들고 제품의 이미지, 제목 및 가격을 삽입합니다. 다음은 기본 HTML 구조의 예입니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

<head>

    <title>商品展示</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <div class="container">

        <div class="product">

            <img  src="/static/imghw/default1.png"  data-src="product1.jpg"  class="lazy" alt="HTML과 CSS를 사용하여 반응형 제품 디스플레이 레이아웃을 만드는 방법" >

            <h3>商品标题</h3>

            <p>商品价格</p>

        </div>

        <div class="product">

            <img  src="/static/imghw/default1.png"  data-src="product2.jpg"  class="lazy" alt="HTML과 CSS를 사용하여 반응형 제품 디스플레이 레이아웃을 만드는 방법" >

            <h3>商品标题</h3>

            <p>商品价格</p>

        </div>

        <!-- 添加更多的商品 -->

    </div>

</body>

</html>

로그인 후 복사
로그인 후 복사

위의 예에서는 모든 제품을 포함할 컨테이너 div를 설정했습니다. 각 제품은 클래스 이름이 "product"인 div로 정의됩니다. 제품 이미지, 제목, 가격이 각각 제품 div에 삽입됩니다.

2단계: CSS 스타일 설정
다음으로 CSS를 사용하여 제품 디스플레이 레이아웃 스타일을 지정해야 합니다. CSS 미디어 쿼리를 사용하여 반응형 레이아웃을 구현하겠습니다. 다음은 CSS 스타일 설정의 예입니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

.container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}

 

.product {

    width: 300px;

    margin: 20px;

    padding: 10px;

    text-align: center;

    background-color: lightgray;

}

 

.product img {

    width: 100%;

    height: auto;

}

 

@media (max-width: 768px) {

    .product {

        width: 400px;

    }

}

 

@media (max-width: 480px) {

    .container {

        flex-direction: column;

    }

    .product {

        width: 100%;

    }

}

로그인 후 복사
로그인 후 복사

위 예에서는 먼저 컨테이너를 flex 레이아웃으로 설정하고 flex-wrap 속성을 사용하여 컨테이너가 너비를 초과할 때 항목이 줄바꿈되도록 합니다. 그런 다음 제품 너비, 여백 및 패딩을 설정하고 텍스트를 가운데 정렬했습니다. 마지막으로 제품 컨테이너의 배경색을 설정합니다.

@media 쿼리에는 다양한 화면 크기에 맞는 다양한 스타일이 있습니다. 최대 너비 768px에서 제품 너비를 400px로 설정했습니다. 최대 너비가 480px인 경우 flex-direction 속성을 사용하여 제품을 세로로 정렬하고 제품의 너비를 100%로 설정합니다.

3단계: 더 많은 제품 추가
더 많은 제품을 표시하려면 HTML에 더 많은 제품 div를 추가하세요. 기존 제품 div를 복사하여 새 제품을 빠르게 만들 수 있습니다. 제품의 이미지, 제목, 가격은 필요에 따라 맞춤 설정할 수 있습니다.

요약:
HTML과 CSS를 사용하여 반응형 제품 디스플레이 레이아웃을 만드는 것은 어렵지 않습니다. HTML 구조와 CSS 스타일을 설정하면 아름다운 제품 표시 페이지를 쉽게 구현할 수 있습니다. 제품이 다양한 장치에서 가장 잘 보이도록 미디어 쿼리를 사용하여 다양한 화면 크기에 적응하는 것을 잊지 마십시오. 이 기사가 인상적인 반응형 제품 디스플레이 레이아웃을 만드는 데 도움이 되었기를 바랍니다.

Appendix: 샘플 파일
style.css:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

.container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}

 

.product {

    width: 300px;

    margin: 20px;

    padding: 10px;

    text-align: center;

    background-color: lightgray;

}

 

.product img {

    width: 100%;

    height: auto;

}

 

@media (max-width: 768px) {

    .product {

        width: 400px;

    }

}

 

@media (max-width: 480px) {

    .container {

        flex-direction: column;

    }

    .product {

        width: 100%;

    }

}

로그인 후 복사
로그인 후 복사

index.html:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

<head>

    <title>商品展示</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <div class="container">

        <div class="product">

            <img  src="/static/imghw/default1.png"  data-src="product1.jpg"  class="lazy" alt="HTML과 CSS를 사용하여 반응형 제품 디스플레이 레이아웃을 만드는 방법" >

            <h3>商品标题</h3>

            <p>商品价格</p>

        </div>

        <div class="product">

            <img  src="/static/imghw/default1.png"  data-src="product2.jpg"  class="lazy" alt="HTML과 CSS를 사용하여 반응형 제품 디스플레이 레이아웃을 만드는 방법" >

            <h3>商品标题</h3>

            <p>商品价格</p>

        </div>

        <!-- 添加更多的商品 -->

    </div>

</body>

</html>

로그인 후 복사
로그인 후 복사

위 샘플 파일은 두 개의 도식 제품 이미지를 사용하며, 자신의 제품 이미지로 교체할 수 있습니다. index.html에서 파일 이름과 경로를 해당 파일로 변경하는 것을 잊지 마세요.

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

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