div+css(ul li)는 그림 위에 텍스트가 있는 목록 레이아웃을 구현합니다.

css 스타일 시트 코드:

html 레이아웃 코드:

렌더링:

html 레이아웃 부분에서는 필요에 따라 해당 div를 추가할 수 있습니다.

1. CSS 핵심 스타일 단어 설명

1), ul.imglist{ margin:0 auto; width:536px;overflow:hidden}
ul 구조 레이아웃을 중앙에 배치하려면 margin:0 auto를 사용하세요. 레벨의 float 속성은 부동을 발생시키므로 하위 레벨을 지우고 float를 사용하면 상위 레벨을 열 수 없는 문제가 발생합니다.
width: 536px를 사용하면 하위 li가 정확하게 정렬할 수 있습니다. 한 줄에 3개

2), ul.imglist li{ float:left; padding:4px 8px; width:160px}

float:left, li가 왼쪽부터 병렬을 시작하도록 합니다.
padding:4px 8px set li 및 상자 간격;
너비:160px li 너비는 설정 및 고정되어야 합니다(너비 값은 ps 소프트웨어의 슬라이싱 도구로 측정됩니다)

3) ul.imglist li img{ display:block; width:160px; height:90px}

display:block은 이미지에 대한 전용 라인을 설정합니다.
width:160px; 고정적으로 설정된 이미지 높이 너비

4) ul.imglist lispan{display:block; width:100%; height:30px; line-height:30px; background:#F6F6F6}

display:block은 너비와 높이를 효과적으로 설정합니다. 독점적인 한 줄 효과;
width:100%; height:30px 너비와 높이를 100%로 설정하면 너비가 160px로 설정되어 너비가 100으로 설정되는 장점이 있습니다. % 너비는 상위 너비를 사용하여 자동으로 계산됩니다. 100% 너비는 상위 너비와 일치합니다.
line-height:30px; 텍스트가 30px에서 세로로 가운데 정렬되도록 설정합니다. 스팬 배경색 설정

2. HTML 핵심 포인트

ul li 결합 목록 태그 레이아웃을 사용합니다. 각 li 상자에는 그림 + 텍스트 제목 내용이 포함됩니다. li 상자는 그림과 텍스트 내용을 래핑하기 위해 직접 하이퍼링크 태그를 사용하고, img 태그를 사용합니다. 그림의 경우 스팬 태그와 img를 사용하여 두 개의 상자를 구성하고 CSS를 사용하여 기능적 효과를 한 줄로 차지하는 스타일(display:block)을 설정하여 텍스트와 그림이 한 줄로 배열되지 않도록 합니다. 하향식 구조.