CSS 코드는 변환 및 기울이기 속성을 사용하여 육각형 모양을 만듭니다. Overflow:hidden 속성은 육각형 모양 외부에 있는 이미지 부분을 숨기는 데 사용됩니다.
HTML 코드는 각각 이미지, 제목 및 텍스트 단락이 포함된 24개의 육각형 모양을 정의합니다. CSS 코드는 육각형 모양과 텍스트의 스타일을 지정합니다.
다음은 HTML 및 CSS 코드에 대한 분석입니다.
< ul> 태그는 순서가 지정되지 않은 목록을 정의합니다.
태그는 목록 항목을 정의합니다.
태그는 하이퍼링크를 정의합니다.
![]()
태그는 이미지를 정의합니다.
태그는 제목을 정의합니다.
태그는 단락을 정의합니다.
CSS
* 선택기는 모든 요소를 선택합니다.
여백: 0; 패딩: 0; 속성은 모든 요소에서 기본 여백과 패딩을 제거합니다.
본문 선택기는
요소.
배경: rgb(123, 158, 158); 속성은
요소.
#hexGrid 선택기는 ID가 "hexGrid"인 요소를 선택합니다.
오버플로: 숨겨진; 속성은 이미지에서 육각형 모양 바깥 부분을 숨깁니다.
너비: 90%; 속성은 #hexGrid 요소의 너비를 90%로 설정합니다.
여백: 0 auto; 속성은 #hexGrid 요소를 중심으로 합니다.
패딩:0.707% 0; 속성은 #hexGrid 요소의 상단과 하단에 패딩을 추가합니다.
#hexGrid:after 선택기는 #hexGrid 요소 뒤의 의사 요소를 선택합니다.
콘텐츠: ""; 속성은 의사 요소에 빈 문자열을 추가합니다.
display: block; 속성은 의사 요소의 표시 유형을 차단하도록 설정합니다.
clear: two; 속성은 의사 요소가 다른 요소에 의해 래핑되는 것을 방지합니다.
.hex 선택기는 "hex" 클래스가 있는 모든 요소를 선택합니다.
위치: 상대; 속성은 .hex 요소의 위치 유형을 상대 위치로 설정합니다.
list-style-type: none; 속성은 .hex 요소에서 기본 글머리 기호를 제거합니다.
float: left; 속성은 .hex 요소를 왼쪽으로 이동시킵니다.
오버플로: 숨겨진; 속성은 이미지에서 육각형 모양 바깥 부분을 숨깁니다.
가시성: 숨김; 속성은 .hex 요소를 숨깁니다.
-webkit-transform:rotate(-60deg)skewY(30deg); 속성은 .hex 요소를 -60도 회전하고 y축에서 30도 기울입니다.
-ms-변환: 회전(-60deg) 스큐Y(30deg); 속성은 .hex 요소를 -60도 회전하고 y축에서 30도 기울입니다.
변환:rotate(-60deg)skewY(30deg); 속성은 .hex 요소를 -60도 회전하고 y축에서 30도 기울입니다.
.hex * 선택기는 .hex 요소의 모든 하위 요소를 선택합니다.
위치: 절대; 속성은 하위 요소의 위치 유형을 절대값으로 설정합니다.
가시성: visible; 속성은 하위 요소를 표시합니다.
.hexIn 선택기는 "hexIn" 클래스가 있는 모든 요소를 선택합니다.
display:block; 속성은 차단할 .hexIn 요소의 표시 유형을 설정합니다.
너비: 100%; 속성은 .hexIn 요소의 너비를 100%로 설정합니다.
높이: 100%; 속성은 .hexIn 요소의 높이를 100%로 설정합니다.
text-align: center; 속성은 .hexIn 요소의 텍스트를 중앙에 배치합니다.
색상: #fff; 속성은 .hexIn 요소의 텍스트 색상을 흰색으로 설정합니다.
오버플로: 숨겨진; 속성은 이미지에서 육각형 모양 바깥 부분을 숨깁니다.
-webkit-transform:skewY(-30deg)rotate(60deg); 속성은 .hexIn 요소를 y축에서 -30도 기울이고 60도 회전합니다.
-ms-transform:skewY(-30deg)rotate(60deg); 속성은 .hexIn 요소를 y축에서 -30도 기울이고 60도 회전합니다.
변환:skewY(-30deg)rotate(60deg); 속성은 .hexIn 요소를 y축에서 -30도 기울이고 60도 회전합니다.
-webkit-backface-visibility: hide; 속성은 .hexIn 요소의 뒷면을 숨깁니다.
backface-visibility: Hidden; 속성은 .hexIn 요소의 뒷면을 숨깁니다.
HEX 콘텐츠
.hex img 선택기는 모든 이미지를 선택합니다
위 내용은 HTML과 CSS는 이미지, 제목, 텍스트가 포함된 육각형 그리드 레이아웃을 어떻게 생성합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
