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개
float:left, li가 왼쪽부터 병렬을 시작하도록 합니다.
padding:4px 8px set li 및 상자 간격;
너비:160px li 너비는 설정 및 고정되어야 합니다(너비 값은 ps 소프트웨어의 슬라이싱 도구로 측정됩니다)
display:block은 이미지에 대한 전용 라인을 설정합니다.
width:160px; 고정적으로 설정된 이미지 높이 너비
display:block은 너비와 높이를 효과적으로 설정합니다. 독점적인 한 줄 효과;
width:100%; height:30px 너비와 높이를 100%로 설정하면 너비가 160px로 설정되어 너비가 100으로 설정되는 장점이 있습니다. % 너비는 상위 너비를 사용하여 자동으로 계산됩니다. 100% 너비는 상위 너비와 일치합니다.
line-height:30px; 텍스트가 30px에서 세로로 가운데 정렬되도록 설정합니다. 스팬 배경색 설정
2. HTML 핵심 포인트