> 웹 프론트엔드 > CSS 튜토리얼 > Div+CSS 레이아웃에 대한 매우 아름다운 입문 튜토리얼

Div+CSS 레이아웃에 대한 매우 아름다운 입문 튜토리얼

PHP中文网
풀어 주다: 2018-09-27 17:36:33
원래의
2083명이 탐색했습니다.

웹페이지 제작에는 CSS, HTML, DHTML, XHTML 등 다양한 용어가 있습니다. 다음 기사에서는 HTML에 대한 몇 가지 기본 지식을 사용할 것입니다. 이 입문 튜토리얼을 공부하기 전에 HTML에 대한 특정 기본 지식이 있는지 확인하십시오. DIV+CSS를 단계별로 사용하여 웹 페이지 레이아웃을 디자인해 보겠습니다.

모든 디자인의 첫 번째 단계는 구상입니다. 일반적으로 컨셉이 완성되면 포토샵이나 파이어웍스(이하 PS, FW) 등의 사진 처리 소프트웨어를 사용해 간단히 그려야 합니다. 제작할 인터페이스 레이아웃은 다음과 같습니다. 제가 구상한 인터페이스 레이아웃은 다음과 같습니다.

Div+CSS 레이아웃에 대한 매우 아름다운 입문 튜토리얼

다음으로 개념도를 바탕으로 페이지 레이아웃을 계획해야 합니다. 다이어그램을 주의 깊게 분석하면 그림이 대략적으로 나누어져 있음을 쉽게 알 수 있습니다. 다음 부분:

1. 로고, 메뉴 및 배너 사진이 포함된 상단 부분
2. 콘텐츠 부분은 사이드바와 메인 콘텐츠로 나눌 수 있습니다.
3. 하단 부분 , 일부 저작권 정보 포함.
위의 분석을 통해 아래와 같이 디자인 레이어를 쉽게 레이아웃할 수 있습니다.

Div+CSS 레이아웃에 대한 매우 아름다운 입문 튜토리얼

위 그림에 따라 실제 페이지 레이아웃 다이어그램을 그렸습니다. 레이어의 중첩 관계를 이해하기가 더 쉽습니다.

Div+CSS 레이아웃에 대한 매우 아름다운 입문 튜토리얼

DIV 구조는 다음과 같습니다.
 │body {} /*이것은 HTML 요소입니다. 자세한 내용을 모릅니다. 설명*/
 └#Container {} /*페이지 레이어 컨테이너*/
  ├#Header {} /*페이지 헤더*/
  ├#PageBody {} /*Page body*/
  │ ├#Sidebar {} /*Sidebar*/
  │ └#MainBody {} /*주요 콘텐츠*/
  └#Footer {} /*페이지 하단*/

이제 페이지 레이아웃과 기획이 완료되었고, 다음으로 해야 할 일은 HTML 코드와 CSS 작성을 시작하는 것입니다.

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