CSS 목록 스타일(ul)
CSS 목록
CSS 목록 속성은 다음과 같이 작동합니다.
다른 목록 항목을 순서가 지정된 목록으로 표시하도록 설정
순서가 지정되지 않은 목록으로 표시된 다른 목록 항목 설정
이미지로 표시된 목록 항목 설정
목록
HTML에는 두 가지 유형의 목록이 있습니다.
순서가 지정되지 않은 목록 - 목록 항목은 특수 그래픽(예: 작은 검은색 점, 작은 점, 상자 등)
순서가 지정된 목록 - 목록 항목에는 숫자나 문자로 레이블이 지정됩니다.
CSS를 사용하면 목록의 추가 스타일을 지정할 수 있습니다. 완료되었으며 이미지를 목록 항목 마커로 사용할 수 있습니다.
다른 목록 항목 태그
list-style-type 속성은 목록 항목 태그의 유형을 지정합니다:
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
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;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
일부 값은 순서가 지정되지 않은 목록이고 일부 값은 순서가 지정된 목록입니다.
이미지를 목록 항목 마커로 지정
이미지를 목록 항목 마커로 지정하려면 목록 스타일 이미지 속성을 사용하세요.
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-image:url('http://img.php.cn/upload/article/000/000/015/5c67daf64b661194.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
위의 예는 동일하게 표시되지 않습니다 모든 브라우저에서 IE 및 Opera는 Firefox, Chrome 및 Safari보다 약간 높은 이미지 태그를 표시합니다.
모든 브라우저에 동일한 이미지 로고를 배치하려면 브라우저 호환 솔루션을 사용해야 합니다. 프로세스는 다음과 같습니다
브라우저 호환성 솔루션
또한 모두에서 브라우저에서 다음 예는 이미지 마크업을 표시합니다.
Instance
<!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("http://img.php.cn/upload/article/000/000/015/5c67daf64b661194.gif");
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>Running Instance»
"실행"을 클릭합니다. 온라인 인스턴스를 보려면 인스턴스" 버튼
설명 예:
ul:
Set 목록 스타일 유형을 목록 항목 태그 제거
패딩과 여백을 0px로 설정(브라우저 호환성)
ul의 모든 li :
이미지의 URL을 설정하고 한 번만 표시되도록 설정(중복 없음)
필요한 것 위치 이미지(왼쪽 0px, 위쪽 및 아래쪽 5px)
padding-left 속성을 사용하여 목록에 텍스트 배치
목록 축약 속성
모든 목록 속성을 단일 속성으로 지정할 수 있습니다. 이를 약어 속성이라고 합니다.
목록은 약어 속성을 사용하며, 목록 스타일 속성은
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style:square url("http://img.php.cn/upload/article/000/000/015/5c67daf64b661194.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
축약된 속성 값을 사용하는 경우 순서는 다음과 같습니다.
list-style-type
list-style-position(자세한 내용은 아래 CSS 속성 표 참조)
list-style-image
위 값 중 하나가 누락되고 나머지는 지정된 순서대로 유지되어도 문제가 되지 않습니다.
추가 인스턴스
인스턴스: 모두 다른 목록 항목 마커
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}
ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}
ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}
</style>
</head>
<body>
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>실행 예?
온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요
이 예는 다양한 CSS 목록 항목 마크업을 모두 보여줍니다.
모든 CSS 목록 속성
| 속성 | 설명 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
list-style
| 약어 속성. 하나의 명령문으로 목록의 모든 속성을 설정하는 데 사용됩니다. | ||||||||||
| list-style-image<🎜> | 이미지를 목록 항목 플래그로 설정합니다. | ||||||||||
| list-style-position<🎜> | 목록에서 목록 항목 표시의 위치를 설정합니다. | ||||||||||
| list-style-type<🎜> | 목록 항목 플래그 유형을 설정합니다. |
