HTML 레이아웃 방법-HTML 튜토리얼-php.cn

레이아웃에 HTML을 사용하는 방법은 다음과 같습니다. 1. "
" 태그를 통해 테이블의 행과 열을 정렬하여 페이지 레이아웃 효과를 얻습니다. 2. 여러 페이지 레이아웃에 여러 열에 웹 콘텐츠를 배치합니다. . 레이아웃에는 div 및span 태그를 사용하세요.

HTML 레이아웃 방법

페이지 레이아웃은 페이지의 시각적 요소 배열을 다루는 그래픽 디자인의 일부입니다. 다음 기사에서는 웹 페이지 레이아웃에 HTML을 사용하는 방법을 자세히 소개하겠습니다.

【추천 강좌: HTML Tutorial】

페이지 레이아웃:

제목: 프런트 엔드의 일부, 페이지 상단에 사용됩니다.
태그는 웹페이지에 헤더 섹션을 추가하는 데 사용됩니다.
탐색 바: 탐색 바는 메뉴 목록과 동일합니다. 하이퍼링크를 이용하여 컨텐츠 정보를 표시하는데 사용됩니다.
색인/사이드바: 페이지에 항상 추가할 필요가 없는 추가 정보나 광고가 포함되어 있습니다.
콘텐츠 섹션: 콘텐츠 섹션은 콘텐츠가 표시되는 주요 부분입니다.
바닥글: 바닥글 섹션에는 웹페이지와 관련된 연락처 정보 및 기타 쿼리가 포함되어 있습니다. 바닥글 섹션은 항상 웹페이지 하단에 배치됩니다.
태그는 웹페이지에 바닥글을 설정하는 데 사용됩니다.

테이블 레이아웃 사용

레이아웃을 만드는 가장 쉽고 가장 널리 사용되는 방법은 HTML

태그를 사용하는 것입니다. 원하는 방식으로 테이블의 열과 행을 정렬할 수 있습니다.

예제

예를 들어 다음 HTML 레이아웃 예제는 행 3개와 열 2개가 있는 테이블을 사용하여 구현되지만 머리글과 바닥글 열은 colspan을 사용하여 확장됩니다. 속성 두 개의 열

<table width = "100%" border = "0">
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>标题</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20">
               <b>侧边栏</b>
            </td>
            <td bgcolor = "#eee" width = "100" height = "200">
               内容
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  页脚
               </center>
            </td>
         </tr>
      </table>

로그인 후 복사

렌더링:

HTML 레이아웃 방법

다중 열 레이아웃

웹 콘텐츠를 여러 페이지에 배치하고 콘텐츠를 중간 열에 유지하거나 왼쪽 열을 사용하여 사용할 수 있습니다. 메뉴, 오른쪽 열은 광고나 기타 콘텐츠를 배치하는 데 사용할 수 있습니다.

<table width = "100%" border = "0">
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>左菜单</b>
            </td>
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               内容
            </td>
            <td bgcolor = "#aaa" width = "20%">
               <b>右菜单</b>
            </td>
         </tr>  
      <table>

로그인 후 복사

렌더링:

HTML 레이아웃 방법