CSS 목록

CSS 목록

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

다른 목록 항목을 순서 있는 목록으로 표시하도록 설정
다른 목록 항목을 순서 없는 목록으로 표시하도록 설정
목록 설정 이미지로 표시된 항목

List

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

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

CSS를 사용하면 목록의 스타일을 더욱 세부적으로 지정할 수 있으며 이미지를 목록 항목 마커로 사용할 수 있습니다.

다양한 목록 항목 마커

list-style-type 속성은 목록 항목 마커의 유형을 다음과 같이 지정합니다. :

Instance

    <!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>香蕉</li>
    <li>苹果</li>
    <li>橙子</li>
</ul>

<ul class="b">
    <li>香蕉</li>
    <li>苹果</li>
    <li>橙子</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
    <li>香蕉</li>
    <li>苹果</li>
    <li>橙子</li>
</ol>

<ol class="d">
    <li>香蕉</li>
    <li>苹果</li>
    <li>橙子</li>
</ol>

</body>
</html>

프로그램을 실행하여 사용해 보세요. 순서가 없는 목록이고 일부는 순서가 있는 목록입니다.

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

예

     <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        ul
        {
            list-style-image:url('/upload/course/000/000/006/580870246427d963.jpg');
        }
    </style>
</head>

<body>
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>
</body>
</html>

프로그램을 실행하여 사용해 보세요

예 다른 목록 항목 태그 모두

   <!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: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:katagana-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>
<p>不同的列表项标记</p>
<ul class="a">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ul>

<ul class="b">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ul>

<ul class="c">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ul>

<ol class="d">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="e">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="f">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="g">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="h">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="i">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="j">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="k">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="l">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="m">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="n">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="o">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="p">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="q">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="r">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="s">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="t">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="u">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

<ol class="v">
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨子</li>
</ol>

</body>
</html>

프로그램을 실행하여 사용해 보세요

CSS 목록 속성

property목록 스타일list-style-imagelist-style-positionlist-style-type

description
약어 속성. 하나의 명령문에서 목록의 모든 속성을 설정하는 데 사용됩니다.
이미지를 목록 항목 플래그로 설정합니다.
목록에서 목록 항목 플래그의 위치를 설정합니다.
목록 항목 플래그의 유형을 설정합니다.

지속적인 학습

새로운 파일

<!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: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:katagana-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> <p>不同的列表项标记</p> <ul class="a"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ul> <ul class="b"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ul> <ul class="c"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ul> <ol class="d"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="e"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="f"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="g"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="h"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="i"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="j"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="k"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="l"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="m"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="n"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="o"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="p"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="q"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="r"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="s"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="t"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="u"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> <ol class="v"> <li>香蕉</li> <li>苹果</li> <li>梨子</li> </ol> </body> </html>

제출하다 코드 재설정

자동운전