CSS 목록 스타일 설명 예시

CSS List

CSS List속성 기능은 다음과 같습니다.

순서가 지정된 목록으로 표시할 다른 목록 항목 설정

순서가 지정되지 않은 목록으로 표시된 다른 목록 항목 설정

이미지로 표시된 목록 항목 설정

목록

HTML에는 두 가지 유형의 목록이 있습니다.

순서가 지정되지 않은 목록 - 목록 항목이 특수 그래픽(예: 작은 검은색 점, 작은 상자 등)으로 표시됩니다.

순서가 지정된 목록 - 목록 항목이 숫자나 문자로 표시됩니다.

CSS 사용, 추가 스타일을 나열할 수 있으며 이미지를 목록 항목 표시자로 사용할 수 있습니다.

다른 목록 항목 태그

list-style-type 속성은 목록 항목 태그의 유형을 지정합니다. :

인스턴스

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

일부 값 ​​없음 순차 목록 및 일부 순서 목록입니다.

이미지를 목록 항목 마커로 지정

이미지를 목록 항목 마커로 지정하려면 목록 스타일 이미지 속성을 사용하세요.

Instance

ul
{
list-style-image: url('sqpurple.gif');
}

위의 예 디스플레이는 모든 브라우저에서 동일하지 않습니다. IE 및 Opera 디스플레이 이미지 태그는 Firefox, Chrome 및 Safari보다 약간 높습니다.

모든 브라우저에 동일한 이미지 로고를 배치하려면 브라우저 호환 솔루션을 사용해야 합니다. 프로세스는 다음과 같습니다

브라우저 호환성 솔루션

또한 모두에서 브라우저에서 다음 예는 이미지 태그를 표시합니다:

예

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

예 설명:

ul:

목록 스타일 유형을 없음으로 설정 목록 항목 태그 제거

패딩 및 여백 설정 0px(브라우저 호환성)

ul의 모든 li:

이미지 URL 설정 및 표시되도록 설정 한 번만(중복 없음)

필요한 위치에 이미지를 배치합니다(왼쪽 0px, 위쪽 및 아래쪽 5px)

padding-left 속성을 사용하여 목록에 텍스트 배치

목록 축약 속성

모든 목록 속성을 단일 속성으로 지정할 수 있습니다. 이를 약어 속성이라고 합니다.

목록에 약식 속성을 사용하면 목록 스타일 속성이 다음과 같이 설정됩니다.

Instance

ul
{
list-style: square url("sqpurple.gif");
}

약식 속성 값을 사용하는 경우 순서는 다음과 같습니다.

list-style -type

list-style-position(자세한 내용은 아래 CSS 속성 시트 참조)

list-style-image

위의 경우 값 중 하나가 누락되고 나머지는 여전히 지정된 순서대로 되어 있어도 문제가 되지 않습니다.

【관련 추천】

1. 특별 추천: "php Programmer Toolbox" V0.1 버전 다운로드

2. 무료 CSS 온라인 동영상 튜토리얼

3. php.cn Dugu Jiujian (2) - CSS 동영상 튜토리얼

위 내용은 CSS 목록 스타일 설명 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!