html5 layout 예제

사양 표시 섹션의 예제와 아티클은 서로 중첩됩니다. 하나는 /항상 다른 내에 중첩되어야한다는 간단한 규칙이 없습니다. 실제 환경에서 의미 체계 태그는 종종 이 예제보다 레이아웃을 따릅니다. 일반 규칙: 단면은 다른 것의 일부를 형성합니다. 기사는 그 자체입니다. html5 사양에서 charset 메타 태그에 대한 새로운 deffinion이 없습니까? 즉, 당신이 볼 수 있듯이, 나는 단지 폭을 변경하여

  • 및 소셜 블록에 대한 1 열 레이아웃을 부동하여 블로그 롤 블록에 대한 3 열 레이아웃을하고 있습니다. 이것은 이미 그 자체로 아주 잘 작동하지만 나를 귀찮게하는 한 가지가 있습니다. 각 링크를 분리하기 위해 추가 한 테두리 : 이것은 html5doctor가 말하는 것과 일치하지 않는 것처럼 보입니다. 아티클 태그는 섹션 태그를 사용하는 위치에 사용해야 하며 그 반대의 경우도 마찬가지입니다. 여러분 중 일부는 태그의 레이아웃의 주요 섹션에 class = »body » 특성을 추가하는 방법을 발견했을 수 있습니다. 이것은 우리가 내 웹 사이트의 몸이 특정 너비 (800px)가되기를 원하기 때문에, 나는 그렇게 할
    큰 포장의 팬이 아니었습니다. 그래서 우리는 이것에 대한 여백을 사용하여 기본 블록 센터링 기술을 사용합니다. 또한 포스트 사이드 콘텐츠에 사용할 수 있는 몇 가지 일반 클래스를 이 섹션에 추가하고 있습니다.

    몇 가지 기본 사항. 마지막 게시물 항목에 대 한 모든 여백 및 패딩을 제거 (그래서 내 상자의 하단에 큰 간격으로 끝나지 않는다). 나는 또한 기본적으로 직접 아이를 대상으로하는 > 선택기(selector)를 사용하고 있습니다. 예를 들어 #content .hentry는 #content 바로 내부에 있는 .hentry 요소를 대상으로 합니다. .hentry가 내부에 있는 경우, 정렬된 목록이 #content 직접적인 자녀가 아닌 손자이기 때문에 이 규칙은 적용되지 않습니다. 이것은 일단 우리가 그에 도착 하는 단일 게시물 보기를 대상으로 하는 것입니다. 다시 말하지만, 이것은 우리의 일상적인 코딩 스타일입니다. 배경, 여백, 색상 및 텍스트 스타일은 수년 동안 사용해 왔습니다. HTML5 스타일 지정이 현재 태그 언어와 다르지 않은 방법의 완벽한 예입니다. 언제나처럼 스타일링하기 쉽습니다. 이것은 함께 레이아웃을 얻기위한 우리의 첫 번째 단계입니다.