li 태그에 아이콘을 추가하는 세 가지 방법 공유

페이지 레이아웃을 할 때 li 태그를 자주 사용하는데, li 태그만 사용하는 것은 상대적으로 단조롭습니다. 그러면 페이지 효과를 위해 그림을 추가해야 할 때가 있습니다. 이 기사에서는 li 태그에 아이콘을 추가하는 세 가지 방법을 공유하겠습니다. 이 방법이 도움이 되기를 바랍니다.

1. CSS

ul{list-style-type:disc;}의 특수 속성을 사용합니다. //디스크의 기능은 각 li 앞에 검은색 점을 추가하는 것입니다. 기타 일반적으로 사용되는 것은 사각형입니다. : 검정색 정사각형; 없음: 목록 스타일 없음;

또한

ul{list-style-position:inside;} 또는 외부

와 같이 아이콘이 li 태그 외부에 있는지 여부를 제어할 수 있습니다. 자신만의 패턴을 추가하고 싶다면 정의된 패턴을 사용할 수 있습니다.

ul{list-style-image:url(image address);}

물론 position에도 사용할 수 있습니다.

하지만 저는 위의 속성을 절대 적용하지 않으며 모든 사람에게 권장하지도 않습니다. 왜일까요?

우선, 목록 스타일 유형의 ul은 브라우저마다 크기가 다른 점이나 사각형을 표시하므로 매우 보기 흉합니다.

게다가 positon 속성은 사용하기 쉽지 않습니다. 이 속성을 사용해 본 결과 IE6 이상과 Firefox에서는 표시되는 방향이 통일되기 어렵습니다.

2. background

ul{….;list-style-type:none;….}

li{….;배경:url(배경 아이콘) no-repeat 0px 0px;…을 사용하는 것이 좋습니다. }

여기서 반복 없음 기능은 이미지가 타일링 효과를 생성하는 것을 방지하는 것이며, 0px와 0px는 이미지 표시 위치를 지정하기 위한 좌표입니다.

여기서 한 가지 더, li에 배경 이미지를 추가할 때 padding-left: 임의의 숫자 px도 추가해야 합니다. 그렇지 않으면 텍스트가 배경 아이콘을 차단하지만 동시에 li에 너비를 추가하면 안 됩니다. , 그렇지 않으면 다른 브라우저와 호환됩니다. 문제가 있는 경우 CSS의 위치 지정을 참고하고 패딩 속성을 주의해서 사용하세요

3. 순위 목록을 구현하려면 배경을 사용하세요

사실은 이렇습니다. 매우 간단합니다. 약간만 변경하면 됩니다

ul{….; background:url(path ) no-repeat 1px 2px;….}

li 대신 ul에 그림을 추가해야 한다는 것을 알아야 합니다. 다만 차이점은 사진이 1, 2, 3열 순서로 깔끔하게 정리되어 있다는 점입니다.... 원하는 사진이나 기타 효과는 각 행의 높이가 사진과 밀접하게 일치한다는 점에 유의하시기 바랍니다.

위 내용은 li 태그에 아이콘을 추가하는 세 가지 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!