크로스 브라우저 솔루션을 사용하여 목록 항목 태그의 이미지 설정

분석 예:

ul:

● 목록 스타일 유형을 삭제 목록 항목 표시 없음으로 설정

● 여백과 여백을 0px로 설정(브라우저 호환성)

ul 모두 li in:

● 이미지의 URL을 설정하고 한 번만 표시되도록 설정(중복 없음)

● 필요한 위치에 이미지 위치 지정(왼쪽 0px, 위쪽 및 아래쪽 5px)

● 패딩 사용 - 왼쪽 속성은 목록에 텍스트를 넣습니다

다음 섹션

새로운 파일

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
ul
{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
ul li
{
	background-image:url("https://img.php.cn/upload/article/000/000/015/5c6e720242040312.gif");
	background-repeat:no-repeat;
	background-position:0px 5px; 
	padding-left:14px;
}
</style>
</head>

<body>
<ul>
<li>PHP</li>
<li>JavaScript</li>
<li>MySQl</li>
</ul>
</body>
</html>

제출하다 코드 재설정

자동운전

전체 화면