Latest web development tutorials

HTML 레이아웃

페이지 레이아웃 사이트의 외관이 매우 중요한 향상시킬 수있다.

신중하게 페이지 레이아웃을 디자인하십시오.

예

온라인 예

의 <DIV> 요소를 사용하여 페이지 레이아웃
어떻게 레이아웃에 <div> 요소를 사용합니다.

를 사용하여 페이지 레이아웃 <표> 요소
어떻게 레이아웃에 <표> 요소를 사용합니다.

사이트 레이아웃

대부분의 사이트는 (잡지 나 신문 등)의 열 복수의 컨텐츠 것이다.

대부분의 사이트는 여러 열을 생성하기 위해 <div> 또는 <표> 요소를 사용할 수 있습니다. CSS 요소의 위치, 또는 배경 및 페이지의 다채로운 모양을 만드는 데 사용됩니다.

램프 우리는 아름다운 레이아웃을 디자인하기 위해 HTML 테이블 태그를 사용할 수 있지만 테이블 태그는 레이아웃 도구로 사용하지 않는 것이 좋습니다 있지만 -하지 테이블 레이아웃 도구.

HTML 레이아웃 - <div> 요소를 사용하여

div 요소는 HTML 요소를 그룹화하기 위해 사용되는 블록 레벨 요소이다.

다음의 예는 다중 열 레이아웃을 생성하는 다섯 DIV 요소를 사용

예

<! DOCTYPE HTML> <HTML> <헤드> <메타 캐릭터 = "UTF-8"> <제목>이 튜토리얼 (w3big.com) </ 제목> </ 헤드> <바디> <사업부 ID = "용기" 스타일 = "너비 : 500 픽셀"> <사업부 ID = "헤더" 스타일 = "배경 색 : # FFA500;"> <H1 스타일 = "여백 - 하단 : 0 ;"> 메인 페이지 제목 </ H1> </ DIV> <사업부 ID = "메뉴" 스타일 = "배경 색 : # FFD700, 높이 : 200 픽셀, 폭 : 100 픽셀, 플로트 : 왼쪽;"> <B> 메뉴로 <br> HTML </ B> 로 <br> CSS로 <br> 자바 스크립트 </ DIV> <사업부 ID = "콘텐츠" 스타일 = "배경 색 : #EEEEEE , 높이 : 200 픽셀, 폭 : 400 픽셀, 플로트 : 왼쪽;"> 텍스트 여기에 </ DIV> <사업부 ID = "바닥 글" 스타일 = "배경 색 : # FFA500, 맑은 : 모두; 텍스트 정렬 : 센터;"> 저작권 © w3big.com </ DIV> </ DIV> </ BODY> </ HTML>

»시도

위의 HTML 코드는 다음과 같은 결과를

HTML 레이아웃 - 사용 테이블

사용 HTML <표> 태그는 간단하게 레이아웃을 생성하는 것이다.

대부분의 사이트는 여러 열을 생성하기 위해 <div> 또는 <표> 요소를 사용할 수 있습니다. CSS 요소의 위치, 또는 배경 및 페이지의 다채로운 모양을 만드는 데 사용됩니다.

램프 당신이 좋은 레이아웃을 생성하는 HTML 테이블을 사용할 수 있지만, 용도는 디자인 테이블을 표 데이터를 제공하는 경우에도 -없는 테이블 레이아웃 도구!

다음의 예는 두 개의 테이블의 세 행을 사용합니다 - 첫번째와 마지막 줄이 걸쳐 열 병합 속성을 사용합니다 :

예

<! DOCTYPE HTML> <HTML> <헤드> <메타 캐릭터 = "UTF-8"> <제목>이 튜토리얼 (w3big.com) </ 제목> </ 헤드> <바디> <표 너비 = "500" 경계 = "0"> <TR> <TD 열 병합 = "2" 스타일 = "배경 색 : # FFA500;"> <H1> 메인 페이지 제목 </ H1> </ TD> </ TR> <TR> <TD 스타일 = "배경 색 : # FFD700, 폭 : 100 픽셀;"> <B> 메뉴 </ B>로 <br> HTML 로 <br> CSS로 <br> 자바 스크립트 </ TD> <TD 스타일 = "배경 색 : #eeeeee ; 높이 : 200 픽셀, 폭 : 400 픽셀;"> 여기에 텍스트 </ TD> </ TR> <TR> <TD 열 병합 = "2" 스타일 = "배경 색 : # FFA500, 텍스트 정렬 : 센터;"> 저작권 © w3big.com </ TD> </ TR> </ 테이블> </ BODY> </ HTML>

»시도

위의 HTML 코드는 다음과 같은 결과를


HTML 레이아웃 - 유용한 팁

팁 : CSS를 사용하는 최대의 장점은 CSS 코드 외부 스타일 시트에 저장되어있는 경우, 위치가 유지 쉬울 것이라는 것이다.하나의 파일을 편집하여 모든 페이지의 레이아웃을 변경할 수 있습니다. CSS에 대한 자세한 내용은, 우리의 방문 CSS 자습서를 .

팁 : 고급 레이아웃을 생성하기 때문에 매우 시간 소모가 템플릿을 사용하여 빠른 옵션입니다.검색 엔진을 통해 당신은 무료 웹 사이트 템플릿 (당신이 미리 만들어진 사이트 레이아웃을 사용하고이를 최적화 할 수 있습니다)을 많이 찾을 수 있습니다.

HTML 레이아웃 태그

标签描述
<div> 定义文档区块，块级(block-level)
<span> 定义 span，用来组合文档中的行内元素。