HTML5 및 CSS3 플랫 스타일 블로그 튜토리얼을 위한 리소스 공유

이 과정에서는 CSS3 플랫 스타일 블로그의 예를 통해 누구나 쉽게 일반 웹 페이지의 구성 요소를 이해하고, WEB 구성 요소의 다양한 부분을 유연하게 사용하고, 구성 아이디어를 이해하고, 웹 페이지의 유연한 레이아웃과 디자인을 쉽게 이해할 수 있도록 자세히 설명합니다. . 매크로부터 마이크로까지 전체적인 레이아웃도 파악할 수 있습니다.

강좌 재생 주소: http://www.php.cn/course/307.html

선생님의 강의 스타일:

선생님의 강의는 간단하고 깊이 있고 명확합니다. 논리적 사고력을 사용하여 학생들의 관심을 끌고 이성을 사용하여 교실 교육 과정을 제어합니다. 선생님의 강의를 들으면서 학생들은 지식을 배울 뿐만 아니라 사고력 훈련도 받으며 선생님의 엄격한 학문적 태도에 영향을 받고 영향을 받습니다

이 영상에서 더 어려운 부분은 HTML5 및 CSS3 플랫 스타일 블로그입니다:

모듈 분석:
플랫 스타일 레이아웃: 헤더 및 본문
페이지 구성요소 분석:
1, 헤더(페이지 헤더):
①h1>a, 홈페이지 링크를 넣으세요. 일반적으로 페이지에 다음이 있는 것이 좋습니다. 하나의 h1만 사용할 수 있고 다른 것들은 h2, h3 등을 사용할 수 있습니다. Jiangzi는 페이지 최적화에 도움이 됩니다
②nav>ul>li>a>span, 계층별로 중첩된 메뉴, 주로 구조화된 방법을 사용합니다. 네비게이션 바에 많은 버튼이나 링크가 필요합니다.
2, 배너 부분: 내부 섹션 + 스크롤 다운 버튼
①div>h2+ul,
h2>p
ul>li>a
②a
3, 텍스트 섹션1
①section> div>header+ul
header>h2>p
head er 제목 쓰기 Subtitle
ul>li>동위 제목
inner는 전체 페이지의 너비를 제한하는 데 사용됩니다
3, 텍스트 section2
section>section>div1+ div2
div1>img
div2>h2+p
strong list 속성이 없으면 div를 사용하여 작성할 수 있습니다.
4, section3, 4는 생략합니다.
5, footer 바닥글 부분
footer>ul+ul, div 또는span이 적합합니다.

1. 스타일 및 파일 구조 재설정:
스타일 재설정 목적:
다른 브라우저에서 스타일을 일관되게 만듭니다.
웹사이트: cssreset.com 스타일 재설정 공식 웹사이트,
일반적으로 사용되는 웹사이트: necolas.github.io/normalize.css 브라우저가 정규화되어 바로 도입 가능

2. 페이지의 큰 프레임 분석:
헤더+내용+바닥글
헤더>탐색>테마 배너

3. 페이지 헤더의 구조 분석 및 레이아웃
※로렘+탭 입력 숭고한 편집기에서는 의미 없는 텍스트 채우기가 생성될 수 있습니다.

위 내용은 HTML5 및 CSS3 플랫 스타일 블로그 튜토리얼을 위한 리소스 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!