HTML로 이미지 레이아웃을 구현하는 방법

HTML에서 이미지 레이아웃을 구현하는 방법: 1. 새 파일을 만들고 상자를 만듭니다. 2. 이미지 상자를 설정하고 p 태그를 사용하여 단락을 구분합니다. 3. 콘텐츠를 수정하기 위한 스타일을 만듭니다. 브라우저 효과에서 미리 봅니다.

이 튜토리얼의 운영 환경: windows7 시스템, html5&&Adobe Dreamweaver cc2020 버전, DELL G3 컴퓨터.

HTML에서 이미지 레이아웃을 구현하는 방법:

1. 코드를 입력하기 전에 먼저 구조를 생각하고 마지막으로 종이에 구조를 그립니다. 이 예시에서는 전체적으로 3부분으로 나누어 볼 수 있는데, 위쪽과 왼쪽 부분이 위쪽이 제목 표시줄, 아래쪽 왼쪽이 그림이 배치될 수 있는 부분, 오른쪽이 텍스트 매칭입니다.

그런 다음 DW를 열고 새 HTML 파일을 만든 다음 body 태그 아래에 큰 상자를 만듭니다. 상자의 클래스 이름을 지정하고 첫 번째 줄의 제목 표시줄을 h1로 나타냅니다.

2. 그런 다음 클래스 이름이 pic인 그림 상자를 왼쪽 열에 설정하고

라벨 아래에 이미지 img를 삽입합니다. 3. 오른쪽에는 텍스트가 있습니다. 상자, 단락 내부에서는 p 태그를 사용하여 단락을 구분할 수 있습니다.

4. 컨텐츠가 완성되면 스타일을 생성하여 head 태그 아래의 컨텐츠를 수정합니다. 먼저 전체 상자 너비를 너비로 설정한 다음. 중앙에 정렬하세요

5. 제목 표시줄의 텍스트는 기본적으로 이동할 필요가 없습니다. 링크를 추가하거나 글꼴 색상을 변경한 다음 이미지를 고정된 너비와 높이로 설정할 수 있습니다. 왼쪽으로 띄우기

6. 그런 다음 오른쪽으로 이동 측면 텍스트를 수정하고 오른쪽으로 띄운 다음 파일을 저장하고 브라우저에서 효과를 미리 봅니다.

7. 그림과 같이 브라우저에서 미리 본 후 효과가 나타납니다. 실제 적용에서는 떠다니는 물체를 제거해야 할 수도 있습니다.

관련 학습 권장 사항: html 튜토리얼

위 내용은 HTML로 이미지 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!