사용자 정의 목록 항목 목록 스타일 사용 요약-HTML 튜토리얼-php.cn

오늘은 한 회사의 채용 페이지를 만들었습니다. 오전에는 디자인 도면을 완성하고 오후에는 조판을 시작합니다. 해당 페이지는 제가 예전에 만들었던 인재뷰로의 채용 페이지를 복사해 놓았는데, 네비게이션 바와 배너가 빠르게 나오더군요. 이 콘텐츠의 일부 위치에서는 목록을 사용했으며, 물론 태그도 사용해야 합니다. 목록 항목(작은 점)은 작은 녹색 사각형으로 만들어집니다. 이때 목록 항목을 사용자 정의할 수 있는 CSS 속성이 있는지 궁금합니다. 알 필요가 없습니다. 실제로 존재합니다. 목록 스타일은 목록 스타일 유형, 목록 스타일 위치 및 목록 스타일 이미지를 정의할 수 있습니다. 이 세 가지 속성을 함께 작성할 수 있습니다. list-style-image는 정확히 사용자 정의 목록 항목 패턴입니다.

정의를 시작하기 전에 두 가지 문제에 직면했습니다. 1. 태그의 기본 스타일에 작은 점이 없습니다. 확인한 결과 초기화 스타일 시트 가 list-style: none을 정의하여 기본 작은 점이 제거되었음을 발견했습니다. 그런 다음 의 목록 스타일을 정의해야 합니다. 2. List-style-position에는 insite와 outsite 두 가지 선택값이 있습니다. insite(목록 항목이 선 안에 있음)를 사용하면 문제가 없지만 outsite(목록 항목이 선 밖에 있음)를 사용하면 작은 점이 사라집니다. 초기화 스타일 시트는 를 Overflow: Hidden으로 정의하고 를 초과하는 부분은 잘립니다. 그리고 은 에 포함되어 있으므로 는 넘치는 목록 항목을 잘라냅니다. 여기에 표시되는 기본값으로 를 정의하세요.

목록 패턴 사용자 정의를 시작할 수 있습니다. 먼저 PS에서 패턴을 잘라서 지정된 위치에 저장합니다. 목록 스타일 이미지를 정의합니다: url(i/icon.gif). 문제는 패턴이 텍스트의 수평 중앙에 위치하지 않는다는 것입니다. 일본 바이두에서는 고정된 높이를 설정해야 하는데, 설정해도 소용이 없습니다. 면밀히 조사한 결과 전임자가 이미 사용자 정의 패턴을 사용한 경험이 있는 것으로 나타났습니다. 옵션 1, 목록 항목 패턴을 잘라낼 때 하단에 공백을 포함합니다. 이 솔루션은 패턴의 공백이 항목과 일치하는지 확인해야 합니다. 페이지의 배경색입니다. 글꼴이 커지거나 작아져서 재사용할 수 없기 때문에 이 솔루션은 우아하지 않다고 생각합니다. 옵션 2, 배경 속성을 사용하여 항목 목록 패턴을 사용자 정의합니다. 이 솔루션은 패턴의 위치를 유연하게 제어할 수 있으며, 텍스트와 패턴 사이의 간격도 제어하기 쉽습니다. (간격을 제어하기 위해 패딩을 사용하라고 말하지는 않겠습니다.) 요약하면 초기화 스타일 시트에서 의 기본 점을 제거하는 것이 실제로 의미가 있습니다. 첫째, 대부분의 경우 목록 항목이 사용되지 않습니다. 둘째, 목록 스타일을 사용하여 목록 항목을 사용자 정의하는 것은 제어하기가 정말 어렵습니다.