사용자 정의 목록 항목 기호 list-style-image에 대한 자세한 설명-HTML 튜토리얼-php.cn

사용자 정의 목록 항목 기호 list-style-image에 대한 자세한 설명

云罗郡主

풀어 주다： 2018-11-12 16:19:44

앞으로

4963명이 탐색했습니다.

이 글은 사용자 정의 목록 항목 기호 목록 스타일 이미지에 대한 자세한 설명을 제공합니다. 특정 참조 값이 있으므로 도움이 필요한 친구에게 도움이 되길 바랍니다.

1. 목록 스타일 이미지 속성

순서가 있는 목록이든 순서가 없는 목록이든 고유한 목록 항목 기호가 있습니다. 그러나 기본 목록 항목 기호는 상대적으로 보기 흉합니다. 그러면 목록 항목 기호를 사용자 정의하려면 어떻게 해야 할까요?

CSS에서는 list-style-image 속성을 사용하여 목록 항목 기호를 맞춤설정할 수 있습니다.

구문:

list-style-image:url(图像地址);

로그인 후 복사

설명:

이미지 주소는 상대 주소 또는 절대 주소일 수 있습니다. [추천 자료: html]

예:

의 상대 위치 지정 및 절대 위치 지정 작은 아이콘은 목록 항목 기호로 사용자 정의됩니다.

사용자 정의 목록 항목 기호 list-style-image에 대한 자세한 설명

예:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>list-style-image属性</title>
    <style type="text/css">
        ul{list-style-image:url("https://img.php.cn/upload/9-3-1.png");}
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다. # 🎜🎜##🎜🎜 #

사용자 정의 목록 항목 기호 list-style-image에 대한 자세한 설명 위는 #🎜에 대해 더 알고 싶다면 사용자 정의 목록 항목 기호 목록 스타일 이미지에 대한 자세한 설명에 대한 전체 소개입니다. 🎜#Html5tutorial