HTML과 CSS는 이미지, 제목, 텍스트가 포함된 육각형 그리드 레이아웃을 어떻게 생성합니까?

태그를 사용하면 웹사이트에 이미지를 표시할 수 있습니다.

태그는 순서가 지정되지 않은 목록을 생성하고
• 태그는 목록 항목을 정의합니다. 태그는 하이퍼링크를 정의합니다.

  CSS 코드는 변환 및 기울이기 속성을 사용하여 육각형 모양을 만듭니다. Overflow:hidden 속성은 육각형 모양 외부에 있는 이미지 부분을 숨기는 데 사용됩니다.

  HTML 코드는 각각 이미지, 제목 및 텍스트 단락이 포함된 24개의 육각형 모양을 정의합니다. CSS 코드는 육각형 모양과 텍스트의 스타일을 지정합니다.

  다음은 HTML 및 CSS 코드에 대한 분석입니다.

  HTML

  < 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!