이번에는 H5 시맨틱 태그의 실제 사례를 가져오겠습니다. H5 시맨틱 태그 사용 시 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
페이지 레이아웃은 html5 요소를 기반으로 합니다. 따라서 시작하기 전에 HTML5 요소에 익숙해지고 그 의미가 레이아웃에 적합한지 확인하는 것이 중요합니다.
HTML5 구조
HTML5 코드를 작성할 때 html5의
기존 div 요소를 대체하는 데 사용할 수 있는 새로운 태그 중 하나는
를 래핑하는 데 사용되는
처음에는
div 요소 내에서 각 블로그 게시물은 자체 기사 요소로 래핑됩니다.
일련의 블로그 아래에는 페이지가 매겨진 한 쌍의 링크가 있습니다. 일반적으로 페이지 매김 링크의 중요성은
와 동일하지 않습니다. 하지만 이 블로그 레이아웃은 여전히 페이지 매김 링크를 기본 탐색으로 취급합니다.
이 예에서 side 요소에는 여러 섹션 요소가 포함되어 있습니다. 사이드바 하단에 간단한 검색창이 있습니다. 이를 통해 HTML5 양식의 몇 가지 새로운 기능에 액세스할 수 있습니다.
그 중 하나는 자리 표시자 속성입니다.
레이아웃은 바닥글 요소로 끝납니다. 이 예에서는 바닥글 요소의 너비가 전체 페이지에 걸쳐 있도록 바닥글 요소를 div 컨테이너 외부에 배치해야 합니다.
header { margin: 0 0 98px 0; } header h1 { float: left; font-size: 36px; font-weight: normal; } header nav { float: right; text-align: right; padding: 6px 0 0 0; } header nav ul { list-style: none; } header nav li { float: left; font-size: 18px; width: 136px; margin: 0 0 0 20px; } header nav li:nth-child(1):before { content: "1. "; color: #a2a2a2; } header nav li:nth-child(2):before { content: "2. "; color: #a2a2a2; } header nav li:nth-child(3):before { content: "3. "; color: #a2a2a2; } header nav li:nth-child(4):before { content: "4. "; color: #a2a2a2; } header nav li:nth-child(5):before { content: "5. "; color: #a2a2a2; } #sidebar { width: 292px; float: left; padding: 4px 0 0 0; } #sidebar h3 { font-size: 18px; font-weight: normal; margin: 0 0 25px 0; } #sidebar ul { list-style: none; } #sidebar section { margin: 0 0 47px 0; } #sidebar #about a.more { display: block; text-align: right; } #sidebar #categories { width: 136px; float: left; margin: 0 20px 0 0; } #sidebar #social { width: 136px; float: left; } #footer-container { background: rgba(0,0,0,0.2); overflow: hidden; } footer { width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px; } footer #credits { list-style: none; float: left; } footer #credits li { float: left; margin: 0 6px 0 0; } footer #credits li.wordpress a { display: block; width: 20px; height: 20px; background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px; } footer #credits li.spoongraphics a { display: block; width: 25px; height: 20px; background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px; } footer #back-top { float: right; font-size: 12px; }
이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:
H5에서 드래그 앤 드롭 효과를 만드는 방법H5를 사용하여 카메라를 호출하는 방법H5와 호환되지 않는 이전 버전의 브라우저를 처리하는 방법 정보 그리고 C3위 내용은 H5 의미 태그 실제 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!